I am trying to write a function that will:
Disable the submit button when no option in a dropbox is selected (ie empty string is selected). Enable all dropboxes.
On user selection of an option in a dropbox (that is not the empty
string), disable all other drop boxes and enable the submit button.
However, as a beginner at JavaScript I have no idea how I would begin this. How would I write such code?
So my simplified HTML would be as follows :
<form id="form" name="form" method="post" action="confirmation.cshtml">
<select name="start_to_end_time" class="start_to_end_time">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="start_to_end_time" class="start_to_end_time">
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="submit">Submit</button>
How can I write code that fulfills this function?
I think it's not a good idea to give two HTML element the same name attribute unless you use brackets [] within it. The last one may overwrite the value of the first one.
JavaScript using MooTools:
$$('.start_to_end_time').each(function(element) {
element.addEvent('click', function(ev) {
$$('.start_to_end_time').each(function(selectbox) {
if (element.getProperty('value') != '') {
$('button').setProperty('disabled', '');
$$('.start_to_end_time').each(function(b) {
if (b != element) {
b.setProperty('disabled', 'disabled');
} else {
b.setProperty('disabled', '');
}
}
} else {
$('button').setProperty('disabled', 'disabled');
$$('.start_to_end_time').each(function(b) {
b.setProperty('disabled', '');
}
}
});
});
});
I didn't test the code. You may define some methods to make it more readable.
start by loading the button as disabled:
<button id="myButton" type="submit" disabled='disabled'>Submit</button>
also, add a onchange listener to your options:
<select onchange="myJSFunction()" name="start_to_end_time" class="start_to_end_time">
<option value="3">3</option>
<option value="4">4</option>
then, write the javascript function:
function myJSFunction(){
var myButton = document.getElementById('myButton');
myButton.removeAttribute("disabled");
}
To check the selected value and disable accordingly (this must be executed in the function called by the onchange method):
var mySelect =document.getElementById('mySelect');
var mySelectedIndex = mySelect.selectedIndex;
if (mySelectedIndex==0){
mySelect.setAttribute("disabled","disabled);
}
Related
I am trying to populate a form option value if it's attribute quantity equals zero.
My goal is to add the a message to the current option value
My html is:
<select class="valid">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
So far I've tried the following in jQuery but it's not working:
if($(this).attr('quantity') == '0') {
$(this).append('<span>message</span>');
}
If you don't care about preserving the original message, than you can simply say $(this).text("message"). Leave out the <span> since it cannot be rendered inside of an <option> element anyway.
if($(this).attr('quantity') == '0') {
$(this).text('message');
}
If you want to preserve the original message, you have a couple options. One would simply be to append the new message to the original, however, it may get tricky to remove it later, so I would suggest having some sort of delimiter so you can easily identify the original vs the appended message, like so:
var $option = $(this);
if($option.attr('quantity') == '0') {
$option.text($option.text().trim() + ' (message)');
}
Then, to remove the message, you can do something like this:
$option.text($option.text().slice(0, $option.text().indexOf('(')).trim());
You can populate the option with like this,
$(document).ready(function () {
$('.valid').on('change', function () {
if ($(this.options[this.selectedIndex]).attr('quantity') == 0) {
$(this.options[this.selectedIndex]).find('span').remove();
$(this.options[this.selectedIndex]).append('<span>Message</span>')
}
});
});
JSFIDDLE
I'm not entirely sure of what you're trying to achieve from your question, but you cannot add html elements to an option element. You can however change the text as follows:
$(document).on('change', '.valid', function(){
var selected = $('.valid > option:selected');
if(selected.attr('quantity') == '0'){
selected.text('something else');
}
});
if you wanted to append an error you could do so by using jQuery append() or concatenating with the original value. Alternatively if you wanted it as validation outside of the select box, you could simply assign to the value of a div by replacing the line inside of the if statement.
<select class="valid" onchange="quality(this.options[this.selectedIndex].getAttribute('quantity'));">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
<span id="msg"></span>
<script type="text/javascript">
function quality(val) {
if(parseInt(val) == 0){
document.getElementById("msg").innerHTML = "Message";
}
}
I have an HTML drop down list which I need to be able to get the selected option and return it later on in my code:
<select name="quantitySelected" id="quantitySelected" onchange="javascript: getSelected()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I have managed to create a javascript that gets the selected option but I then can't work out how to pull that value back into my html:
<script>
function getSelected() {
var x = document.getElementById("quantitySelected").selectedIndex;
var y = document.getElementById("quantitySelected").options;
var selectedItem = y[x].text;
document.getElementById('SelectedItem').innerHTML = selectedItem;
}
</script>
I am then trying to return this value here so that it can be sent to my next page:
<td><button><a href="Update.php?Quantity=HERE">Update</button></td>
Thanks in advance for your help!
Also the select element may need to have an onchange event handler added to it so it can call the getSelected function when its value changes
I think what you need to do is to update the href attribute of the link from the onchange handler, first remove the query string you already have there then do something like.
link = document.getElementById("your link id");
link.href = link.href + "?Quantity=" +selectedItem;
That hopefully should work.
I want to disabled option on select without click any button. How can I do that?
I tried this. use id on option in JS
html code:
<select name="select01" id="select01" onchange="handleSelect()">
<option value="01" id="01">01</option>
<option value="02" id="02">02</option>
<option value="03" id="03">03</option>
</select>
JS code:
<script>
function handleSelect() {
if (this.value == '02') {
document.getElementById('02').disabled=true;
}
}
</script>
From what I know from the code JS, option with id 02 will be disabled but it it does not work. I have tried search inside stack over flow but do not find one.
In your eventhandler you need to pass in the element onchange="handleSelect(this)". Then use it:
function handleSelect(ele) {
if (ele.value == '02') {
document.getElementById('02').disabled=true;
}
}
Also note that id isn't supposed to be strictly numerical, while it's supported in HTML 5 it isn't below HTML 4.01 where it needs to start with a letter.
Also if you attach the event handler purely in JavaScript you can just do:
document.getElementById("select01").onchange = function() {
if (this.value == '02') {
document.getElementById('02').disabled=true;
}
}
This question already has answers here:
The onclick event does not work for options
(5 answers)
Closed 8 years ago.
I have a html dropdown defined as
<select name="evidence_selected"id="evidence_selected">
<option id="a">A</option>
<option id="b">B</option>
<option id="c">C</option>
<option id="new">New</option>
</select>
I want to fire an on click event on "new" so that when a user clicks on it, a free form appears where they enter some other value that is not on dropdown.
The id of the form is "new_value".
I tried
$("#new").click(function(){
$("new_value").show();
});
It seems the click event wont fire.
Any help(with code snippet) will be highly appreciated.
Regards
Selects use the change event
$('select').change(function () {
if ($(this).val() === 'New') {
// Handle new option
}
});
This will trigger any time any of the options are selected.
I advice doing something like this instead:
$('#evidence_selected').change(function(){
if($(this).val() == "New"){
$("#new_value").show();
} else {
$("#new_value").hide();
}
});
JSFiddle Demo
This way, the function will be triggered when the value of the select changes, but it'll only show #new_value if the option <option id="new">New</option> was selected...
Also if the ID of your form is new_value, you should reference it as $("#new_value").show(); instead of $("new_value").show(); (you're lacking the #)
Try this:
html
<select name="evidence_selected" id="evidence_selected">
<option id="a">A</option>
<option id="b">B</option>
<option id="c">C</option>
<option id="new">New</option>
</select>
js
$("#evidence_selected").change(function(){
if($(this).val()=="new"){
$("new_value").show();
}
});
fiddle
$("#evidence_selected").on('change', function() {
var optionId = $('option:selected', this).attr('id');
if(optionId === 'new') {
// your action here
}
});
I'm wondering if it is possible that when I click on an item in a multiple select box in HTML that it goes into another form box? Basically, when I click on something I want that text to go into a form. I've tried searching, but nothing seems to have an answer.
<form name="input" method="post" action="#">
Display Tag:<input type="text" name="taginput">
<input type="submit" value="Go">
<select name="tags" multiple>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
<option value="Android">Android</option>
<option value="jQuery">jQuery</option>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="HTML">HTML</option>
<option value="MySQL">MySQL</option>
</form>
To give an example, when I click on the Java option, I want Java to go into the input box called taginput. If I then click on the Python option, I want Java Python. Is this possible?
This will work, with plain javascript:
var sel = document.getElementsByName ('tags')[0];
sel.onclick = function () {
document.getElementsByName ('taginput')[0].value = this.value;
}
Demo here
A second version avoiding duplicates:
var sel = document.getElementsByName('tags')[0];
var choosen = [];
sel.onclick = function () {
var is_there = !!~choosen.indexOf(this.value);
if(is_there){return false;};
choosen.push(this.value);
document.getElementsByName('taginput')[0].value += this.value + ' ';
}
Demo here
You can do this, it finds the selected options, creates an array of text, then adds it to the text input.
$("select[name=tags]").change(function() {
var arrSelected = $(this).find("option:selected").map(function() {
return $(this).text();
}).get();
$("input[name=taginput]").val(arrSelected);
});
Demo: http://jsfiddle.net/SyAN6/
You can see this fiddle :
http://jsfiddle.net/ppSv4/
$('select option').on('click',function(){
$('#texthere').val( $(this).attr('value') );
});
You can do this using jquery, simply by checking for a change in the multi select box and then adding the newly changed data to the input field.
You can also the jsFiddle http://jsfiddle.net/eUDRV/85/
$("#values").change(function () {
var selectedItem = $("#values option:selected");
$("#txtRight").val( $("#txtRight").val() + selectedItem.text());
});