I am trying to pass the value of option box in url on onchange event.I have to pass the value of selected option box to some.php file.Here i am tried out but it's not working for me.
Bellow is my sample code
<select id="font" onchange="document.getElementById('font').src='some.php?fontname='+this.value">
<option value="arial" >arial</option>
<option value="stencil" >stencil</option>
</select>
You need to use javascript location.href for redirecting.
<select id="font" onchange="window.location.href='some.php?fontname='+this.value">
<option value="arial" >arial</option>
<option value="stencil" >stencil</option>
</select>
Related
I have a dropdown box in ejs where I want to set up a value for the drop down:
<select class="form-control" value='${stage[i]} name="stage[]">
<option>Red</option>
<option>Yellow</option>
<option>Green</option>
</select>
I want the value of the stage to be dynamically selected. As you can see I have set the value prperty
If I inspect my HTML, it shows that the value was supposed to be Green
<select class="form-control" value="Green">
<option>Red</option>
<option>Yellow</option>
<option>Green</option>
</select>
However, Red which is the first option is selected. How do I populate the value of the dropdown using ejs?
You need to use selected
<select class="form-control">
<option>Red</option>
<option>Yellow</option>
<option selected>Green</option>
</select>
For ejs you will have to use a condition statement to add selected to the correct option. Refer to HTML select option with EJS for more help.
Actually I want to redirect user to another page ("abc.html") on clicking on INR option of the select list and on clicking on other option it should not redirect to any page.
PS : I can't remove or change value attribute of other option.Any help will be really appreciated.
<select>
<option value="USA">USA</option>
<option value="AUD">AUD</option>
<option value="INR">INR</option>
</select>
Simply use change event in jquery and check the value selected and do whatever you want like this
$('select').change(function(){
if($(this).val() == 'INR'){
console.log("abc.html");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="USA">USA</option>
<option value="AUD">AUD</option>
<option value="INR">INR</option>
</select>
On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!
<option selected="selected">Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
Just change
<select required>
<option value="" selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Users can never submit the default option.
You could have the Select one option be both selected and disabled, like this.
function validate(self) {
console.log(self.value);
}
<select onchange="validate(this)" required>
<option disabled selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
The onchange event will trigger whenever a new value is chosen in the dropdown.
The selected tag makes sure its the default option.
The disabled tag makes sure it can't be chosen as an actual option.
The required tag prevents the form from submitting if the dropdown value is still its default.
The "select one" text should really not be an option, but instead a label
<label>Select One:</label>
<select>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Now my case might be a bit weird. I have a select_tag, user has to select one value from the list I gave. I know how to retrieve the value they selected once they click on the submit. But now I would also like to display some info for the selected value BEFORE they click on submit, just when they select any value in the drop down list.
So is there any way to get the value after user selects but before user submits ?
E.g:
select_tag("a", options_for_select(my_option_list))
the param[:a] will have the value just after user submits this. How can I get the value before they submit?
It depends what you want to do but you could use javascript.
Check out the fiddle
<select id="my_select">
<option value="value 1">Option 1</option>
<option value="value 2">Option 2</option>
<option value="value 3">Option 3</option>
<option value="value 4">Option 4</option>
</select>
$(function(){
$('#my_select').on('change', function(){
alert('do soemthing ' + $(this).val());
});
});
You will need to use javascript/coffeescript for this. A sample of this might be something like this:
$(document).ready ->
$("#id_of_select_that_the_select_tag_generates").change ->
# do something
Put the above in app/assets/javascripts/some_file_name.js.coffee
<select id="my-select">
<option value="1">This is one</option>
<option value="2" selected>This is two</option>
...
</select>
Is there a way to get the text value of the selected option?
$('#my-select').val();
gives me 2, i want to get This is Two instead.
How?
What you want is
Get the selector for finding the selected option in the select box
Use .text() on the selector.
$('#my-select option:selected').text();
See a working demo