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>
Related
I have to write some code where in a select there are three options and the value of a div will change to the selected item's value when it is changed, I have tried quite a lot of methods and functions but nothing worked. this is my current code :
$('select[class="country"]').on('change', function () {
var get = $('select option:selected').text();
$('#fDiv').text = get;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country"id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
Please share any ideas of what could be wrong with this code.
use .text() like : $('#fDiv').text(myText);
$('select[class="country"]').on('change', function() {
var myText = $('select option:selected').text();
$('#fDiv').text(myText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
With jQuery, you don't use the assignment =, you use it like ('#id').text(get):
$('select[class="country"]').on('change', function() {
var get = $('select option:selected').val();
$('#fDiv').text(get);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
Here is a pure javascript solution to your issue.
const select = document.querySelector('#country');
const div = document.querySelector('#fDiv');
div.innerHTML = select.selectedOptions[0].value // remove this if you dont want a value set initially
select.addEventListener('change', (event) => {
div.innerHTML = select.selectedOptions[0].value
});
<h1>The coolest country</h1>
<select name="country"id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
1) Add <html> at the start of your file
2) Add a space in between name = "country" id="country"
3) Use text() with a parameter: such as $('#fDiv').text(get);
$('select[class="country"]').on('change', function () {
var get = $('select option:selected').text();
$('#fDiv').text(get);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Cool Site</title>
</head>
<body>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
</body>
</html>
I have select tag below:
<select name="selID" id="selID" data-mini="true"">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
I want to change value when one of the options is selected except for "Add More..."
Sorry I'm a newbie. Thanks in advance.
You can try this:
The HTML:
<body>
Result: <p id="result"></p>
<select name="selID" id="selID" data-mini="true" onchange="test()">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
<script src="test.js"></script>
</body>
test.js:
function test() {
let listVal = document.getElementById("selID").value;
if (listVal != "0") {
document.getElementById("result").innerHTML = listVal;
}
else {
listVal = 1; // this is value for "Tithes"
document.getElementById("selID").value = listVal;
document.getElementById("result").innerHTML = listVal;
}
}
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());
});
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>
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;
}
}