Develop Reference

radio button to show different form depending on a choice inside a form

I don't know if i missed some small error or what but can't get it to work.
I have a form which will send data to email_to_us.php. Inside the form I have two radio buttons. They are inside this form becouse this is a mandatory data which is also send to us. Now I want to change a form depending on what a user chooses. So far I have this:
HTML:
<form action="email_to_us.php" method="post">
<span class="link_title">Prijavljam se na tečaj:</span><br><br>
<select name="prijava_na_datum" required>
<option value="" selected="selected">Izberi datum</option>;
<?php
$con = mysqli_connect('localhost','root','','viverius_education');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
$sql = mysqli_query($con, "SELECT ID_TECAJA, DATUM FROM razpisani_tecaji WHERE STATUS ='odprt' AND ST_ODPRTIH_MEST>0");
while ($row = $sql->fetch_assoc()){
echo "<option value='" . $row['ID_TECAJA'] . "'>" . $row['DATUM'] . "</option>";
}
?>
</select>
<br>
<input type="radio" id="radio1" name="status_osebe" value="fizicna" required> Fizična oseba
<input type="radio" id="radio2" name="status_osebe" value="pravna"> Pravna oseba<br><br>
<form method ="post" id="fizicna_oseba">
<input class="span7" type="text" name="ime" value="" placeholder="Ime" required/>
<input class="span7" type="text" name="priimek" value="" placeholder="Priimek" required />
<input class="span7" type="email" name="email" value="" placeholder="Email" required/>
<input class="span7" type="text" name="telefon" value="" placeholder="Telefonska številka (podatek ni obvezen)"/><br>
Vaša izobrazba/status<br>
<select name="izobrazba" required>
<option></option>
<option value="student">Študent</option>
<option value="pripravnik">Pripravnik</option>
<option value="specializant">Specializant</option>
<option value="specialist">Specialist</option>
</select>
<input class="span7" type="text" name="kraj" value="" placeholder="Ustanova/kraj (podatek ni obvezen)"/><br>
</form>
<form method ="post" id="podjetje">
<input class="span7" type="text" name="ime" value="" placeholder="Ime" required/>
<input class="span7" type="text" name="priimek" value="" placeholder="Priimek" required />
<input class="span7" type="email" name="email" value="" placeholder="Email" required/>
<input class="span7" type="text" name="telefon" value="" placeholder="Telefonska številka (podatek ni obvezen)"/><br>
Izberite koliko oseb želite prijaviti na tečaj? Odprla se vam bodo dodatna okna kjer prosimo, da izpolnete podatke o udeležencih.<br>
<input type="radio" id="radio01" name="st_oseb" value="fizicna" required>1
<input type="radio" id="radio02" name="st_oseb" value="pravna">2
<input type="radio" id="radio03" name="st_oseb" value="fizicna" required>3
<input type="radio" id="radio04" name="st_oseb" value="pravna">4
<input type="radio" id="radio05" name="st_oseb" value="pravna">5<br><br>
Vaša izobrazba/status<br>
<select name="izobrazba" required>
<option></option>
<option value="student">Študent</option>
<option value="pripravnik">Pripravnik</option>
<option value="specializant">Specializant</option>
<option value="specialist">Specialist</option>
</select>
<input class="span7" type="text" name="kraj" value="" placeholder="Ustanova/kraj (podatek ni obvezen)"/><br>
</form>
<input type="checkbox" name="register" value="register"> Ob prijavi me tudi registriraj!
Kaj pridobim z registracijo?<br><br>
<input type="submit" class="btn send_btn" value="Pošlji" />
<div class="clear"></div><br>
</form>
JavaSript:
<script type="text/javascript">
$('#radio1').change(function() {
if(this.checked) {
$('#fizicna_oseba').show();
$('#podjetje').hide();
}
});
$('#radio2').change(function() {
if(this.checked) {
$('#podjetje').show();
$('#fizicna_oseba').hide();
}
});
</script>

