fetch input attributes and make a multidimensional array with index in jquery - javascript

i have some input fields
<input class="first" type="text" unique="001" value="2" />
<input class="second" id="001" type="text" value="2" />
<input class="first" type="text" unique="002" value="3" />
<input class="second" id="002" type="text" value="2" />
<input class="first" type="text" unique="003" value="4" />
<input class="second" id="003" type="text" value="3" />
I want to generate a multidimensional array like this
a={
{value:2, unique:001, value2:2},
{value:3, unique:002, value2:2},
{value:4, unique:003, value2:3},
}
What i tried is
$(".first").each(function() {
var a={};
var x=a['value']=$(this).val();
var y=a['unique']=$(this).attr('unique');
var z=a['value2']=$('#'+y).val();
})
console.log(a);
I know it doesnt work. Any ideas to solve it !

You need to declare a as an array outside your .each code, and then push each object into it. Try this:
var a = [];
$(".first").each(function() {
var x=$(this).val();
var y=$(this).attr('unique');
var z=$('#'+y).val();
a.push({value: x, unique: y, value2: z});
});
console.log(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="first" type="text" unique="001" value="2" />
<input class="second" id="001" type="text" value="2" />
<input class="first" type="text" unique="002" value="3" />
<input class="second" id="002" type="text" value="2" />
<input class="first" type="text" unique="003" value="4" />
<input class="second" id="003" type="text" value="3" />

Use .map() instead and in function create object with target structure.
var obj = $(".first").map(function(){
return {
'value': this.value,
'unique': $(this).attr('unique'),
'value2': $('#'+$(this).attr('unique')).val()
}
}).toArray();
console.log(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="first" type="text" unique="001" value="2" />
<input class="second" id="001" type="text" value="2" />
<input class="first" type="text" unique="002" value="3" />
<input class="second" id="002" type="text" value="2" />
<input class="first" type="text" unique="003" value="4" />
<input class="second" id="003" type="text" value="3" />

Related

update image with jquery based on multiple radio button inputs

An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?
Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});
You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>

JQuery: Combine sets of field names and values into an object and then push into an array

I have a form with three sets of fields.
Like this:
<form>
<div class="food">
<input type="text" name="" value="" />
<input type="text" name="" value="" />
<textarea name="" value=""></textarea>
</div>
<div class="drinks">
<input type="text" name="" value="" />
<input type="text" name="" value="" />
<textarea name="" value=""></textarea>
</div>
<div class="gifts">
<input type="text" name="" value="" />
<input type="text" name="" value="" />
<textarea name="" value=""></textarea>
</div>
</form>
How do I combine field names and values in each div into their own json object, push the objects into an array, and then add the array to a hidden input field before submission?
You can use map() and get() to create array and inside you can return object for each div.
var data = $('form > div').map(function() {
var obj = {}
$(this).find('input, textarea').each(function() {
obj[$(this).attr('name')] = $(this).attr('value');
})
return obj;
}).get()
console.log(data)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="food">
<input type="text" name="a" value="1" />
<input type="text" name="b" value="11" />
<textarea name="c" value="111"></textarea>
</div>
<div class="drinks">
<input type="text" name="a" value="2" />
<input type="text" name="b" value="22" />
<textarea name="c" value="222"></textarea>
</div>
<div class="gifts">
<input type="text" name="a" value="3" />
<input type="text" name="b" value="33" />
<textarea name="c" value="333"></textarea>
</div>
</form>

How can I target unchecked checkboxes in jQuery?

