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>
Related
On click the input field, I do not want to display or show all the options or list. I just want to display while inputting some text only.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<label for="browser">Choose your country:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Australia">
<option value="USA">
<option value="Inda">
<option value="Bhutan">
<option value="Thailand">
<option value="Canada">
<option value="Japan">
<option value="China">
<option value="France">
</datalist>
</body>
</html>
You can add an input event listener that adds the list attribute when the user types in the field. The id of the datalist can be stored in a data attribute.
$('input').on('input', function(){
const input = $(this)
if(input.val().length > 0){
input.attr('list', input.data('list'));
} else {
input.removeAttr('list');
}
})
<!DOCTYPE html>
<html>
<body>
<label for="browser">Choose your country:</label>
<input data-list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Australia">
<option value="USA">
<option value="Inda">
<option value="Bhutan">
<option value="Thailand">
<option value="Canada">
<option value="Japan">
<option value="China">
<option value="France">
</datalist>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>
php file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
</script>
</head>
<body >
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
</body>
</html>
i want to change placeholder of a input textfield on selection of option.but to do that first of all jquery should be called but above code is not working please suggest me something.
i want to change placeholder of a input textfield on selection of option.but to do that first of all jquery should be called but above code is not working please suggest me something.
Use jQuery plugin
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Answer is
$(document).ready(function() {
$(".mark").on("change",function(){
var selected_value = $(this).val(); //get option tag value
var selected_text = $(this).find(":selected").text(); // get option tag text
alert(selected_value+" == "+selected_text); //print the result
});
});
might be you forgot add jQuery library, you can check following snippet for this
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Its working fine, check here. I think you forget to add the jquery library in your code.
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Check This Perfectly Working!
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Please try this:
$(document).on("change",".mark",function(){
var data= $(this).val();
alert(data);
});
You should ideally do this:
HTML code :
$(document).ready(function() {
$('#mark1').change(function() {
alert($(this).val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<select class='mark' required id='mark1'>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
</body>
</html>
I'm trying to set an input value from a dropdown list but it doesn't seem to work for me. this is my code:
<form>
<select name="color" id="color">
<option selected value="0">white</option>
<option value="1">orange</option>
<option value="1">black</option>
<option value="2">yellow</option>
<option value="2">green</option>
<option value="4">gray</option>
<option value="4">red</option>
<option value="8">pink</option>
<option value="8">blue</option>
</select>
<input type="text" id="output">
</form>
$('#color').bind('change', function() {
$('#output').html($(this).find(':selected').html() + '<br>');
console.log($(this).find(':selected').html());
});
It works when I replace <input type="text" id="output"> with <div id="output"></div>. Any solutions?
The #output element is an input, so you need to use val(), not html(), to set its value.
Also note that bind() is deprecated. You should use change() or on('change') instead. Try this:
$('#color').on('change', function() {
$('#output').val($(this).find(':selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="color" id="color">
<option selected value="0">white</option>
<option value="1">orange</option>
<option value="1">black</option>
<option value="2">yellow</option>
<option value="2">green</option>
<option value="4">gray</option>
<option value="4">red</option>
<option value="8">pink</option>
<option value="8">blue</option>
</select>
<input type="text" id="output">
</form>
Try this example,
$('#color').bind('change', function() {
$('#output').val($('#color option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="color" id="color">
<option selected value="0">white</option>
<option value="1">orange</option>
<option value="1">black</option>
<option value="2">yellow</option>
<option value="2">green</option>
<option value="4">gray</option>
<option value="4">red</option>
<option value="8">pink</option>
<option value="8">blue</option>
</select>
<input type="text" id="output">
</form>
I have made changes in your selection of option text.
I hope this will help.
Try this:
$(document).ready(function() {
$('#color').on('change', function() {
//alert( this.value );
$('#output').val(this.value);
});
});
<script type="text/javascript">
$('#color').bind('change', function(){
$('#output').val($(this).find(':selected').html() + '<br>');
console.log($(this).find(':selected').html());
});
Input tags always has value so you have to change code to below.
<script type="text/javascript">
$(document).on('change','#color', function(){
$('#output').val($(this).find(':selected').html() + '<br>');
});
</script>
with input element it should be val() not html()
$(document).on('change','#color', function() {
$('#output').val($(this).find(':selected').html());
});
How can I amend the code so that when I select a option from the first drop down menu the second drop down menu becomes editable otherwise the second drop-down menu should be read only, and if the option in the first drop down menu is "default" then the second drop down menu should be read only.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onload="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>
Look at the capitals:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">
The first is with "M" and the seccond with "m"
You have misspelled MySelection with mySelection
In the JS you have document.getElementById("MySelection") // notice the uppercase M
and in the HTML you have id="mySelection"
Also set the second select to false when the window loads and add a onChange event to the first select that will set the second event to enabled/true... it this what you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("mySelection").disabled = true;
};
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>
You may want to set the second select back to disabled if the user selects 'default' in the first menu after changing the value
JavaScript selectors are case sensitive. Your mistake is at mySelection id:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">
You must use that inside body tag .
fiddle
<head>
</head>
<body onload="mySecondFunction()">
<form action="">
<select name="cars" >
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
<script type="text/javascript">
function mySecondFunction() {
alert("aaa");
document.getElementById("mySelection").disabled = false;
}
</script>
</html>
As others pointed out you mispelled the id of the second <select> but also you used the wrong event, onchange is what you want instead of onload.
function mySecondFunction() {
document.getElementById('mySelection').disabled = false;
}
<form action="">
<select name="cars" onchange="mySecondFunction();">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
But consider using jQuery and attach your events in javascript instead of having them stored in html.
Try this:
Replace
document.getElementById("mySelection").disabled = false;
with this
document.getElementById("mySelection").removeAttribute('disabled');
Also, you may want to change
onload="mySecondFunction()"
with this:
onchange="mySecondFunction()"
Hope this helps.
Change onload to onchange.
<select name="cars" onchange="mySecondFunction();">
if you want to remove the disable in a specific value like (Saab)
See fiddle
note: put the script in b4 the head tag
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "saab")
{
document.getElementById("mySelection").disabled = false;
}else {
document.getElementById("mySelection").disabled = true;
}
}
<form action="">
<select id="1" name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
UPDATE
See fiddle
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "default")
{
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}
I am new to AJAX and PHP, and I have this code:
<head>
<script type="text/javascript">
function crimeselect(){
var select = document.getElementById("crime").value;
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
What I want is, when I choose "Crimes VS Person", the select option with an id of "CVPerson" would only be the one to appear and the select option with an id of "CVHO" would not be appeared. Same also if i choose "Crimes VS Moral and Orders".
I don't know how to do it. Any tips please.
<head>
<script type="text/javascript">
function crimeselect(){
document.getElementById(document.getElementById("crime").value).style.visibility = 'visible';
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="" style="visibility:hidden;">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="" style="visibility:hidden;">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>