I am trying to create a downloads page, where the user is to select the item they wish from the dropdown list, in doing this the page should spawn in text in the text area based on what they selected, which is a small HTML formatted description of the file they selected. Then i wish to have a "Download!" button, which when clicked will check the value in the dropdown and then take the user to thier download which is hosted at mega.
I have the basic idea for how to make the text spawning work, however for some reason my if statements seem as good as useless; i can't get it to spawn ANY text into the text area, and i can't figure out how to link this to the button. I apologise in advance that this is quite vague and LQ code (I prefer PHP/python to JS).
This is what i have so far:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var file;
function ChooseDownload()
{
if(document.getElementById("item").value == "Shell"){
document.getElementById("what").value="You selected Shell";
file = "http://mega.co.nz/[file]";
}
else if(document.getElementById("item").value == "Bot"){
document.getElementById("what").value="You selected Sources";
file = "http://mega.co.nz/[file2]";
}
}
</script>
</head>
<body>
<h5><p>Please Select File to download:</p></h5>
<p>
<form>
<select name="item" onchange="ChooseDownload()">
<option value="Blank">Select Download</option>
<option value="Shell">My PHP Shells</option>
<option value="Bot">Botnet Sources</option>
<option value="Skype">Skype 6.9 Win</option>
<option value="Xchat">Xchat Free</option>
<option value="Cod5">Custom Maps</option>
</select>
</form>
<p><form method="get" action="url">
<button type="submit">Download!</button>
</form> </p>
</p>
<p> </p>
<p><br>Contents:<br><textarea name='what' rows='15' cols='60'></textarea><br/></p>
</body>
</html>
Thanks for any ideas/Help.
Your problem is that you need to pass some kind of parameter to the ChooseDownload function, based on that you can make decisions.
try this:
function ChooseDownload(selected)
{
switch(selected.value){
case "Shell":
//some action
break;
case "Bot":
//some action
break;
case "Skype":
//some action
break;
case "Xchat":
//some action
break;
case "Cod5":
//some action
break;
default:
//unknown option
break;
}
}
and your HTML to this:
<select id="item" onchange="ChooseDownload(this)">
<option value="Blank">Select Download</option>
<option value="Shell">My PHP Shells</option>
<option value="Bot">Botnet Sources</option>
<option value="Skype">Skype 6.9 Win</option>
<option value="Xchat">Xchat Free</option>
<option value="Cod5">Custom Maps</option>
</select>
Related
I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.
I have posted a raw example of the form to see if anyone can lead me to water. Any help wouold be appreciated.
HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
</body>
</html>
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value, yet it's not difficult at all.
selectElement.options will give you an array of ALL the options inside the select element.
You will find the selected option's index to be selectElement.selectedIndex.
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex].
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text
Here's the code:
// THIS CONSTANT REPRESENTS THE <select> ELEMENT
const theSelect = document.getElementById('fruitSelector')
// THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT
// IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION
theSelect.addEventListener('input', function() {
// THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT
let selectedOptText = theSelect.options[theSelect.selectedIndex].text
// FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT:
document.querySelector('.hiddenField').value = selectedOptText;
})
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
well if you want to pass the text portion you should add the names as the values too like
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---
I have created with javascript and I get a result of a string.I get that result on my html code
<div id="results"></div>
Next,I want when I select for example Red to check if it is the the same thing (string), the select option - > Red with the string of this code
<div id="results"></div>
I was trying to do it but I failed.It is not working not even sure ,if I press the submit button I will send the string.
<div id="results"></div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="submit" value="results"/>
It appears that you want to check whether the selected option is equal to the text value of the div #results. You can achieve this effect like so:
$(document).ready(function(){
var select = $("select");
$("input[type=\"button\"]").click(function(){
var text = select.find(":selected").text();
if(text==$("#results").text()){
$("#results").html(text+" is equal!");
}else{
$("#results").html(text+" is not equal :(");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results">Red</div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="button" value="results"/>
</form>
A form is going to be Sending data somewhere, it would be best to remove the form, leaving the select and button elements. In the button add the code onclick='myFunction() ; when the button is clicked it will run the javascript function called myFunction(). Also you need to give the select a Id. I'm using selectInput
<script>myFunction() { document.getElementById('result').innerHTML = document.getElementById('selectInput').value;} </script>
Now when ever the button is pressed it will set the content of the div equal to the value entity in the selected select box option
You lack an action attribute.
<form method="post" action="path/to/file">
<select name="select">
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input type="submit" value="Get Results" />
</form>
Use a function, and a regular button. No form is needed.
<button onclick='func()'></button>
const func = () => {...}
I have a search and filter form (see top of page over the posts grid) here:
https://ba2018.wpengine.com/sf-test-side
The second field of the form named "Boligtype" is a dropdown allowing multiple choices.
I want to create a button elsewhere on the same page (outside of the search and filter form) - which on click activates the "Villa" option in the above-mentioned dropdown.
I am new to js so have tried some different options myself, but pretty sure they have been pretty long shots. All I know is I need an "onClick" event, from researching articles here and on Google. But I am still new to js, so don't know where to take it from here really:
<button onclick="myFunction()">Villas</button>
<script>
function myFunction() {
}
</script>
You can find the element and trigger the click event (or whatever event you are listening to).
function myFunction() {
const select = document.querySelector('#mySelect'); // Find element
select.click(); // Click element
// If you are not listening to click or need a different event
const event = new Event('customEvent');
select.dispatchEvent(event);
}
With your particular page it seems you are listening on the label
document.querySelector('.sf-field-post-meta-filter_boligtype > label').dispatchEvent(new Event('click'))
Here is a simple example that shows how you can make first option in the drop down selected with button click:
<!Doctype html>
<html>
<head>
<script>
function buttonClick(){
document.getElementById("first").selected = true;
}
</script>
</head>
<body>
<select id="stateSelect" name="stateSelect">
<option value="none" id="first">first option</option>
<option value="AL">second option</option>
<option value="AK">third option</option>
</select>
<button type="button" onclick="buttonClick();" id="button"> click me!</button>
</body>
</html>
we add an event listener to the button using onclick="" attribute so the function buttonClick(); will be called and activate the first select option therefor you can make this for whatever option you need.
If this solves your problem I will explain this.
function myfunction(value) {
console.log(value);
switch (value) {
case "hotel": alert("hotel");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
case "villa":
alert("villa");
// $('#mybutton').removeClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').removeAttr('hidden');
break;
case "test": alert("test");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
default: alert("nulll");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" onchange="myfunction(this.value)">
<option value="hotel">hotel</option>
<option value="villa">villa</option>
<option value="test">test</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<button id="mybutton" class="btn btn-primary" hidden>Click the Villa option</button>
This is my HTML:
<div id="hiddenDiv" style="display: none;">
<h1 id="welcomehowareyou">How are you today, ?</h1>
<select name="mood" id="mood">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
<!--<input type="submit" value="Done!"/>-->
</select>
<p></p>
</div>
How do I make a different alert (doesn't matter if PHP or JavaScript; which ever is easiest) appear when they select an option?
Also, when they click ok to the option, how do I make that re-direct them to a different link?
See the fiddle
You'll have to use the onchange listener for the <select>..So, the <select> should be as follows
<select name="mood" id="mood" onchange="myFunction()">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
<!--<input type="submit" value="Done!"/>-->
</select>
and the script that is used is as follows
function myFunction() {
var x = document.getElementById("mood").value;
alert(x);
}
This works with pure Javascript. No need for jQuery.
UPDATE
As #LyeFish mentioned in his comments you can code it like the one in this fiddle..
Here the <select> is as follows
<select name="mood" id="mood" onchange="myFunction(this.value)">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
</select>
and the javascript for this will be
function myFunction(val) {
alert(val);
}
UPDATE 2
function myFunction(val) {
alert(val);
window.location.href = "http://google.co.in/";
}
You can call your JavaScript function in onchange evenet , as follows
<div id="hiddenDiv" >
<h1 id="welcomehowareyou">How are you today, ?</h1>
<select name="mood" id="mood" onchange="alert(this.value);window.location = 'http://www.google.com';">
<option value="" disabled selected>How are you?</option>
<option value="m1">I'm doing great, thanks!</option>
<option value="m2">I'm fine, but could be better.</option>
<option value="m3">I feel absolutely terrible today.</option>
</select>
</div>
<!--
You can write JS function to do as per your requirement and call the function in onchange event.
Here it is alerting the selected value and redirecting to http://google.com.
You can redirect to different website also using conditional statement.
-->
You need to detect the change event of the select, and then view the elected option.
Like that:
$('#mood').on('change', function() {
//alert( this.value ); // or $(this).val()
switch(this.value){
case "m1":
alert("option 1");
break;
case "m2":
alert("option 2");
break;
case "m3":
alert("option 3");
break;
}
});
https://jsfiddle.net/2qpwhz6h/
Suposse user hits SPACE in a text -field. I want to check the value in the select -box. I use input.addEventListener('keydown', function(e)... to track the SPACE-hitting-point but how can I get the value of the select block <select id='topic'><option value="hello"></option> ...</section>?
How can you stdout the value of the selected index? Cannot understand why not below.
var el = document.getElementById("topic");
var topicValue = el.options[el.selectedIndex].value;
// PROBLEM: Won't do anything (despite inside <script> -tags)
window.alert(topicValue);
where the topic is the select <select id="topic"[^>]*>[^<]*</select>.
There any many events you can look at.
This has a list of them all
http://www.w3schools.com/tags/tag_select.asp
onkeydown and onmousedown will alert you prior to the onchange (user pressing enter) event
The events work in the select, not to options but just conditional to the script.
<html>
<body>
<script>
function alertMe(option){
if(option == "saab"){
window.alert("you clicked saab in selec!");
document.getElementById("txt").value='saab!';
}
}
</script>
<select onChange="alertMe(this.value);">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
<option>Audi</option>
</select>
<input type="text" id="txt" value="change me"></input>
</body>
</html>
[Answers to the updated]
You can access the select with document.getElementById('topic').options.selectedIndex or mySelect.options[selectedIndex].value (does not work with me). And apparently you could create a form to which you could refer by document.forms['topic'].elements[id] but not sure about this one. More.
#Kosh that is irritating! Just do a dictionary = {0:"topic", 1:"hello",...,n:"topic_{n}"} and then use the getElementById('topic').selectedId as a key and forget the values. Not solved but rounded.
[Update] I think I solved it, just el.value, no selectedIndex needed:
<html>
<body>
<script>
function printSelectValue()
{
var el = document.getElementById("selectOne");
alert(el.value);
}
</script>
<select id="selectOne" onChange="printSelectValue()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
</select>
</body>
</html>