Getting values with javascript - 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.

Related

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>

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.

Fiddle works but test page doesn't (missing .ready handler)

I have a problem, I want to show some specific field when i select a specific radio button. I did that and I test on this page (http://jsfiddle.net/niklakis/cw0qLnk5/5/) but when i get the code (which is the below) it does not show the specific fields when I select the radio button.
Can you help me please?
THIS IS THE WHOLE CODE ....
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$("input[type='radio']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorRegister").show();
} else {
$("#DoctorRegister").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
}
});</script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<input style="display:none;" type="text" name="DoctorRegister" id="DoctorRegister" />
<br/>
<br/>
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGM" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGF" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
</fieldset>
</body>
</html>
You're executing your code before the document is rendered. Either:
Move your code to the end of the document before the closing body tag or
Put your code in a document ready handler in the head like:
$( document ).ready(function() {
// your code here
});
jsFiddle example
$("input[type='radio']").change() will fire for all inputs of type radio button. So, try with:
$("input[type='radio'][name='answer']").change()

JavaScript Calculate Button Doesn't Work

This script won't show the calculated total at the end. I can't figure it out! Any suggestions? What am I missing? I have the JavaScript code for the tax function too if that helps. Everything works until I get to the final calculation button.
<H2>Business Card Pricing Calculator</H2>
<P>
<STRONG>Type:</STRONG>
<BR /><BR />
<INPUT id="Horizontal" value="50" type="radio" name="type" />
<LABEL for="Horizontal">Horizontal</LABEL>
<BR />
<INPUT id="vertical" value="50" type="radio" name="type" />
<LABEL for="vertical">Vertical</LABEL>
<BR />
<INPUT id="foldover" value="65" type="radio" name="type" />
<LABEL for="foldover">Foldover</LABEL>
</P>
<P>
<STRONG>Options:</STRONG>
<BR /><BR />
<INPUT id="cutting" value="10" type="checkbox" name="cutting" />
<LABEL for="cutting">Cutting</LABEL>
<BR />
<INPUT id="laminating" value="15" type="checkbox" name="laminating" />
<LABEL for="laminating">Laminating</LABEL>
<BR />
<INPUT id="scoring" value="10" type="checkbox" name="scoring" />
<LABEL for="scoring">Scoring</LABEL>
</P>
<P>
<STRONG>Tax Rate:</STRONG>
<INPUT style="TEXT-ALIGN: right" id="tax_rate" maxLength="5" size="3" type="text"
name="tax_rate" />%
</P>
<P>
<STRONG>Total (Including Tax): </STRONG>
<SPAN id="total_cost"></SPAN>
</P>
<P>
<INPUT id="calculate-button" value="CALCULATE" type="button" />
</P>
JavaScript
$("#calculate-button").click(function () {
var price = 0;
var tax = 0;
var checkedValues = $('input:checked');
$(checkedValues).each(function (index) {
price += parseInt(checkedValues[index].value, 10);
});
tax = (price * $("#tax_rate").val() / 100);
$("#total_cost").html(price + tax);
});

Javascript calculation not working.

I have one page and two separate script to calculate value but if I repeat two time Javascript in one page it is not working how can I do this?
Please help in this issue. Thanks in advance.
<script type="text/javascript"><!--
function updatesum() {
var total = (document.form.daysone.value -0)*(document.form.daystwo.value -0)* (document.form.amount.value -0)/ (document.form.year.value -0)/ (document.form.month.value -0);
document.form.total.value = total.toFixed(3);
}
//--></script>
<form name="form" action="enter.php" method="post" id="searchform">
<p>
<label class="field">15 Days</label>
<input name="daysone" type="text" value="15" onChange="updatesum()" />
</p>
<p>
<label class="field">686 Days</label>
<input name="daystwo" type="text" value="686" onChange="updatesum()" />
</p>
<p>
<label class="field">Amount </label>
<input name="amount" type="text" value="" onChange="updatesum()" />
</p>
<p>
<label class="field">year </label>
<input name="year" type="text" value="365" onChange="updatesum()" />
</p>
<p>
<label class="field">month </label>
<input name="month" type="text" value="30" onChange="updatesum()" />
</p>
<p>
<label class="field" >Total </label>
<input name="total" type="text" value="" />
</p>
<strong>next one</strong>
<script type="text/javascript"><!--
function updatesum() {
var total1 = (document.form1.days1.value -0)*(document.form1.days1.value -0)* (document.form1.amount1.value -0)/ ;
document.form1.total1.value = total1.toFixed(3);
}
//--></script>
<form name="form1" action="enter.php" method="post" id="searchform">
<p>
<label class="field">15 Days</label>
<input name="days1" type="text" value="15" onChange="updatesum()" />
</p>
<p>
<label class="field">686 Days</label>
<input name="days2" type="text" value="686" onChange="updatesum()" />
</p>
<p>
<label class="field">Amount </label>
<input name="amount1" type="text" value="" onChange="updatesum()" />
</p>
<p>
<label class="field" >Total </label>
<input name="total1" type="text" value="" />
</p>
I think the same name is creating a problem here, Is it necessary to have the same name for both the functions?
Please try to change the name from UpdateSum in second one to something else.
Try to use this function, and replace your with this one.
<script type="text/javascript">
function updatesum() {
var total = (document.form.daysone.value -0)*(document.form.daystwo.value -0)* (document.form.amount.value -0)/ (document.form.year.value -0)/ (document.form.month.value -0);
document.form.total.value = total.toFixed(3);
}
</script>
<form name="form" action="enter.php" method="post" id="searchform">
<p>
<label class="field">15 Days</label>
<input name="daysone" type="text" value="15" onChange="updatesum()" />
</p>
<p>
<label class="field">686 Days</label>
<input name="daystwo" type="text" value="686" onChange="updatesum()" />
</p>
<p>
<label class="field">Amount </label>
<input name="amount" type="text" value="" onChange="updatesum()" />
</p>
<p>
<label class="field">year </label>
<input name="year" type="text" value="365" onChange="updatesum()" />
</p>
<p>
<label class="field">month </label>
<input name="month" type="text" value="30" onChange="updatesum()" />
</p>
<p>
<label class="field" >Total </label>
<input name="total" type="text" value="" />
</p>
The issue is with the duplicate function name.
Since, both the functions have a different calculation, it is better you name them differently and update your html accordingly.
There is another way in which you can do this, but you'll have to pass a parameter to the function which will differentiate between the two forms.
function updatesum(formName) {
var total, total1;
if (formName == 'form') {
total = (document.form.daysone.value - 0) * (document.form.daystwo.value - 0) * (document.form.amount.value - 0) / (document.form.year.value - 0) / (document.form.month.value - 0);
document.form.total.value = total.toFixed(3);
} else if (formName == 'form1') {
total1 = (document.form1.days1.value - 0) * (document.form1.days1.value - 0) * (document.form1.amount1.value - 0);
document.form1.total1.value = total1.toFixed(3);
}
}

Categories