I have a code to select an option from a dropdown box which seems to work on one page of a website, but does not function on the other.
The code that works looks like this:
TAG POS=1 TYPE=SELECT FORM=NAME:quickOutputTemplate ATTR=NAME:saveToMenu CONTENT=$Save<SP>to<SP>Other<SP>File<SP>Formats
for this html:
<script type="text/template" id="quickOutputTemplate"> <input type="hidden" value="other" name="selectedQOFormat" /> <select class="saveToMenu" id="saveToMenu" name="saveToMenu" onchange="saveOutputForm('UA_output_input_form'); return false;"> <option value="enw">Save to EndNote online</option> <option value="endnote">Save to EndNote desktop</option> <option value="rid">Save to ResearcherID - I wrote these</option> <option selected="selected" value="other">Save to Other File Formats</option> </select> </script>
However when I try to use the same format:
TAG POS=1 TYPE=SELECT FORM=ID:cr_quickOutputTemplate ATTR=ID:cr_saveToMenu CONTENT=$Save<SP>to<SP>Text<SP>File
It does not work for this html:
<script type="text/template" id="cr_quickOutputTemplate"> <select class="saveToMenu" id="cr_saveToMenu"> <option selected="selected" value="other">Save to Text File</option> <option value="xls">Save to Excel File</option> </select> </script>
I have tried all the variations on this code that I can think of to make this work, but the macro just doesn't seem to be able to find the form. If any one has any ideas that might fix this, I would be very grateful to hear them.
Thanks
Try to use EVENT. Uncheck the ID recording option and record different types of drop downs. Then check which property in EVENT is changing and you can put there {{!LOOP}}.
Related
I already apply <Required> tag in HTML <Select> but not working. The form is still able to proceed to the next step even not select anything at first step. Anyone know to solve it?
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Have you declared your web page using HTML5? Make sure you declare the following statement at the beginning of the page
<!DOCTYPE html>
The required attribute is only available in HTML5 and only supported by specific browsers... w3schools Required Attribute
Having tested your original code in HTML5, it works.
You could get rid of the select option tag entirely, and place the value select option in the select tag itself.
<label>Region:</label>
<select value="Select Option" id="Region" class="custom-select form- control" required>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Your code works it depends on the browser you use or the way that you are using it. I wrote a sample code for you. Hope it may help you:
<!DOCTYPE html>
<html>
<body>
<form >
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<input type="submit">
</form>
</body>
</html>
So in the code above if you do not choose anything it will not let you submit.
I need to create a custom auto-complete list of suggestions for an input field. So far I have associated an event handler to the input event to the html input element, so that when that event triggers, I can fetch the suggestions.
The problem is how would I show these suggestions. By default, input elements can display suggestions, but is it possible to customize/access those suggestions?
If not, what would be the alternatives?
Preferably I would like not to use external libraries.
You may use 'datalist' tag but it doesn't work in IE <= 9
<!DOCTYPE html>
<html>
<body>
<form>
<input list="country" name="countru">
<datalist id="country">
<option value="U.S.">
<option value="France">
<option value="China">
<option value="Cambodia">
<option value="Chile">
<option value="Canada">
<option value="Poland">
</datalist>
<input type="submit">
</form>
</body>
</html>
Run the code and try typing 'C' and then 'a'.
I m working on a application for mail sending and need to use select tag of HTML with showing multiple options (But select only one at a time).
I tried multiple='multiple' but it is showing only one option and arrow disappears form select box.
<select multiple="multiple">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
You may need to include a "size" in addition to the "multiple" attribute, in order to show more than one option at a time. Try something like this:
<select multiple="multiple" size="10">
<option value="...">...</option>
...
</select>
As an alternative, since you want only one option selectable, you could consider using a list of radio buttons. For example,
<input type="radio" name="auto" value="Audi" />Audi<br />
<input type="radio" name="auto" value="Honda" />Honda<br />
...
I am creating a page in JSP where I have a dropdown list and once the user selects a value he has to click on the go button and then the value is sent to the Servlet.
</select>
<input type="submit" name="GO" value="Go"/>
How do I make it so that it does it on change? E.g. when the user selects John all his details are retrived from the DB and displayed. I want the system to do it without having to click the go button.
Just ask assistance of JavaScript.
<select onchange="this.form.submit()">
...
</select>
See also:
HTML dog - JavaScript tutorial
Simple JavaScript will do -
<form action="myservlet.do" method="POST">
<select name="myselect" id="myselect" onchange="this.form.submit()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>
Here is a link for a good javascript tutorial.
other than using this.form.submit() you also can submiting by id or name.
example i have form like this : <form action="" name="PostName" id="PostID">
By Name : <select onchange="PostName.submit()">
By Id : <select onchange="PostID.submit()">
To those in the answer above. It's definitely JavaScript. It's just inline.
BTW the jQuery equivalent if you want to apply to all selects:
$('form select').on('change', function(){
$(this).closest('form').submit();
});
How implement subj?
when i write:
<form>
<select>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is "aaaa"
when i write:
<form>
<select>
<option value=""></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is blank, but this blank item presents in drop down.
how i can implement SELECT tag with default blank value that hidden in dropdown list?
Just use disabled and/or hidden attributes:
<option selected disabled hidden style='display: none' value=''></option>
selected makes this option the default one.
disabled makes this option unclickable.
style='display: none' makes this option not displayed in older browsers. See: Can I Use documentation for hidden attribute.
hidden makes this option to don't be displayed in the drop-down list.
You can by setting selectedIndex to -1 using .prop: http://jsfiddle.net/R9auG/.
For older jQuery versions use .attr instead of .prop: http://jsfiddle.net/R9auG/71/.
Simply using
<option value="" selected disabled>Please select an option...</option>
will work anywhere without script and allow you to instruct the user at the same time.
<select>
<option value="" style="display:none;"></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
Here is a simple way to do it using plain JavaScript. This is the vanilla equivalent of the jQuery script posted by pimvdb. You can test it here.
<script type='text/javascript'>
window.onload = function(){
document.getElementById('id_here').selectedIndex = -1;
}
</script>
.
<select id="id_here">
<option>aaaa</option>
<option>bbbb</option>
</select>
Make sure the "id_here" matches in the form and in the JavaScript.
You can't. They simply do not work that way. A drop down menu must have one of its options selected at all times.
You could (although I don't recommend it) watch for a change event and then use JS to delete the first option if it is blank.
For purely html #isherwood has a great solution. For jQuery, give your select drop down an ID then select it with jQuery:
<form>
<select id="myDropDown">
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
Then use this jQuery to clear the drop down on page load:
$(document).ready(function() {
$('#myDropDown').val('');
});
Or put it inside a function by itself:
$('#myDropDown').val('');
accomplishes what you're looking for and it is easy to put this in functions that may get called on your page if you need to blank out the drop down without reloading the page.
You can try this snippet
$("#your-id")[0].selectedIndex = -1
It worked for me.