Just wondering can anyone give me an example on how to disable a dropdown box, when an option in one isnt selected?
e.g
<td class="Item">State(Aus only):</td>
<td class="Data">
<select class="TextBox" name="State" id="selectState">
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
</select>
</td>
<td class="Item">Country:</td>
<td class="Data">
<select class="TextBox" name="Country" id="selectCountry">
<option value="Australia" id="Australia" name="Australia">Australia</option>
<option value="Braz">Brazil</option>
<option value="China">China</option>
</select>
</td>
<script>
function selected()
if(document.selectCountry.checked)
{
document.getElementById("selectCountry.Australia").disabled = false;
}
else
{
document.getElementById("selectCountry.Australia").disabled = true;
}
</script>
I want the State dropdown disabled with JAVASCRIPT unless Country is selected to be Australia.. can I get some help please?
I'm still kinda new to this whole Javascript coding so sorry if my code is bad but i hope you get my question
You need to fix you js code like this
function selected(){
if(document.getElementById("selectCountry").value == "Australia") {
document.getElementById("selectState").removeAttribute("disabled");
}
else {
document.getElementById("selectState").setAttribute("disabled","disabled");
}
}
Here is the fiddle for above code
Updated fiddle to call the function on page load if country is not by default "Australia"
Related
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/
I want help, i am very new to html..
On selecting option from dropdown menu, I want html to put the values in word..
e.g. When I select "1" from drop down, it must show "one"
When I select "2' from drop down, it must show "two"
How to do that??
<HTML>
<Table border=10>
<TR>
<TD>Select Number</TD>
<TD><Select>
<option>1</option>
<option>2</option>
<option>3</option>
</Select></TD>
</TR>
<tr>
<td>In Words</td>
<td><input type="text" readonly></td>
</tr>
</Table>
</HTML>
Please make a script and show me...
A non-jQuery solution:
Firstly, give your select- and input-tags id's, and your options values (value=""). Then add a onchange=""-listener in the select-tag and make a function that carries out what you want to do (i.e. checking the selected value and displaying it in your input field), like so:
function showValue() {
var x = document.getElementById("mySelect").value;
document.getElementById("mySelection").value = "You selected: " + x;
}
<Table border=10>
<tr>
<td>Select Number</td>
<td><Select onchange="showValue()" id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</Select></td>
</tr>
<tr>
<td>In Words</td>
<td><input type="text" id="mySelection"></td>
</tr>
</Table>
If I understand what you want, you'll need some javascript to find what you selected, and take that 'string' and shove it in an element for the user to see.
Here is a working example. Try making one these next time you ask a question. Welcome to Stack Overflow.
http://jsfiddle.net/sheriffderek/6vp5Lskn/
HTML
<select name='my_select' id='my_select'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
</select>
<div id="outcome">
You have selected: <span></span>
</div>
javascript (jQuery)
var selectedOption; // define this variable
// when the select is changed...
$('#my_select').on('change', function() {
// get the option that was selected
selectedOption = $( "#my_select option:selected" ).text();
// put the option in the place you want it
$('#outcome span').html(selectedOption);
});
I have an drop down that is a simple yes/no.
When the user selects "Yes" the page brings a new drop down (New Product) for them to select, when the user selects "No" it should display different drop down (Non Sale Reason)
On my webpage, when the user selects "Yes" it works, but nothing happens when they select "No"
The on change script is:
<td colspan="2" style="text-align: left;"><select name="Retained" id="Retained" onchange="display(this,'Yes','No');" >
I have added a code to a jsfiddle
http://jsfiddle.net/s0s7dry7/7/
It does not display correctly on here for some reason (nothing hidden but drop downs are hidden on my page)
Can anyone help me please?
Thanks
You are currently passing in three arguments to your display function: this, 'Yes' and 'No'. The third is not given a name in the function definition, and is effectively ignored; basically, every time you call this function, the id1 parameter is passed in as 'Yes'.
I'm not sure exactly what you're trying to achieve, but this is probably not doing what you want. The txt variable within the function will always be set to whatever the current (i.e. new) value is, but it will always be compared against id1; and equally you will only ever modify the document element with ID 'Yes'.
To fix this you could change the second argument in the onchange call to be the newly selected value. But even this is superfluous, since as noted above you can determine this just from the element reference. Instead I would remove both the 'Yes' and the 'No' parameters, and reduce your display() function to just working out what txt is. Now you know what that is, you can tell whether the user selected yes or no, and with a simple if-else you can do whatever you need to do in these separate cases.
var el = document.getElementById("Retained");
el.onchange = function(evt){
var no = document.getElementById("No");
var yes = document.getElementById("Yes");
if(evt.target.options[evt.target.selectedIndex].value === 'No'){console.log("NO")}
if(evt.target.options[evt.target.selectedIndex].value === 'Yes'){console.log("YES")}
}
you can modifiy console.log("No") to no.style.display='block'
you can modifiy console.log("Yes") to yes.style.display='block'
if(evt.target.options[evt.target.selectedIndex].value === 'No'){no.style.display='block'}
if(evt.target.options[evt.target.selectedIndex].value === 'Yes'){yes.style.display='block'}
This is the simplified version of your need:
function display(val) {
var elems = document.getElementsByClassName('options');
for(var i = 0; i < elems.length; i++) {
elems[i].style.display = "none";
}
document.getElementById(val).style.display = "block";
}
<table>
<tr>
<td style="text-align: left;">Sale:</td>
<td style="text-align: left;">
<select name="Retained" id="Retained" onchange="display(document.getElementById('Retained').value);">
<option value=""></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
</tr>
<tr id="Yes" style="display: none" class="options">
<td class="title">New Product:</td>
<td class="field">
<select name="RetainedProduct" id="RetainedProduct">
<option value=""></option>
<option value="£10">£10</option>
<option value="£6.50">£6.50</option>
</select>
</td>
</tr>
<tr id="No" style="display: none" class="options">
<td class="title">Non Sale Reason:</td>
<td colspan="2" class="field">
<select name="RetainedProduct" id="RetainedProduct">
<option value=""></option>
<option value="Not interested">Not interested</option>
<option value="Too expensive">Too expensive</option>
</select>
</td>
</tr>
</table>
I would like to do to auto select in check box when the selection box is selected in the same row.
Although I found this question in stackoverflow, unfortunately it didn't match my requirement. So, please give me some suggestions.
There are many rows in a table. In each row, there has one check box and one selection box in each column.If I selected something in selection box in a row, I want to do auto check in check box in the same row.
I wrote the code as the following.
<script>
$(document).ready(function() {
$('.sel_ActList_status').change(function() {
$('.sel_ActList_status').parent('td').silbings('td').find(".chk_ActList_select").checked = true;
//$('.sel_ActList_status').parent('td').silbings('td').find(".chk_ActList_select").prop("checked", true);
});
});
</script>
<table>
<tr>
<td>
<input id="chk_ActList_select[0]" class="chk_ActList_select" type="checkbox" value="true" name="chk_ActList_select[0]">
</td>
<td>xxxxx</td>
<td>
<select id="sel_ActList_status" class="sel_ActList_status" name="sel_ActList_status">
<option selected="selected" value="2">11111</option>
<option value="0">22222</option>
<option value="1">33333</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="chk_ActList_select[1]" class="chk_ActList_select" type="checkbox" value="true" name="chk_ActList_select[1]">
</td>
<td>xxxxx</td>
<td>
<select id="sel_ActList_status" class="sel_ActList_status" name="sel_ActList_status">
<option value="2">11111</option>
<option selected="selected" value="0">22222</option>
<option value="1">33333</option>
</select>
</td>
</tr>
</table>
But my code is not working to auto check in checkbox when I selected something in selectbox. Is there anything wrong in my jquery code? Pls give me some guideline.
Thanks in advance.
Try This, this is helpfull for you
$('.sel_ActList_status').change(function(){
$(this).closest('tr').find('input:checkbox').prop('checked',true);
});
try this
$('.sel_ActList_status').change(function() {
$(this).parent('td').siblings().find(".chk_ActList_select").attr("checked", "true");
});
try this
$('.sel_ActList_status').change(function(){
$(this).parent().parent().find('input[type=checkbox]').attr('checked','checked');
});
At its simplest, I'd suggest:
$('select').change(function(){
$(this).closest('tr').find('input').prop('checked',true);
});
JS Fiddle demo.
Though if you enable checking by selecting, or changing the select-box, you should probably enable un-checking by the same route (just to retain a consistent UI), so I'd amend the select elements, adding a 'none' option (<option selected="selected" value="-1">None</option>), and, if that's selected, un-check the box:
$('select').change(function(){
var self = this;
$(this).closest('tr').find('input').prop('checked', self.value !== '-1');
});
JS Fiddle demo.
I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select> with its selected id and contents at the other place on onChange().
How can I pass the complete combobox with its select id, and how can I pass other parameters on fire of the onChange event?
function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
The above example gets you the selected value of combo box on OnChange event.
Another approach wich can be handy in some situations, is passing the value of the selected <option /> directly to the function like this:
function myFunction(chosen) {
console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
For how to do it in jQuery:
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>
You should also know that Javascript and jQuery are not identical. jQuery is valid JavaScript code, but not all JavaScript is jQuery. You should look up the differences and make sure you are using the appropriate one.
JavaScript Solution
<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
document.getElementById("comboA").onchange = function(){
var value = document.getElementById("comboA").value;
};
</script>
or
<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>
or
<script>
document.getElementById("comboA").onchange = handleChange;
function handleChange(evt){
var value = evt.target.value;
};
</script>
I found #Piyush's answer helpful, and just to add to it, if you programatically create a select, then there is an important way to get this behavior that may not be obvious. Let's say you have a function and you create a new select:
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';
The normal behavior may be to say
newSelect.onchange = changeitem;
But this does not really allow you to specify that argument passed in, so instead you may do this:
newSelect.setAttribute('onchange', 'changeitem(this)');
And you are able to set the parameter. If you do it the first way, then the argument you'll get to your onchange function will be browser dependent. The second way seems to work cross-browser just fine.
jQuery solution
How do I get the text value of a selected option
Select elements typically have two values that you want to access.
First there's the value to be sent to the server, which is easy:
$( "#myselect" ).val();
// => 1
The second is the text value of the select.
For example, using the following select box:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:
$( "#myselect option:selected" ).text();
// => "Mr"
See also
.val() jQuery API Documentation
This is helped for me.
For select:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
For radio/checkbox:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
You can try bellow code
<select onchange="myfunction($(this).val())" id="myId">
</select>
Html template:
<select class="staff-select">
<option value="">All</option>
<option value="196">Ivan</option>
<option value="195">Jon</option>
</select>
Js code:
const $staffSelect = document.querySelector('.staff-select')
$staffSelect.onchange = function () {
console.log(this.value)
}
Just in case someone is looking for a React solution without having to download addition dependancies you could write:
<select onChange={this.changed(this)}>
<option value="Apple">Apple</option>
<option value="Android">Android</option>
</select>
changed(){
return e => {
console.log(e.target.value)
}
}
Make sure to bind the changed() function in the constructor like:
this.changed = this.changed.bind(this);
this code once i write for just explain onChange event of select you can save this code as html and see output it works.and easy to understand for you.
<html>
<head>
<title>Register</title>
</head>
<body>
<script>
function show(){
var option = document.getElementById("category").value;
if(option == "Student")
{
document.getElementById("enroll1").style.display="block";
}
if(option == "Parents")
{
document.getElementById("enroll1").style.display="none";
}
if(option == "Guardians")
{
document.getElementById("enroll1").style.display="none";
}
}
</script>
<form action="#" method="post">
<table>
<tr>
<td><label>Name </label></td>
<td><input type="text" id="name" size=20 maxlength=20 value=""></td>
</tr>
<tr style="display:block;" id="enroll1">
<td><label>Enrollment No. </label></td>
<td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
</tr>
<tr>
<td><label>Email </label></td>
<td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
</tr>
<tr>
<td><label>Mobile No. </label></td>
<td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="2" cols="20"></textarea></td>
</tr>
<tr >
<td><label>Category</label></td>
<td><select id="category" onchange="show()"> <!--onchange show methos is call-->
<option value="Student">Student</option>
<option value="Parents">Parents</option>
<option value="Guardians">Guardians</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" value="Sign Up">
</form>
</body>
</html>
function setMyValue(v) {
console.log(v);
}
<select onchange="setMyValue(this.value)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
This worked for me onchange = setLocation($(this).val())
Here.
#Html.DropDownList("Demo",
new SelectList(ViewBag.locs, "Value", "Text"),
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Simply:
function retrieve(){
alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}
function retrieve_other() {
alert(myForm.SMS_recipient.options[document.getElementById('SMS_recipient').selectedIndex].text);
}
function retrieve() { alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}
<HTML>
<BODY>
<p>RETRIEVING TEXT IN OPTION OF SELECT </p>
<form name="myForm" action="">
<P>Select:
<select id="SMS_recipient">
<options value='+15121234567'>Andrew</option>
<options value='+15121234568'>Klaus</option>
</select>
</p>
<p>
<!-- Note: Despite the script engine complaining about it the code works!-->
<input type="button" onclick="retrieve()" value="Try it" />
<input type="button" onclick="retrieve_other()" value="Try Form" />
</p>
</form>
</HTML>
</BODY>
Output:
Klaus or Andrew depending on what the selectedIndex is. If you are after the value just replace .text with value. However if it is just the value you are after (not the text in the option) then use document.getElementById('SMS_recipient').value
//html code
<select onchange="get(this)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
//javscript code
function get(select) {
let value = select.value;
console.log(value);
}