We Keep Coding

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

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" />

Can't get radio values to send

I am working on making a form that should take the three questions in the form and add them up. If the end value is equal to three it should open call another function called toggletab() when the submit button is clicked. I tried this with it telling me pass or false depending on the value but it won't work. I am not good at JavaScript and it is really confusing to me. It looks like it is running each question separately instead of waiting until the end and calculating them all together. I cannot figure out why this is happening. I also am not sure how to call another function that is in a separate file if someone would know how to do that.
Thank you. This is the HTML
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0"
onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1"
onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<legend>Is your arrest record a:</legend>
<input type="radio" name="field4" value="1"
onclick="getscores4(this)"/>
IC 35-38-9-1
</label>
<label>
<input type="radio" name="field4" value="2"
onclick="getscores4(this)"/>
IC 35-38-9-2
</label>
<label>
<input type="radio" name="field4" value="3"
onclick="getscores4(this)"/>
IC 35-38-9-3
</label>
<label>
<input type="radio" name="field4" value="4"
onclick="getscores4(this)"/>
IC 35-38-9-4
</label>
<label>
<input type="radio" name="field4" value="5"
onclick="getscores4(this)"/>
IC 35-38-9-5
</label>
</fieldset>
This is the JavaScript
function getscores1(score1) {
var getscores1 = (score1.value);
sendScores(getscores1);
}
function getscores2(score2) {
var getscores2 = (score2.value);
sendScores(getscores2);
}
function getscores3(score3) {
var getscores3 = (score3.value);
sendScores(getscores3);
}
function sendScores(getscores1, getscores2, getscores3){
var total = getscores1 + getscores2 + getscores3;
answer(total);
}
function answer(total) {
if (total == 3) {
document.getElementById('totalScore').innerHTML = "false";
} else{
document.getElementById('totalScore').innerHTML = "pass";
}
}

The variables your functions are defining are not global. Their values disappear after the function returns. So your sendScores function does not actually have access to those values unless you pass them as arguments. But while sendScores takes 3 arguments, you are only sending one (the one you have access too when you call the function).
One option would be to store these as global variables, but global variables are Generally Evil™. Alternatively, you can get all the values when you click submit. Here is a working example. Note this does not catch the case when the user does not respond to one or more of the questions. Click the "run snippet" button below to see it in action.
For your final question, you can put your js in a separate file and then put <script src="path/to/your/file/js"></script> in your html to load it.
function answer(total) {
var score = 0;
if (document.getElementById('exp_yes').checked) {
score++;
}
if (document.getElementById('chg_yes').checked) {
score++;
}
if (document.getElementById('sus_yes').checked) {
score++;
}
if (score > 0) {
document.getElementById('totalScore').innerHTML = "false";
} else {
document.getElementById('totalScore').innerHTML = "pass";
}
}
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input id=exp_yes type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input id=exp_no type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input id=chg_yes type="radio" name="field2" value="0" />
<label>
Yes
</label>
<input id=chg_no type="radio" name="field2" value="1" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input id=sus_yes type="radio" name="field3" value="0" />
<label>
Yes
</label>
<input id=sus_no type="radio" name="field3" value="1" />
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>

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>

Getting values with javascript

