This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
I'm trying to make a program in which I show the value selected in the menu. I don't understand why the <select> tag doesn't work.
Html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<form>
<Label for="country">Country</Label>
<select name="country" id= "country">
<option name="country" id="country">Country</option>
<option name="USA" id="country">USA</option>
<option>India</option>
<option>China</option>
<option>France</option>
<option>England</option>
<option>Ecuador</option>
</select>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</form>
<p id="demo"></p>
</body>
</html>
Script
var country=$('#country :selected');
document.getElementById("demo").innerHTML = country;
Always use an ID attribute uniquely, you are using it 3 times, consider using classes for that.
This is how you want it:
//Wait until the page is ready for manipulation
$(function(){
//Whenever the value of #country changes, do:
$("#country").on('change', function() {
//Get the new value
var country = $(this).val();
//Put the new value into the #demo element
$("#demo").html(country);
});
});
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<form>
<Label for="country">Country</Label>
<select name="country" id="country">
<option value="" disabled selected>Select your country</option>
<option value="USA">USA</option>
<option value="india">India</option>
<option value="china">China</option>
<option value="france">France</option>
<option value="england">England</option>
<option value="ecuador">Ecuador</option>
</select>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</form>
<p id="demo"></p>
</body>
</html>
Your script must be placed at the end of document or in $(document).ready(..) like below.
Please make sure to subscribe to .change() event, that every time the selected value is changed to place it where you want.
$(document).ready(function() {
$('#country').change(function() { // every times is changed
$('#demo').html($(this).val()); // add value in tag with id #demo
});
});
$(document).ready(function() {
$('#country').change(function() { // every times is changed
$('#demo').html($(this).val()); // add value in tag with id #demo
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<form>
<Label for="country">Country</Label>
<select name="country" id="country">
<option>Country</option>
<option>USA</option>
<option>India</option>
<option>China</option>
<option>France</option>
<option>England</option>
<option>Ecuador</option>
</select>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</form>
<p id="demo"></p>
Related
How Can I Make an Ajax Combo box, Forexamle Female and Male, and i want To show a Button for Female and a Button for Male,
This is My Code
<!DOCTYPE html>
<html>
<head>
<style>
#for-male, #for-female{
display:none;
}
</style>
</head>
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
</html>
You don't need an ajax call. If all you want to do is determine the button that will show based on the option selected.
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
The javascript will look like this
$(document).ready(function() {
$('#users').on('change', function() {
$('#for-male, #for-female').hide()
var value = $(this).val()
if(value == "1") {
$('#for-male').show();
} else {
$('#for-female').show();
}
});
});
and the css will be
#for-male, #for-female{
display:none;
}
Essentially what this does is to show a button whenever an option is selected
You can check https://jsfiddle.net/tmwjge9s/1/
What is the problem with below code, why it doesn't work for me..!!! I am unable to fetch selected data and display it on text box.
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#name").on("change", function() {
$("#Fname").val($(this).find("option:selected").attr("value"));
})
});
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<select id="Fname" name ="name">
<option value="">Choose Your Value</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="UAE">UAE</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
</select>
<input type="text" id="Fname" value ="" readonly="readonly">
</div>
</body>
</html>
the select and the input, have the sane id "Fname".
You have given the ID for input box and select box same.
Both have id = "Fname"
Moreover when you find using $("#") it should be an id of the DOM in your case its a name.
However i have corrected your code here.
<html>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Fname").on("change", function() {
$("input").val($(this).val());
}) });
</script>
</head>
<body>
<div>
<select id="Fname" name ="name">
<option value="">Choose Your Value</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="UAE">UAE</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
</select>
<input type="text" id="Fname" value ="" readonly="readonly">
</div>
</body>
</html>
Change id of Either select or input and apply it in JQUery will solve your issue.
$(document).ready(function() {
$("#Fname").on("change", function() {
$("#SFname").val($(this).find("option:selected").attr("value"));
})
});
Updated Fiddle
Edit:
You can add multiple value to text box like:
$("#SFname").val($("#SFname").val() + " " + $(this).find("option:selected").attr("value"));
})
Fiddle Link
Please Use This Code Inter Net is mandatory or copy jquery.min.js. the problem is u mentioned same name for select tag id and input text id as same.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#name").on("change", function() { $("#Fname").val($(this).find("option:selected").attr("value")); }) });
</script>
</head>
<body>
<div>
<select id="name" name ="name">
<option value="">Choose Your Value</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="UAE">UAE</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
</select>
<input type="text" id="Fname" value ="" readonly="readonly">
</div>
</body>
</html>
This is the javascript snippet which assigns the selected option value to a text box
function check() {
document.getElementById("inp").value=document.getElementById("id").value ;
}
this is the actual html code
<form>
<select id="id" onSelect="check( );">
<option></option>
<option value=85.5>opt1</option>
<option value=95.5>opt2</option>
<option value=95.5>opt3</option>
<option value=95.5>opt4</option>
</select>
<input type=text name="input" id="inp">
</form>
I Hope am done right ,but still am not able to get my solution
Here's your fix.
This one works
I guess the summary of it is that you should change onSelect to onChange.
<script>
function check() {
document.getElementById("inp").value=document.getElementById("id").value;
}
</script>
</head>
<body>
<form>
<select id="id" onChange="check();">
<option></option>
<option value=85.5>opt1</option>
<option value=95.5>opt2</option>
<option value=95.5>opt3</option>
<option value=95.5>opt4</option>
</select>
<input type=text name="input" id="inp" value="">
</form>
</body>
Assuming this html
<select id="id">
<option value="">Please select</option>
<option value="85.5">opt1</option>
<option value="95.5">opt2</option>
<option value="95.5">opt3</option>
<option value="95.5">opt4</option>
</select>
You can use unobtrusive JavaScript and add this to the head
Plain JS:
window.onload=function() {
document.getElementById("id").onchange=function() {
this.form.input.value=this.value;
}
}
Same in jQuery would be
$(function() {
$("#id").on("change",function() {
$("#inp").val($(this).val());
});
});
If you MUST do it inline, then
<select id="id" onchange="this.form.input.value=this.value;">
You HTML has multiple issues as well as your javascript
Your formatted HTML
<form>
<select id="id" onChange="check();">
<option></option>
<option value="85.5">opt1</option>
<option value="95.5">opt2</option>
<option value="95.5">opt3</option>
<option value="95.5">opt4</option>
</select>
<input type="text" name="input" id="inp" />
</form>
JS
function check() {
document.getElementById("inp").value = document.getElementById("id").value;
}
Working DEMO
Also you should enclose you values like value="". Besides this no major issues
I'm updating the selected option programmatically using jQuery, but nothing changes in the browser. (That is, the old selected option remains selected instead of switching to the newly selected option.) Suggestions?
Thanks. --Jeff
I have a simple form like this:
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p> Task A: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form></div>
and my jQuery code looks like this:
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var form = $(this).parents('form');
var assigned = form.find(':selected').first().val();
form.find(':selected').each(function(index){
$(this).val( assigned ).change();
});
}
);
});
</script>
I'm updating the selected option programmatically using jQuery
Not as far as I can see. You're re-setting the value of the selected option, but not doing anything as far as I can tell to the actual select box.
To change a select box, you need to identify it, then call val on it, not one of its option elements.
I can't make out what you want your input[name="button1"] to do, but here's an example of updating a select box: Live copy | source
HTML:
<select id="theSelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" id="theButton" value="Click me">
JavaScript:
jQuery(function($) {
$("#theButton").click(function() {
$("#theSelect").val("2");
});
});
Separately, as j08691 pointed out in the comments, you can't assign the same id value ("assigner") to more than one element. id values must be unique in the document. Your code doesn't show you using that id, so this may well be unrelated, but it's worth flagging up.
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p>
Task A: <select name="assignment[]" id="assigner2">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner3">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var assigned = $("#assigner").val();
$('#form1 select').val( assigned );
}
);
});
</script>
i am trying to find a way to allow a user to click items in a combo box and have its value populate an input field and also alert "work stop" or "work start" message when appropriate option is selected. But my code is not working. Please Help!
Here is my code:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
test = frm.stop.value;
alert('work' test);
frm.eStop.value = test;
}
</script>
</body>
</html>
Thanks in Advance
http://jsfiddle.net/snHQY/
<form>
<select name="sel1" id="select" onchange="populateField();" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField() {
test = document.getElementById('select').value;
alert(test);
document.getElementById('eStop').value = test;
}
</script>
You can do it using the selectedIndex if you want as well,
<form>
<select name="sel1" id="select" onchange="populateField(this);" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField(sel) {
sel.form.eStop.value = 'work ' + (sel.selectedIndex == 1 ? 'Stop' : 'Start');
}
</script>
http://jsfiddle.net/cnpuM/
Your code has two errors. You can not reference an element by its value like this test = frm.stop.value; instead use test = frm.sel1.value; . Another error is in this line alert('work' test);. Here you are joining a string "work" with a variable "test". In java script where ever you join two or more variables or strings and variables you alway have to join them with + sign like this:alert('work ' + test);. Remaining code is ok:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
var test = frm.sel1.value;
alert('work '+ test);
frm.eStop.value = test;
}
</script>
</body>
</html>
You can also use selectedIndex property of "sel1" to do the same.
in your select you can add to onchange's and onkeypress to the populateField's function this as the objects reference.
<select name="sel1" onchange="populateField(this)" onkeypress="populateField(this)">
Now you can reference the select from o. to pass the selected value to the alert dialog and the input field.
function populateField(o){
alert("work " + o.value);
// use regular W3C DOM syntax for element referencing the input and populate it with the select objects selected options value
document.getElementById("eStop").value = o.value;
}