We Keep Coding

Getting array input key and value using jquery

I need to get unique id and map it to value from array input using jquery/javascript
HTML
<input type="text" name="parameter['abc']" value="first value">
<input type="text" name="parameter['zxv']" value="second value">
Required output
[
'abc' : 'first value'
'zxv' : 'second value'
]
My attempts: managed to get values, but not indexes.
$('input[name^="parameter"]').map(function(){return
$(this).val();}).get();

var obj = {};
$.each($(".inputs"), function(key1, index1) {
var res = $(this).attr('name').split("parameter");
var parameterkey = res[1];
var res = parameterkey.replace("['", "");
var resd = res.replace("']", "");
var key = resd;
var value = $(this).val();
obj[key] = value;
console.log(obj);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputs" type="text" name="parameter['abc']" value="first value">
<input class="inputs" type="text" name="parameter['zxv']" value="second value">

jquery populates attribute input form multiple value

is that possible to populate attributes name, value, type from :input or something like jQuery serialize for all kinds of input, and combine the value if there is have multiple name like checkbox and radio choices
the concept like this :
$(this).attr('name');
$(this).attr('type');
$(this).attr('value'); // <--- combine this value when the type is checkbox or radio
i try to populate the attributes using each function :
it work but i still don't know how to combine type
$('.submit').click(function(){
var tipe = {}
var form = {}
$('input[type=text], textarea', '.register').each(function(){
const name = $(this).attr('name');
const value = $(this).val();
const type = $(this).attr('type');
form[name] = value;
tipe[name] = type;
});
$('input[type=checkbox], input[type=radio]', '.register').each(function(){
const name = $(this).attr('name');
const value = $(this).val();
const type = $(this).attr('type');
if(form[name] === undefined) {
form[name] = [value];
tipe[name] = [type];
} else {
form[name].push(value);
}
});
console.log(form);
//console.log(tipe);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register">
<input type="text" name="full_name">
<textarea name="address"></textarea>
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="checkbox" name="hobies" value="foodball">
<input type="checkbox" name="hobies" value="basketball">
</div>
<input type="button" class="submit" value="Submit">

you can use below logic where you can create one map to store value of each input and append values if input type is of type radio or checkbox
$('.submit').click(function(e){
var formValues = {};
$('.register :input').each(function(){
var name = $(this).attr('name');
var type = $(this).attr('type');
var value = $(this).val();
var inputElement = {};
var valid = true;
if(type == 'radio' || type == 'checkbox') {
valid = $(this).is(':checked');
if(valid) {
if(formValues[name]) {
inputElement = formValues[name];
var preVal = inputElement['value'];
value = preVal + ',' + value;
}
}
}
if(valid) {
inputElement['name'] = name;
inputElement['type'] = type;
inputElement['value'] = value;
formValues[name] = inputElement;
}
});
console.log(formValues);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register">
<input type="text" name="full_name">
<textarea name="address"></textarea>
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="checkbox" name="hobies" value="foodball">
<input type="checkbox" name="hobies" value="basketball">
</div>
<input type="button" class="submit" value="Submit">

get each div id in for loop

In a for loop based on divs count I need to select each div child so I got to get the id of the div.
this is what I have tried:
var json = [{
'orderId': order,
'attributes': [],
'services': []
}];
var divLength = $('#stepchild div').length;
for (i = 0; i < divLength; i++) {
var fields = {};
$('#divID input').each(function() {
fields[this.name] = $(this).val();
})
$('#divID select').each(function() {
fields[this.name] = $(this).val();
})
json[0]['attributes'].push(fields);
}
<div id="form0">
<input type="text" class="field1">
</div>
<div id="form1">
<input type="text" class="field1">
</div>
<div id="form2">
<input type="text" class="field1">
</div>

You can use a loop like this (basic example):
$('div').each(function()
{
console.log($(this).attr('id'))
})
refs:
https://api.jquery.com/attr/
https://api.jquery.com/jQuery.each/

$('target').each(function()
{
console.log($(this).attr('id'))
});
this will run for each target match . in your case 'div' is your target . you can use find , child attribute for sub search

Welcome to Stack Overflow
You need to use map function here in order to collect ID or value inside the textbox.
Here is an example to get ID:
var json = [{
'orderId': 'order',
'attributes': [],
'services': []
}];
function getDivID()
{
var values = $("#stepchild div").map(function (i, e) {
return $(e).attr('id');
}).get();
json[0]['attributes'].push(values);
console.log("json[0]['attributes'] is now : " + json[0]['attributes']);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepchild">
<div id="form0">
<input type="text" class="field1">
</div>
<div id="form1">
<input type="text" class="field1">
</div>
<div id="form2">
<input type="text" class="field1">
</div>
</div>
<button onclick="getDivID()">Click here to get div ID</button>
Using .map() function you can also collect value form each element inside div :
var json = [{
'orderId': 'order',
'attributes': [],
'services': []
}];
function getValue() {
var values = $("#stepchild input").map(function (i, e) {
return $(e).val();
}).get();
json[0]['attributes'].push(values);
console.log("json[0]['attributes'] is now : " + json[0]['attributes']);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepchild">
<div id="form0">
<input type="text" class="field1" value="abc">
</div>
<div id="form1">
<input type="text" class="field1" value="xyz">
</div>
<div id="form2">
<input type="text" class="field1" value="something">
</div>
</div>
<button onclick="getValue()">Click here to get value</button>
refs:
http://api.jquery.com/map/

Disclaimer : I know the question is about jquery, but I would like to provide the non-jQuery version :
If you just want the IDs in a list, you can use this :
[...document.querySelectorAll('div')].map(div => div.id)
Or if you need to loop over them and do some processing for each, you can use this :
[...document.querySelectorAll('div')].forEach(div => {
// process the div element here with div.id beeing the ID
});

Within $.fn.each, you can access the current element id with this.id or with the parameter element.id.
Keep in mind that $() will give you a collection. You can write your code like this:
const json = [{
'orderId': order,
'attributes': [],
'services': [],
}];
$('#stepchild div').each(function (index, element) {
let fields = {};
$(element).find('input, select').each(function () {
fields[this.name] = $(this).val();
});
json[0]['attributes'].push(fields);
});

how to get an attribute from an element with jquery?

here is my example
<fieldset data-role="controlgroup" id="test">
<legend>Radio buttons, vertical controlgroup:</legend>
<input class="status" type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">Cat</label>
<input class="status" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">Dog</label>
<input class="status" type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">Hamster</label>
<input class="status" type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">Lizard</label>
</fieldset>
$('.status').on("click", function () {
var inputs = $('#test').find('input');
$.each(inputs, function (i, v) {
console.log(v);
});
});
i would like to get the id and val() of all radio buttons, something like:
[{
id: id1,
value: value1
} {
id: id2,
value: value2
}]
...
any ideas?

To get the attribute of an element you can use .attr() like $(el).attr('class').
But to get the desired output in the above case, you can use
$('.status').on("click", function () {
var array = $('#test').find('input').map(function(idx, el){
return {id: el.id, value: el.value}
}).get();
console.log(JSON.stringify(array));
});
Demo: Fiddle

$('.status').on("click", function () {
var radioid = $(this).attr('id'); //gets the attribute ID of the clicked `.status`
radioval = $(this).val(); //gets the value of of the clicked `.status`
alert('ID = ' + radioid + ' and VALUE = ' + radioval); //see the magic
var inputs = $('#test').find('input');
$.each(inputs, function (i, v) {
console.log(v);
});
});
Use jquery attr() to get the attribute ID (and other attributes) and val() to get the value of the radio button
DEMO

Check all fields together?

There are three field. i want check each a of field if have value, show class .koko. if on all field not have value, hide class .koko.
How is it?
in the this code, each field is check separate but i want check all fields together:
<input type="text" name="ok" class="ko" value="">
<input type="text" name="ok" class="ko" value="">
<input type="text" name="ok" class="ko" value="">
<div class="koko" style="display: none;">Hello, how are you?</div>
$('.ko').live("keyup", function () {
var $val = $(this).val();
$('.koko').show();
if ($val == '') {
$('.koko').hide()
}
});
DEMO

You could do it this way:
$('.ko').live("keyup", function () {
var $val = $(this).val();
$('.koko').show();
var collectiveValue = '';
$('.ko').each(function(){collectiveValue += this.value})
if(collectiveValue.length == 0)
$('.koko').hide();
});
http://jsfiddle.net/abdQc/

$('.ko').live("keyup", function () {
var showOrHide = $(".ko[value^='']").length >= 0;
$('.koko').toggle(showOrHide);
});