I started learning javascript a few weeks ago, the problem is that with my code I don't get the values that I put and I don't find where the problem could be.
function muestraDatos(){
var var1=document.getElementById("clogin").value;
var var2=document.getElementById("cpassword").value;
var var3=document.getElementById("cemail").value;
var var4=document.getElementById("cnombre").value;
var var5=document.getElementById("capellido").value;
var var6=document.getElementById("cfecha").value;
var var7=document.getElementById("cedad").value;
var var8=document.getElementById("ccolor").value;
var var9=document.getElementById("ccalle").value;
var var10=document.getElementById("ccpostal").value;
var var11=document.getElementById("cpoblacion").value;
var var12=document.getElementById("cprovincia").value;
var var13=document.getElementById("ctelefono").value;
var var14=document.getElementById("csemestre").value;
var var15=document.getElementById("ccarrera").value;
var var16=document.getElementByName('cinteres').value;
alert("Login: "+var1+"\nPassword: "+var2+"\nEmail: "+var3+"\Nombre: "+var4+" "+var5+"\nFecha de nacimiento: "+var6+"\nEdad: "+var7+"\nColor preferido: "+var8+"\nCalle: "+var9+"\nCódigo postal: "+var10+"\nPoblación: "+var11+"\nProvincia: "+var12+"\nTeléfono: "+var13+"\nSemestre: "+var14+"\nCarrera: "+var15+"\nInterés: "+var16);
}
<form onsubmit="return muestraDatos()">
<fieldset>
<legend>Solicitud socio</legend>
<label>Login: </label>
<input type="text" id="clogin" />
<br/>
<label>Password: </label>
<input type="text" id="cpassword" />
<br/>
<label>Email: </label>
<input type="email" id="cemail" />
<br/>
<strong>Datos personales:</strong>
<br/>
<label>Nombre: </label>
<input type="text" id="cnombre" />
<br/>
<label>Apellido: </label>
<input type="text" id="capellido" />
<br/>
<label>Fecha de nacimiento: </label>
<input type="date" id="cfecha" />
<br/>
<label>Edad: </label>
<input type="number" min="18" max="100" step="1" value="18" id="cedad" />
<br/>
<label>Color preferido: </label>
<input type="color" id="ccolor" />
</fieldset>
<fieldset>
<legend>Contacto</legend>
<label>Calle: </label>
<input type="text" id="ccalle" />
<br/>
<label>Código postal: </label>
<input type="text" id="ccpostal" />
<br/>
<label>Población: </label>
<input type="text" id="cpoblacion" />
<br/>
<label>Provincia: </label>
<input type="text" id="cprovincia" />
<br/>
<label>Teléfono: </label>
<input type="tel" id="ctelefono" />
<br/>
<strong>Datos estudiante:</strong>
<br/>
<label>Semestre </label>
<select id="csemestre">
<option value="semestreP">primero</option>
<option value="semestreS">segundo</option>
</select>
<label>Carrera </label>
<select id="ccarrera">
<option value="disenyo">diseño</option>
<option value="arquitectura">arquitectura</option>
<option value="derecho">derecho</option>
<option value="otra">otra</option>
</select>
<br /> Interés
<br/>
<label>Pintar</label>
<input type="radio" name="cinteres" value="pintar" />
<label>Hacer deporte</label>
<input type="radio" name="cinteres" value="hacerdeporte" />
<label>Ver peliculas</label>
<input type="radio" name="cinteres" value="verpeliculas" />
<label>Escuchar musica</label>
<input type="radio" name="cinteres" value="escucharmusica" />
<label>Leer</label>
<input type="radio" name="cinteres" value="leer" />
<br />
<input type="submit" value="Enviar datos" />
</fieldset>
</form>

See this fiddle
You had a typo here in this line
var var16 = document.getElementByName('cinteres').value;
It's actually
var var16 = document.getElementsByName('cinteres').value;
You missed an 's' in getElementsByName.
Also, according to the docs, document.getElementsByName
Returns a nodelist collection with a given name in the (X)HTML
document.
Thus, your code needs to be replaced as
var var16 = document.getElementsByName('cinteres')[index].value;
where index is the index position of the nodelist that is returned.

How can I count the number of radio boxes selected and validate?

So here's what my code does:
it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.
Here is an example of the code:
HTML:
<form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
<input type="radio" id="button" value="first_button" name="1" />
<input type="radio" id="button" value="second_button" name="1" />
<input type="radio" id="button" value="first_button" name="2" />
<input type="radio" id="button" value="second_button" name="2" />
<input type="radio" id="button" value="first_button" name="3" />
<input type="radio" id="button" value="second_button" name="3" />
<input type="radio" id="button" value="first_button" name="4" />
<input type="radio" id="button" value="second_button" name="4" />
<input type="radio" id="button" value="first_button" name="5" />
<input type="radio" id="button" value="second_button" name="5" />
<input type="radio" id="button" value="first_button" name="6" />
<input type="radio" id="button" value="second_button" name="6" />
<input type="radio" id="button" value="first_button" name="7" />
<input type="radio" id="button" value="second_button" name="7" />
<input type="radio" id="button" value="first_button" name="8" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="9" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="10" />
<input type="radio" id="button" value="second_button" name="10" />
</form>
JAVASCRIPT
function Validation()
{
var bol2 = $("input:radio:checked").length;
if (bol2<=4)
{
alert("Please select 5 buttons");
return false;
}
}
The code now works. Thanks #Climbage, I looked at other code and figured out what to do

Try this - http://jsfiddle.net/BeT4h/
<form method="post" action="index.php" name="buttons" id="form">
<script>
function showTime() {
var inputs = document.getElementById("form").elements;
var count = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'radio' && inputs[i].checked) {
count++;
}
}
alert(count);
}
</script>

Just make 5 of them checked by default.
Put check='checked' for every other input. Put in all first_button or second_button.