A simpler and cleaner way would be to use with class name
<input ... class="rButton">
<input ... class="rButton">
Script
​$( ".rButton" ).change(function() {
switch($(this).val()) {
case 'fizician_ca' :
// do something on this value
break;
case 'etc' :
// do something with this value
break;
}
});​

Code not suppressing submission of the form if the quantity field contains non-numeric data

I've been working on this nonstop and can't get this code to suppress submission of the form if the quantity field contains non-numeric data. Anyone care to take a look at it for me?
https://jsbin.com/kuviqebujo/edit?html,output
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" text = "text/css">
<legend>Customer Information</legend>
<script language="text/javascript">
function errorMessage(){
var plaQty = document.getElementById("Pla").value;
var chiQty = document.getElementById("Chi").value;
var spaQty = document.getElementByID("Spa").value;
var digits = /[^\s\d]/;
if (digits.test(plaQty) || digits.test(chiQty)||digits.test(spaQty)){
return false;
alert("Enter numeric digit");
} else {
alert('Thank you');
}
}
</script>
</head>
<body>
<form method = "post" id="form1" action="/formtest.php" onsubmit="return errorMessage()">
<br>
Name:<br>
<input type="text" name="firstname"><br>
Address:<br>
<input type="text" name="Address"><br>
<br>
Select your State:
<br>
<select id="myState">
<option value="Georgia">Georgia</option>
<option value="Alabama">Alabama</option>
<option value="Florida">Florida</option>
</select>
<br><br>
Please select your credit card type:<br>
<input type="radio" name="credit card"
value = "American Express"/> American Express
<input type="radio" name="credit card"
value = "Visa"/> Visa
<input type="radio" name="credit card"
value = "Mastercard"/> Mastercard
<br><br>
Enter Credit Card Number:<br>
<input type="text" name="CCnumber"><br>
<p>
Please select the item and quantity below:<br>
<div>Planer $2</div>
<input type="text" name="Planer" id="Pla"/>
<div>Chisel $3</div>
<input type="text" name="Chisel" id="Chi"/>
<div>Spanner $10</div>
<input type="text" name="Spanner" id= "Spa"/>
<p>
<input type = "submit" value = "Submit"/>
</p>
</form>
</body>
</html>

getElementByID is misspelled - as seen in the console
you need to swap the two statements return false; alert("Enter numeric digit");
function errorMessage() {
var plaQty = document.getElementById("Pla").value;
var chiQty = document.getElementById("Chi").value;
var spaQty = document.getElementById("Spa").value;
var digits = /[^\s\d]/;
if (digits.test(plaQty) || digits.test(chiQty) || digits.test(spaQty)) {
alert("Enter numeric digit");
return false;
} else {
alert('Thank you');
}
}
<form method="post" id="form1" action="/formtest.php" onsubmit="return errorMessage()">
<br> Name:
<br>
<input type="text" name="firstname"><br> Address:
<br>
<input type="text" name="Address"><br>
<br> Select your State:
<br>
<select id="myState">
<option value="Georgia">Georgia</option>
<option value="Alabama">Alabama</option>
<option value="Florida">Florida</option>
</select>
<br>
<br> Please select your credit card type:<br>
<input type="radio" name="credit card" value="American Express" /> American Express
<input type="radio" name="credit card" value="Visa" /> Visa
<input type="radio" name="credit card" value="Mastercard" /> Mastercard<br>
<br>Enter Credit Card Number:<br>
<input type="text" name="CCnumber"><br>
<p>Please select the item and quantity below:</p>
<div>Planer $2</div><input type="text" name="Planer" id="Pla" />
<div>Chisel $3</div><input type="text" name="Chisel" id="Chi" />
<div>Spanner $10</div><input type="text" name="Spanner" id="Spa" />
<p>
<input type="submit" value="Submit" />
</p>
</form>
However changing the type to number solves it without code
<form method="post" id="form1" action="/formtest.php" >
<br> Name:
<br>
<input type="text" name="firstname"><br> Address:
<br>
<input type="text" name="Address"><br>
<br> Select your State:
<br>
<select id="myState">
<option value="Georgia">Georgia</option>
<option value="Alabama">Alabama</option>
<option value="Florida">Florida</option>
</select>
<br>
<br> Please select your credit card type:<br>
<input type="radio" name="credit card" value="American Express" /> American Express
<input type="radio" name="credit card" value="Visa" /> Visa
<input type="radio" name="credit card" value="Mastercard" /> Mastercard<br>
<br>Enter Credit Card Number:<br>
<input type="text" name="CCnumber"><br>
<p>Please select the item and quantity below:</p>
<div>Planer $2</div><input type="number" name="Planer" id="Pla" />
<div>Chisel $3</div><input type="number" name="Chisel" id="Chi" />
<div>Spanner $10</div><input type="number" name="Spanner" id="Spa" />
<p>
<input type="submit" value="Submit" />
</p>
</form>

