How to populate dynamic input field with dynamic select option in jquery - javascript

I am trying to populate input field with the value of selected option both are dynamically loaded. I am able to load selected option value and can update it when option changed. but if there are 10 input field and 10 select option tags and i select one option from 10 tags than all 10 input fields show same value. Every input field have 10 options. I need to change value individually .
here is function of jquery,
$("#myselect").change(function () {
$( "select option:selected" ).each(function() {
$('.returnValue').val($( this ).text());
});
});
I want to insert individual product quantity in input field.
I am struggling for two days please help.
<select id="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">

Use $(this).parent().next('.returnValue').val($( this ).text()); to set value to the next input field.
$(".myselect").change(function () {
$( "select option:selected" ).each(function() {
$(this).parent().next('.returnValue').val($( this ).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">
<select class="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">
<select class="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">

You can solve your problem in different ways:
If the select and input fields are one after another you may use:
$(this).next('.returnValue').val($( this ).val());
Another approach can be based on adding for each select a new attribute like:
input-field="newlass1"
And so add a new class to the corresponding input field in a way to link the select and input field.
In this case you can do it:
$('input.' + $(this).attr('input-field')).val($( this ).val());
The snippet:
$("[id^=myselect]").change(function () {
//$(this).next('.returnValue').val($( this ).val());
$('input.' + $(this).attr('input-field')).val($( this ).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="myselect1" input-field="newlass1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass1" type="text" value=""><br>
<select id="myselect2" input-field="newlass2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass2" type="text" value=""><br>
<select id="myselect3" input-field="newlass3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass3" type="text" value=""><br>
<select id="myselect4" input-field="newlass4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass4" type="text" value="">

your problem is using the same class for all input fields, you need to set a different id for each input field
here's a plunker

Related

Element by Name on load setting value

Trying to get the page to load with default selected option 2
Well neither are working, what's correct?
My HTML is like this, no ID or class
$(window).load(function() {
$("tour-adult[]").value = 3;
document.getElementById("tour-adult[]").value = 4;
});
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
Using jQuery:
Use .on('load', () {...} instead of .load() - Why?
Use an attribute selector like $("[attribute='attributeName']")
Pass the value as a String, not a Number
$(window).on('load', function() {
$('select[name="tour-adult[]"]').val('3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
As far as your first attempt, try selecting the select element by it's name attribute and using jQuery's val() method to set the value:
$("select[name='tour-adult[]']").val(3);
You currently don't have an id assigned to the select. If you want to go native, you'd use something like querySelector:
document.querySelector("select[name='tour-adult[]']").value = 4;
$(window).on('load', function() {
$("select[name='tour-adult[]']").val(3);
console.log($("select[name='tour-adult[]']").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
If you want to call it by ID, you will need to add an ID. I removed your jquery and added an ID and its working.
document.getElementById("tour-adult").value = 4;
<div class="tourmaster-combobox-wrap">
<select id="tour-adult" name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

Select web form elements with specific attribute

I have the following HTML form:
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
How to select using (JavaScript or jQuery) all SELECT's from my form (only those having catid attribute) and show its catid attribute values and selected option values?
You can use filter() method passing the attribute selector as parameter:
var cat = [];
$('select').filter('[name^="catid"]').each(function() {
cat.push($(this).attr('name'));
});
alert(cat);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
You can use has attribute selector:
$('select[catid]');
And then iterate over returned elements using .each() and log the values and attributes.
Working Snippet:
$('select[catid]').each(function(){
console.log($(this).attr("catid"));
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
$('select[name^=catid]').each(function() {
console.log($(this).attr("catid")); // get attribute using this
console.log($(this).val()); // get selected value using this
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
</form>
I hope it should be help to you
var categories= $('[catid]').serialize();
console.log(categories);
This will be generate name and value mapping in querystring format you can use this string in ajax method as data as a post method.
See this: https://jsfiddle.net/gredztox/
You can use select[name^="catid"] method for selecting an multiple array elements with its name.
<script>
$(document).on('change','select',function(){
var catArr = [];
$('select[name^="catid"]').each(function() {
catArr.push($(this).val());
});
document.getElementById('result').innerHTML = catArr;
});
</script>
Your Final Output

How to enable/disable drop down list box in HTML + Javascript/JQuery?

I have 2 drop down lists of pairs of name IMEI's and cities, as following:
<HTML>
<body>
Select Programming font:
<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
</body>
</html>
The desired behavior is: when one selects a city name, the IMEI list enables; otherwise it is disabled.
How can I achieve this?
Thanks in advance!
Fiddle Demo
$(function () {
var sel_imie = $('select[name="IMEI"]');
sel_imei.prop('disabled', true); //disable IMEI select
$('select[name ="city"]').change(function () {
sel_imei.prop('disabled', false); //enable when value of city select is changed
});
});
.change()
Try this,
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Script
$('#city').on('change',function(){
$('#IMEI').attr('disabled',false);
});
Demo:http://jsfiddle.net/khmSm/
Select Programming font:
<select name="IMEI" disabled="disabled">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name="city">
<option value="">Select...</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
document.getElementsByName('city')[0].addEventListener('change', function(e){
var imei = document.getElementsByName('IMEI')[0];
var city = e.target;
imei.disabled = city.value != '' ? '' : 'disabled';
});
try this way
HTML CODE:
CITY :<select name="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
<br/>
IMEI :<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
JQUERY CODE:
$('select[name=IMEI]').prop('disabled',true);
$('select[name=city]').on('change',function () {
$('select[name=IMEI]').prop('disabled',false);
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/TvpRF/7/
Happy Coding :)
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value ="choose">Choose a city</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Here is the link : http://jsfiddle.net/khmSm/1/
Disable select and update the plugin. Use trigger chosen:updated to disable the select widget.
$('#RefundType').prop('disabled', true).trigger("chosen:updated");

Java Script DrobDown Disable Mark

Here is my question, for exp:
<select name="select1" >
<option value="default" selected="selected">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="select2" >
<option value="default" selected="selected">Default</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If I select (number 1) from (select1), then (select2) totally will be disabled. or if i select (number4) from (select2) then (select1) totally will be disabled.
I mean depends on select name, other select name will be disabled.
Is it possible to give me the java code for this ?
Thank you
Using jquery, it'd be something like this. jsfiddle
HTML:
<select id="select1" name="select1" >
<option value="default" selected="selected">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="select2" id="select2" >
<option value="default" selected="selected">Default</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
JS:
$('#select1').on('change', function(){
if($(this).val() != 'default'){
$('#select2').prop('disabled', true);
}
else{
$('#select2').prop('disabled', false);
}
});
$('#select2').on('change', function(){
if($(this).val() != 'default'){
$('#select1').prop('disabled', true);
}
else{
$('#select1').prop('disabled', false);
}
});
As I said, you need to correct your html as well. In your website, use the following html instead of what you have i.e. add ID's to your select dropdown.
<select id="select1" name="select1" ...
<select id="select2" name="select2" ...

Getting value from HTML select tag

I have a html combo/select. When the user selects a element, I want to populate textboxcontrol from it. How to do it.
HTML:
<select id="combobox">
<option value="">Pick one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input id="textbox" type="text" />
Javascript (assumes jQuery):
$('#combobox').change( function(){
$('#textbox').val( $(this).val() );
}).click( function(){
$('#textbox').val( $(this).val() );
});

Categories

Resources