When I uncheck any checkbox it also appends the result. I want to remove that. What should I do?
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
$(document).ready(function() {
$('.chk_val').on('click', function() {
var result = $('.chk_val:checked').map(function() {
return $(this).val()
}).get();
$('#course').html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
Map the value of checked items.
Use .html() to change the html of the div

JQUERY Chaining variables in an if-statement, logical operators

I currently have 2 groups of checkboxes. The submit button of the form shall stay disabled until at least one checkbox of each group is checked.
By now it works just for the first category (name/id all the same except the number, you'll see).
HTML:
<h3>Choose func</h3>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled="">
JS:
$(function () {
$("#func1, #func2, #func3").change(function () {
if ( $("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked') ) {
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
});
I have the current code in the jsfiddle: https://jsfiddle.net/g4jcjn51/
So I thought about sth. like this (which doesn't work):
if ( ($("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && $("#plat1").is(' :checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') )
{
}
Any solution?
Thanks!
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4").change(function () {
if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && ($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') )) {
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
What about counting checked checkboxes like this:
var checked1 = $('input[name="func1"]:checked').length;
var checked2 = $('input[name="func2"]:checked').length;
if (checked1 > 0 && checked2> 0){
//Do your stuff
} else {
alert("At least one checkbox of each group has to be checked.");
}
You could wrap it into two groups, #group1 and #group2 i.e <div id="group1"> etc, and then
$("input[type=checkbox]").on('click', function() {
if ($("#group1 input:checked").length>0 &&
$("#group2 input:checked").length>0) {
$("#idAbfragen").attr('disabled', false);
} else {
$("#idAbfragen").attr('disabled', true);
}
});
forked fiddle -> https://jsfiddle.net/kee7m06r/
You can give your form an id and then select all checkboxes at once and make the verification.
HTML:
<h3>Choose func</h3>
<form id="form1">
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled=""/>
</form>
JS:
$(function () {
$("#form1").find("input[type=checkbox]").change(function () {
if ($(this).is(' :checked')){
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
});
JSFiddle
I'd suggest you group your checkboxes using a <div> or a <fieldset>, so that you can easily tell which items are in which group. Then you should be able to easily figure out whether all the groups have at least one checked input.
$(function() {
$("input[type=checkbox]").change(function() {
var anySegmentIsUnchecked = $('fieldset').is(':not(:has(:checked))');
$('.input-button').prop('disabled', anySegmentIsUnchecked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<fieldset>
<legend>
<h3>Choose func</h3>
</legend>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" />f1
<br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" />f2
<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3" />f3
<br/>
</fieldset>
<fieldset>
<legend>
<h3>Choose plat</h3>
</legend>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" />p1
<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" />p2
<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" />p3
<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" />p4
<br/>
</fieldset>
</form>
<input type="submit" name="abfrage" class="input-button" id="idAbfragen" value="submit" disabled>
Fiddle
One big advantage to this approach is that it follows the open/closed principle: you don't have to change your javascript code at all if you add more groups of checkboxes.

Populate textboxes via a series of checkboxes

I am trying to populate a series of textboxes from a number of checkboxes. There are 8 text boxes and it seems that code will only populate one of these fields.
here is the checkboxes:
<input name="naicscode" id="naicsCodeCheckbox0" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox1" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox2" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox3" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox4" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input name="naicscode" id="naicsCodeCheckbox5" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox6" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox7" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input type="button" id="secondaryNaicsButton" name="save_value" value="Save" />
heres the textboxes:
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode0" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode1" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode2" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode3" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode4" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode5" class="fpp_textfield NAICS-code-field" value="" type="text" />
here is my jQuery:
// gets values of check box in Secondary NAICS list
$('#secondaryNaicsButton').click(function() {
$('.naicsCodeCheckbox:checked').each(function(i){
var val = []
val[i] = $(this).val();
for (var i =0; i < val.length; i++) {
$('#secondaryNaicsCode'+i).val(val[i]);
}
});
the result i'm getting is that it will give the value of one of the check boxes and put it in text box 3 or 4.
this is what console log is giving me :
111140 fol_reg_form.js:215
undefined fol_reg_form.js:215
111150 fol_reg_form.js:215
2
undefined fol_reg_form.js:215
111219 fol_reg_form.js:215
3
undefined fol_reg_form.js:215
111331 fol_reg_form.js:215
4
undefined fol_reg_form.js:215
111334
Try this:
$('#secondaryNaicsButton').click(function () {
$('.naicsCodeCheckbox').each(function (i) {
if (this.checked) {
$('#secondaryNaicsCode' + i).val(this.value);
}
});
});
Demo here
Note: in your code you have no class with name .naicscode, so I used class naicsCodeCheckbox instead. If you want to go by name you can use the same code but with $('input[name="naicscode"]').each( //etc ... instead.
I got the code to work. Took some good advice.
here's the code:
// gets values of check box in Secondary NAICS list
$('#secondaryNaicsButton').click(function() {
$('.naicsCodeCheckbox:checked').each(function(e) {
val = []
val[e] = $(this).val();
$('#secondaryNaicsCode'+e).val(val[e]);
});
});
demo here

Categories