how to match password with confirm password in registration page in jsp page

I have written the following code but on submit it doesn't match password with confirm password..?
what should i do ?
please help..?
<script>
function myFunction(){
var x = document.getElementsByName("pass").value;
var y = document.getElementsByName("pass2").value;
var ok = true;
if(x !== y)
{
alert("Passwords do not match");
}
return ok;
}
</script>
<h1>Hello ! user, Please register here</h1>
<form name="f1" action="redirect.jsp" method="POST" onsubmit="return myFunction()">
First_Name : <input type="text" name="fname" value="" required="" />
<br>
<br>
Last_Name : <input type="text" name="lname" value="" required=""/>
<br>
<br>
Email : <input type="email" name="email" value="" required=""/>
<br>
<br>
Date of birth : <input type="date" name="date" value="" required="" />
<br>
<br>
Password : <input type="password" name="pass" value="" />
<br>
<br>
Confirm Password : <input type="password" name="pass2" value="" />
<br>
<br>
Address :
<br>
<br>
Street_No : <input type="text" name="street" value="" size="15" required=""/>
Near Landmark(if any) : <input type="text" name="landmark" value="" size="20" />
<br>
<br>
City : <input type="text" name="city" value="" required="" />
State : <select name="state" required="" >
<option>Select</option>
<option>Andhra Pradesh</option>
<option>Chattisgarh</option>
<option>Dehradun</option>
<option>Delhi</option>
<option>Uttar Pradesh</option>
<option>Punjab</option>
</select>
Code : <input type="number" name="code" value="" required=""/>
<br>
<br>
Mobile number : <input type="text" name="mobile" value="" size="11" required="" />
<br>
<br>
<input type="submit" value="submit" name="s1" />
<input type="reset" value="reset" />
</form>
</body>
This is my registration page. I would like to match the password and password confirmation fields with javascript, but it's not working.
What should I do?

The getElementsByName returns an array, so you need to grab the first element:
document.getElementsByName("pass")[0].value;
Better if you add ids to your inputs and use getElementById.

JavaScript Validation needed for this form, it does not work whatever I try

This form needs to calculate cost for each course (which is not done yet). It needs JavaScript Validation, and PHP for Username and Password info to go somewhere. The credentials will be used in a PHP login. Can you help?
<form form name="myform" id="myform" method="post">
<p>
<label for="name">Name</label>
<input type=text name="name" placeholder="Enter your full name" />
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female
</p>
<p>
<label for="birthday">Date of Birth</label>
<input type="date" name="bday" />
</p>
<p>
<label for="username">Create Username</label>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password" name="name">Password</label>
<input type="password" id="password" name="username" value="">
</p>
<p>
<label for="Comments">Address</label>
</p>
<textarea cols="40" rows="5" name="Address" id="address" placeholder="Address"></textarea>
<br>
<p>
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" placeholder="Enter your postcode" />
</p>
<p>
<label for="contactnumber">Contact Number</label>
<input type="number" id="contactnumber" placeholder="Enter your number" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your email" />
</label>
</p>
<p>
<label for="select">Select Course</label>
</p>
<select id="course" name="courses">
<option value="000" selected="selected">[Select course]</option>
<option value="screenplay">Screenplay FL0330 04-01-16</option>
<option value="camerawork">Camerawork FL566 05-01-16</option>
<option value="soundrecording">Sound Recording FB700 06-01-16</option>
<option value="lighting">Lighting FN250 11-01-16</option>
<option value="editing">Editing FB420 12-01-16</option>
<option value="3dgraphics">3D Graphics FA554 13-01-16</option>
<option value="makeup">Make up and Prosthetics FA128 15-01-16</option>
</select>
<br>
<input type="submit" name="submit" value="Submit Now">
</form>

