Select web form elements with specific attribute

Select web form elements with specific attribute - javascript

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

Related

Get multiple selected text options with JavaScript

How to have a hyphen between two values?
This is my code:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = $(':selected').text();
$('input').val(var_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">
This is the result I received:
This is what I want:
How to have a hyphen between two values?
Any help is appreciated.

You can use "id" in html:
<div>
<select id="alphabet">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select id="id">
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">
</div>
jQuery(document).ready(function($) {
$('input').val('default');
$('#id').change(function() {
const id = $('#id :selected').text();
const alphabet = $('#alphabet :selected').text();
$('input').val(alphabet + "-" + id);
});
});

This is how I would modify your code, it gives you the expected results regardless of the content of the selected option text:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = [];
$(':selected').each(function(index, item){
var_id.push(item.innerText)
});
$('input').val(var_id.join(' - '));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">

Here's one way to do it:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = $(':selected').text();
$('input').val(var_id[0] + ' - ' + var_id[1]);
});
});
Also, if you want to use an ES6 template literal, you can use:
$('input').val(`${var_id[0]} - ${var_id[1]}`);

When any select menu changes, you could push each select value and join with the hyphen delimiter.
$(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
let values = [];
$('select').each(function () {
values.push(this.value);
});
$('input').val(values.join('-'))
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" value="">

Instead of applying text directly to the array of elements returned by $(':selected') you can map each element to their text representation and then join the array of the text-values:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = $(':selected').map(function () {
return $(this).text()
}).toArray().join("-");
$('input').val(var_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">

Set selected option to multiple list using jQuery

I have a list from DB which is displayed in select multiple tags:
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>
Given an array of values from DB, need to select only those items that are found in the DB array, for example [2,4,7]. How do I push, with jQuery, attr('selected') to these option tags?
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2" selected="selected">Green</option>
<option value="3">Blue</option>
<option value="4" selected="selected">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7" selected="selected">Yellow</option>
</select>
Like above.

You've just to use the .val() method to achieve that :
$('#list').val([2,4,7]);
$('#list').val([2,4,7]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>

For the sake of completeness, I thought I would add a plain javascript solution.
Here's what I came up with, using an array, a loop, document.querySelector and setAttribute:
var preSelected = [2,4,7];
for (var i = 0; i < preSelected.length; i++) {
var option = document.querySelector('#list option[value="' + preSelected[i] + '"]');
option.setAttribute('selected','selected');
}
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>

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

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

How to show a div when an option is selected [duplicate]

I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>

Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/

No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!

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");

Develop Reference

JavaScript is the programming language of the Web.

Select web form elements with specific attribute - javascript

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/

Related

Get multiple selected text options with JavaScript

Set selected option to multiple list using jQuery

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

How to show a div when an option is selected [duplicate]

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

Categories

Resources