Adding looped variables in Jquery and storing in input field [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I know nothing about Javascript/Jquery etc but using Google and people answers I am using the following to add x number of fields together and showing in a subtotal box.
The following script loops so each time you see a 1 that will increment each loop count. Meaning the totals for each count are displayed, editing any number will only update that section total.
var $form = $('#locations'),
$summands1 = $form.find('.addme1'),
$sumDisplay1 = $('#incoming1');
$form.delegate('.addme1', 'change', function () {
var sum = 0;
$summands1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay1.val(sum);
$summandsa1 = $form.find('.addmea1'),
$sumDisplaya1 = $('#outgoing1');
});
$form.delegate('.addmea1', 'change', function () {
var sum = 0;
$summandsa1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplaya1.val(sum);
});
This is an example form
<form id="locations" method='post' action=''>Loop 1
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="300" name="" id="incoming1">
<input type="text" value="600" name="" id="outgoing1">
<br>Loop 2
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="300" name="" id="incoming2">
<input type="text" value="600" name="" id="outgoing2">
<br>
<br>
<br>Total :
<input type="text" value="600" name="" id="totalin">
<input type="text" value="1200" name="" id="totalout"><br>
Profit :
<input type="text" value="600" name="" id="profit">
</form>
What I need is a way of adding the incoming1 incoming2 plus any other incomingx values there are and storing in totalin, likewise with outgoing1,2etc then having the profit update with totalout-totalin. So if a value is changed from what they are currently set it will automatically update all the other fields.
Can anyone help with this?
Fiddle here : http://jsfiddle.net/Gt473/3/
Note that loop 2 doesn't work as I am not sure how to repeat the script on jsfiddle but it does work on the html page.

I am not sure what your requirement was.But this is my take on it, the answer I posted mighty not what you are looking for.And also the code below can be written better but that's for you to research.
<form id="locations" method='post' action=''>
<fieldset class="level">
<legend>Loop1</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop2</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop3</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop4</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop5</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="total">
<legend>Total</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" id="totalIncoming" disabled>
<input type="text" value="" name="" id="totalOutgoing" disabled>
</fieldset>
<fieldset>
<legend>Profit</legend>
<input type="text" value="" name="" id="profit" disabled>
</fieldset>
</form>
var $form = $('#locations'),
$totalIncoming = $('#totalIncoming'),
$totalOutgoing = $('#totalOutgoing'),
$profit = $('#profit');
$form.on('input', '.level input', function () {
var textBoxClass = $(this).attr('class'),
$level = $(this).closest('.level'),
$subTextBox = null,
$totalTextBox = null,
$textBoxes = null,
$subTextBoxes = null,
subSum = 0,
totalSum = 0;
if(textBoxClass === 'incoming'){
$textBoxes = $level.find('.incoming');
$subTextBox = $level.find('.subIncoming');
$totalTextBox = $('#totalIncoming');
$subTextBoxes = $form.find('.subIncoming');
}else{
$textBoxes =$level.find('.outgoing');
$subTextBox = $level.find('.subOutgoing');
$totalTextBox = $('#totalOutgoing');
$subTextBoxes = $form.find('.subOutgoing');
}
$textBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) subSum += value;
});
$subTextBox.val(subSum);
$subTextBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) totalSum += value;
});
$totalTextBox.val(totalSum);
$profit.val($totalIncoming.val() - $totalOutgoing.val())
});