Develop Reference

Html-Javascript form Validation not working

I am trying to validate that all fields of my form are filled out with Javascript, but it is just not working. I am new to web development, any help is greatly appreciated. Here is my HTML:
<form name="form" action="actionFG.php" method="post" onsubmit="return val()";>
<p>First Quarter Grade:</p>
<select name = "q1"><option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Second Quarter Grade:</p>
<select name = "q2">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Third Quarter Grade:</p>
<select name = "q3">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Fourth Quarter Grade:</p>
<select name = "q4">
<option selected value="0" disabled="disabled"> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p><input type="submit" value="Enter"></p>
</form>
And here is my JavaScript:
function val(){
if (form.q1.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 1');
return false;
} else if (form.q2.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 2');
return false;
} else if (form.q3.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 3');
return false;
} else if (form.q4.selectedIndex == 0) {
alert('Please Enter Your Grade for Quarter 4');
return false;
}
return true;
}

Working code without javascript:
<form>
<p>First Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Second Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Third Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<p>Fourth Quarter Grade:</p>
<select required>
<option value=""> input grade</option>
<option value="1">A</option>
<option value="2">B+</option>
<option value="3">B</option>
<option value="4">C+</option>
<option value="5">C</option>
<option value="6">D</option>
<option value="7">F</option>
</select>
<button type="submit">submit</button>
</form>
I have just added the required attribute to the select elements, this marks them as required.
Edit
Added snippet instead of JS Bin - Thanks to evolutionxbox

Your code works for me. I had the < script > in the < head >.
Of course, I had to add this...
<input type="submit" />
</form>
Other than that, I got form validation and valid submit when all fields were filled in Chrome, IE and Firefox.

Here is a native HTML5 example how to get simple validation without using Javascript.
This simple example works fine without Javascript. What I 've done? The select elements got the required attribute. So a user has to select a value. If the value of these select elements is empty when the form is submitting, you will get an error message as a tooltip next to the empty select element.
This is the simplest way. Beyond that every modern browser handels the validation different. The tooltips with the error messages are displayed different from browser to browser. If you want a consistent layout, you have to deal with the Constraint Validation API of HTML5.
<form>
<p>
<label for="select-1">Select 1</label>
<select name="select-1" id="select-1" required>
<option hidden>choose</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</p>
<p>
<label for="select-2">Select 2</label>
<select name="select-2" id="select-2" required>
<option hidden>choose</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</p>
<button type="submit">submit</button>
</form>

JavaScript onsubmit validation not working properly when I click on submit it ask expiry date and CVV

I have problem with onsubmit JavaScript function. I set validation for CVV and expiry date. When I enter only CVV it's submitted without entering date but when I enter date it's also asking CVV but in CVV case its not asking expiry date.
<form name="card" method="post" onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);">
<table>
<tr>
<td> Expiry Date
<td>
<td>
<select id="exMonth" title="select a month">
<option value="0">Month
</option>
<option value="01">January
</option>
<option value="02">February
</option>
<option value="03">March
</option>
<option value="04">April
</option>
<option value="05">May
</option>
<option value="06">June
</option>
<option value="07">July
</option>
<option value="08">August
</option>
<option value="09">September
</option>
<option value="10">October
</option>
<option value="11">November
</option>
<option value="12">December
</option>
</select>
<select id="exYear" title="select a year">
<option value="0">Year
</option>
<option value="2016">2016
</option>
<option value="2017">2017
</option>
<option value="2018">2018
</option>
<option value="2019">2019
</option>
<option value="2020">2020
</option>
<option value="2021">2021
</option>
<option value="2022">2022
</option>
<option value="2023">2023
</option>
<option value="2024">2024
</option>
<option value="2025">2025
</option>
<option value="2026">2026
</option>
<option value="2027">2027
</option>
<option value="2028">2028
</option>
<option value="2029">2029
</option>
<option value="2030">2030
</option>
<option value="2031">2031
</option>
</select>
</td>
<tr>
<td>
<span id="invalidexpiry">
</span>
</td>
</tr>
<tr>
<td>
CVV
<input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" >
<span id="usernameError">
</span>
</td>
</tr>
<tr>
<td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />
</div>
</td>
</tr>
</table>
</form>
function validateexpiry()
{
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday
< today) {
document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
return false;
}
}
// cvv
function validate_cvv(cvv){
var myRe = /^[0-9]{3,4}$/;
if(cvv.value.match(myRe))
{
return true;
}
else (card.cvv.value.length==2)
{
document.getElementById('usernameError').innerHTML="Invalid CVV";//invalid cvv number
return false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recharge</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="header.css" text="text/css" rel="stylesheet">
<script src="time.js" type="text/javascript"></script>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<style type="text/css"></style>
<body>
<form name="card" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">
<table>
<tr>
<td> Expiry Date<td>
<td>
<select id="exMonth" title="select a month">
<option value="0">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="exYear" title="select a year">
<option value="0">Year</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" ><span id="usernameError"></span>
</td></tr>
<tr>
<td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />
</div>
</td>
</tr>
</form>

It's hard to give you a definite answer without seeing the code for validateexpirty and validate_cvv but my initial guess would be that your logic in validating is at fault:
onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);"
That should probably include && instead of ||.
The || operator works from left to right. That is, it will first evaluate validateexpiry() and if it returns true, rest of the expression will not be evaluated (because no matter what happens, the result will be true). If, on the other hand, it evaluates to false, only then the second part of the expression will be evaluated. This will keep on going until either a predicate returns true (in which case the expression will return true) or all predicates are evaluated to false (in which case the expression will return false).
EDIT: The answer is correct, the reason the answer doesn't work for you is because your CVV validation code is broken. After fixing up the HTML and JS snippets you posted in your question and comments here's what I have. It correctly works after fixing the errors.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recharge</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"></style>
<body>
<script>
function validateexpiry() {
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday < today) {
document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
return false;
}
return true;
}
function validate_cvv(cvv) {
var myRe = /^[0-9]{3,4}$/;
if(cvv.value.match(myRe)) {
return true;
} else {
document.getElementById('usernameError').innerHTML="Invalid CVV";
return false;
}
}
</script>
<form name="card" action="/" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">
<table>
<tr>
<td> Expiry Date<td>
<td>
<select id="exMonth" title="select a month">
<option value="0">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="exYear" title="select a year">
<option value="0">Year</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" ><span id="usernameError"></span>
</td></tr>
<tr>
<td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />
</div>
</td>
</tr>
</form>
</body>
</html>
Compare the corrected validation code to your version:
function validateexpiry()
{
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday < today) {
document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
return false;
}
}
function validate_cvv(cvv){
var myRe = /^[0-9]{3,4}$/;
if(cvv.value.match(myRe))
{
return true;
}
else (card.cvv.value.length==2)
{
document.getElementById('usernameError').innerHTML="Invalid CVV";
return false;
}
}
validateexpiry doesn't return if the value is correct, thus it returns undefined implicitly, which of course, evaluates to false in your onsubmit handler. There is also an error with how you create the selected date, it's always off by one but I didn't correct that.
validate_cvv has an outright syntax error. if ... else block's else doesn't take any conditions.

Should the validation be && instead of ||
onsubmit="return validateexpiry() && validate_cvv(document.card.cvv);"

Can you post also the validation made validateexpiry() and validate_cvv(document.card.cvv).
But my initial guest is that it should be
return validateexpiry() && validate_cvv(document.card.cvv);
Or your expiry date has default value 0 year and 0 month so validateexpiry might missed this one.

Javascript isn't working in jsp file

I am working on a web project using JSP, i have google a lot about this, found a similar problem without any solution !
Does the page is getting submitted before javascript executes or what.
Here is the code
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Registration</title>
<link rel="stylesheet" href="style.css">
<script>
fun1(field)
{
if(field.value==""){alert("enter name");}
}
</script>
</head>
<body id="html">
<form method=post action=registerUser.jsp><center>
<br><br>
<section class="registration_form" >
<table id="tab1" bgcolor="#ffffff" width="60%" height="320%">
<td width="10%"></td><td><h1>Register here</h1></td>
<tr><td width="20%"></td><td><label for="First Name">First Name</label>
<input type="First Name" id="usernametxtbox" name="FirstName" onblur="fun1(this)" placeholder="enter First Name" required>
</td></tr>
<tr><td width="20%"></td><td><label for="Last Name">Last Name</label>
<input type="Last Name" id="usernametxtbox" name="LastName" placeholder="enter Last Name" required>
</td>
</tr>
<tr><td width="20%"></td><td>
<label for="User Name">User Name</label>
<input type="User Name" id="txtbox" name="UserName" placeholder="enter User Name" required></td>
</tr>
<tr><td width="20%"></td>
<td><label for="usermail">Email</label>
<input type="email" id="txtbox" name="usermail" placeholder="yourname#email.com" required></td></tr>
<tr><td width="20%"></td><td>
<label for="password">Password</label>
<input type="password" id="txtbox" name="password" placeholder="password" required></td></tr>
<tr><td width="20%"></td><td><label for="re-enter password">re-enter Password</label>
<input type="password" id="txtbox" name="Re-enterpassword" placeholder="Re-enter password" required></td></tr>
<tr><td width="20%"></td><tr height="10%"><td></td></tr>
<tr><td width="20%"></td><td><label>Date of Birth:</label>
<select name=birthday>
<option> - Month - </option>
<option value="January">January</option>
<option value="Febuary">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="DOBDay">
<option> - Day - </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="DOBYear">
<option> - Year - </option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td><label>Gender:</label><input type="radio" name="gender" value="male" checked > Male
<input type="radio" name="gender" value="female"> Female</td>
</tr>
<tr><td width="20%"></td><td><input type="submit" value="register" id="butn">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</section>
</center>
</form>
</body>
</html>
check out the image(includes executed jsp page on a server) too,
Do i need to create any servlet controller, if, what should i change ?

Several issues
You need to use the function keyword: function fun1(field)...
Use the submit event instead of blur - ESPECIALLY when you alert in the blur.
IDs need to be unique! You cannot have two id="usernametxtbox"
Use quotes <form method="post" action="registerUser.jsp"><center>
You cannot use document.getElementById on fields that have no ID
I suggest the following:
...
<head>
<script>
window.onload=function() {
document.getElementById("myForm").onsubmit=function() {
if (this.FirstName.value=="") {
alert("Please enter name");
return false; // cancel submit
}
if (this.LastName.value=="") {
alert("Please enter name");
return false; // cancel submit
}
return true; // allow submit
}
}
</script>
using
<form id="myForm" method="post" action="registerUser.jsp">
Looking at your code, you likely want to do something like this:
FIDDLE
<form name="registration" method="post" action="login.jsp"
onsubmit="return validateform(this);">
function validateform(theForm) {
var First_Name = theForm.First_Name;
var Last_Name = theForm.Last_Name;
var UserName = theForm.UserName;
var phoneNo = theForm.phoneNo;
var password = theForm.password;
var reenter_password = theForm.reenter_password;
var email = theForm.email;
var gender = theForm.gender;
var title = theForm.title;
var day = theForm.dobday;
var month = theForm.dobmonth;
var year = theForm.dobyear;
var atposition = email.value.indexOf("#");
var dotposition = email.value.lastIndexOf(".");
if (First_Name.value == "") {
alert("Name can't be empty");
First_Name.focus();
return false;
}
if (!First_Name.value.match(/^[A-Za-z]+$/)) {
alert("name contains invalid Characters!");
First_Name.focus();
return false;
}
if (Last_Name.value == "") {
alert("Name can't be empty");
Last_Name.focus();
return false;
}
if (!Last_Name.value.match(/^[A-Za-z]+$/)) {
alert("name contains invalid Characters!");
Last_Name.focus();
return false;
}
if (title && (title.selectedIndex < 1 || title.options[title.selectedIndex].value == "")) {
alert("please select the title");
title.focus();
return false;
}
/* user name validation */
if (UserName.value == "") {
alert("user Name can't be empty");
UserName.focus();
return false;
}
/* phoneNo validation */
if (phoneNo.value == "") {
alert("phoneNo can't be empty");
phoneNo.focus();
return false;
}
if (!phoneNo.value.match(/^\d{10}$/)) {
alert("phoneNo should contain only 10 numbers!");
phoneNo.focus();
return false;
}
/* email validation */
if (email.value == "") {
alert("please enter your email");
email.focus();
return false;
}
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.value.length) {
alert("Please enter a valid e-mail address \n atpostion:" + atposition + "\n dotposition:" + dotposition);
email.focus();
return false;
}
/* password validation */
if (password.value == "") {
alert("password can't be empty");
password.focus();
return false;
}
if (password.value.length < 6) {
alert("Password must be at least 6 characters long.");
password.focus();
return false;
}
if (reenter_password.value == "") {
alert("please re-enter the password");
reenter_password.focus();
return false;
}
if (!password.value.match(reenter_password.value)) {
alert("password must be same!");
return false;
}
if (!gender[0].checked && !gender[1].checked) {
alert("please select your gender");
gender.focus();
return false;
}
if (day) {
if (day.selectedIndex < 1 || day.options[day.selectedIndex].value == "") {
alert("please select the day");
dobdate.focus();
return false;
}
}
if (month) {
if (month.selectedIndex < 1 || month.options[month.selectedIndex].value == "") {
alert("please select the month");
theForm.dobmonth.focus();
return false;
}
}
if (year) {
if (year.selectedIndex < 1 || year.options[year.selectedIndex].value == "") {
alert("please select the year");
theForm.dobyear.focus();
return false;
}
}
return true;
}

Calculating the cost for post and packaging its always out by a few pennies [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so this is my code.... basically I'm having the problem with the final sum... if you buy 1 gift one pixboard and select United Kingdom it should come to £18.48 but instead it comes to £17.50? I have looked through this, a more knowladagble person has looked through this briefly and couldn't find anything wrong so I'm hoping one of you geniuses on her would be able to help me solve this problem I'm having... much appreciated!
<!DOCTYPE html>
<!-- HTML Select Junior Example 0.4 -->
<!-- Please note the code on these pages are provided by WorldPay as working examples only. -->
<!-- Any changes you make to the copies of these pages will not be supported by WorldPay. -->
<!-- For further information on reading html see the supplied help section. -->
<html>
<!-- The name, style, and properties of the page are defined in the 'head' tags -->
<head>
<title>Pixboard Postage Price</title>
<meta http-equiv="Content-Type" content="text/html">
<meta name="description" content="Junior HTML Example 0.4">
<meta name="keywords" content="Junior, html">
<style type="text/css"> td {text-align:"left"; vertical-align:"middle"; font-family:"arial"; color:"black"} h1,h2,h3,h4,h5,h6,h7 {text-align:"center"; vertical-align:"middle"; font-family:"arial"; color:"black"}</style>
</head>
<!-- The content to be used on the page is placed between the 'body' tags. -->
<body>
<!-- This is a purchase token, for more information on the elements with in a purchase token see the supplied help section. -->
<!-- PLEASE NOTE: this is a test installation and values will require changing to reflect merchants requirements -->
<form action="https://secure-test.worldpay.com/wcc/purchase" method="post" name="BuyForm">
<input type="hidden" name="instId" value="211616"><!-- The "instId" value "0000000" should be replaced with the Merchant's own installation Id -->
<input type="hidden" name="cartId" value="abc123"><!-- This is a unique identifier for merchants use. Example: PRODUCT123 -->
<input type="hidden" name="currency" value="GBP"><!-- Choose appropriate currency that you would like to use -->
<input type="hidden" name="desc" value="">
<input type="hidden" name="testMode" value="100">
<!-- JavaScript is used to give functionality to some of the pages elements -->
<script language="JavaScript">
// The next two functions round numbers to numerical formatting. They do not need to be altered when adding or removing products.
function roundOff(value, precision)
{
return places(value,1,precision);
}
function places(X, M, N)
{
var T, S=new String(Math.round(X*Number("1e"+N)))
while (S.length<M+N) S='0'+S
var y = S.substr(0, T=(S.length-N));
if(N>0)
{
y += '.' + S.substr(T, N);
}
return y;
}
// This function checks for empty quantities. It does not need to be altered when adding or removing products.
function CheckNull(value)
{
if (value == "")
{
value = "0";
}
return value;
}
// This function defines the postage and packaging location. It does not need to be altered when adding or removing products.
function typeOfCarriage(x,whereabouts)
{
console.log(whereabouts);
x.carriage_amount.value = whereabouts;
}
// This function addeds the postage and packaging to the total price of the products. Add new postage rates here, and also edit further down the page to add them to the table.
function calculate(x)
{
basicprice = calc(x);
if(Number(basicprice) > 0)
{
console.log(basicprice);
switch (x.carriage_amount.value)
{
case "UK" :
postage_and_packaging = 3.50;
break
case "US" :
postage_and_packaging = 5.75;
break
// To add a new postage rate. Copy from here...
case "asia" :
postage_and_packaging = 5.75;
break
// ...to here, and paste directly below. Change the case country, and the postage price. You will also need to add the postage option you have created further down the page.
default :
postage_and_packaging = 8.75;
break;
}
x.amount.value = parseInt(basicprice) + Number(postage_and_packaging);
}
else
{
x.amount.value = "0";
}
x.amount.value = roundOff(x.amount.value,2);
}
// The standard price, exluding postage and packaging is calculated here. It does not need to be altered when adding or removing products. -->
function calc(x)
{
x.amount.value = 0;
var y = x.price.length;
var z = x.qty.length;
var a = Number(x.amount.value);
var b,c;
while(y > 0)
{
b = Number(CheckNull(x.price[y-1].value));
c = Number(CheckNull(x.qty[y-1].value));
a += (b * c);
y--;
}
return a;
}
</script>
<h1>Postage &amp Packaging</h1>
<!-- This table provides layout for the products listed. -->
<table cellPadding="3" border="2" align="center">
<tr>
<td colSpan="3"><b>Gift</b><input name="price" type="hidden" value="3.99"> - £3.99</td>
</tr>
<tr>
<td>Quantity: <input name="qty" size="3" value="0"></td>
</tr>
<tr>
<td colSpan="3"><b>195 x 295 Pixboard</b><input name="price" type="hidden" value="10.99"> - £10.99</td>
</tr>
<tr>
<td>Quantity: <input name="qty" size="3" value="1"></td>
</tr>
</table>
<br><br>
<!-- This table is used as the total calculator and postage and packaging selector. -->
<input name="carriage_amount" type="hidden" value="uk">
<table cellPadding="3" border=2 align="center">
<tr>
<td>
<select name=postage_and_packaging onchange="typeOfCarriage(this.form,this.value);calculate(this.form)">
<OPTION SELECTED VALUE="">Please select country</option>
<OPTION value='AF'>Afghanistan</option>
<OPTION value='AL'>Albania</option>
<OPTION value='DZ'>Algeria</option>
<OPTION value='AS'>American Samoa</option>
<OPTION value='AD'>Andorra</option>
<OPTION value='AO'>Angola</option>
<OPTION value='AI'>Anguilla</option>
<OPTION value='AQ'>Antarctica</option>
<OPTION value='AG'>Antigua and Barbuda</option>
<OPTION value='AR'>Argentina</option>
<OPTION value='AM'>Armenia</option>
<OPTION value='AW'>Aruba</option>
<OPTION value='AU'>Australia</option>
<OPTION value='AT'>Austria</option>
<OPTION value='AZ'>Azerbaijan</option>
<OPTION value='BS'>Bahamas</option>
<OPTION value='BH'>Bahrain</option>
<OPTION value='BD'>Bangladesh</option>
<OPTION value='BB'>Barbados</option>
<OPTION value='BY'>Belarus</option>
<OPTION value='BE'>Belgium</option>
<OPTION value='BZ'>Belize</option>
<OPTION value='BJ'>Benin</option>
<OPTION value='BM'>Bermuda</option>
<OPTION value='BT'>Bhutan</option>
<OPTION value='BO'>Bolivia</option>
<OPTION value='BA'>Bosnia and Herzegovina</option>
<OPTION value='BW'>Botswana</option>
<OPTION value='BV'>Bouvet Island</option>
<OPTION value='br'>brazil</option>
<OPTION value='IO'>british Indian Ocean Territory</option>
<OPTION value='BN'>brunei Darussalam</option>
<OPTION value='BG'>Bulgaria</option>
<OPTION value='BF'>Burkina Faso</option>
<OPTION value='BI'>Burundi</option>
<OPTION value='KH'>Cambodia</option>
<OPTION value='CM'>Cameroon</option>
<OPTION value='CA'>Canada</option>
<OPTION value='CV'>Cape Verde</option>
<OPTION value='KY'>Cayman Islands</option>
<OPTION value='CF'>Central African Republic</option>
<OPTION value='td'>Chad</option>
<OPTION value='CL'>Chile</option>
<OPTION value='CN'>China</option>
<OPTION value='CX'>Christmas Island</option>
<OPTION value='CC'>Cocos (Keeling) Islands</option>
<OPTION value='CO'>Colombia</option>
<OPTION value='KM'>Comoros</option>
<OPTION value='CG'>Congo</option>
<OPTION value='CK'>Cook Islands</option>
<OPTION value='CR'>Costa Rica</option>
<OPTION value='HR'>Croatia</option>
<OPTION value='CU'>Cuba</option>
<OPTION value='CY'>Cyprus</option>
<OPTION value='CZ'>Czech Republic</option>
<OPTION value='CI'>Côte d'Ivoire</option>
<OPTION value='DK'>Denmark</option>
<OPTION value='DJ'>Djibouti</option>
<OPTION value='DM'>Dominica</option>
<OPTION value='DO'>Dominican Republic</option>
<OPTION value='TP'>East Timor</option>
<OPTION value='EC'>Ecuador</option>
<OPTION value='EG'>Egypt</option>
<OPTION value='SV'>El salvador</option>
<OPTION value='GQ'>Equatorial Guinea</option>
<OPTION value='ER'>Eritrea</option>
<OPTION value='EE'>Estonia</option>
<OPTION value='ET'>Ethiopia</option>
<OPTION value='FK'>Falkland Islands</option>
<OPTION value='FO'>Faroe Islands</option>
<OPTION value='FJ'>Fiji</option>
<OPTION value='FI'>Finland</option>
<OPTION value='FR'>France</option>
<OPTION value='GF'>French Guiana</option>
<OPTION value='PF'>French Polynesia</option>
<OPTION value='TF'>French Southern Territories</option>
<OPTION value='GA'>Gabon</option>
<OPTION value='GM'>Gambia</option>
<OPTION value='GE'>Georgia</option>
<OPTION value='DE'>Germany</option>
<OPTION value='GH'>Ghana</option>
<OPTION value='GI'>Gibraltar</option>
<OPTION value='GR'>Greece</option>
<OPTION value='GL'>Greenland</option>
<OPTION value='GD'>Grenada</option>
<OPTION value='GP'>Guadeloupe</option>
<OPTION value='GU'>Guam</option>
<OPTION value='GT'>Guatemala</option>
<OPTION value='GN'>Guinea</option>
<OPTION value='GW'>Guinea-Bissau</option>
<OPTION value='GY'>Guyana</option>
<OPTION value='HT'>Haiti</option>
<OPTION value='HM'>Heard Island and McDonald Islands</option>
<OPTION value='VA'>Holy See (Vatican City State)</option>
<OPTION value='HN'>Honduras</option>
<OPTION value='HK'>Hong Kong</option>
<OPTION value='HU'>Hungary</option>
<OPTION value='IS'>Iceland</option>
<OPTION value='IN'>India</option>
<OPTION value='ID'>Indonesia</option>
<OPTION value='IR'>Iran</option>
<option value='IE'>Ireland</option>
<option value='IL'>Israel</option>
<option value='IT'>Italy</option>
<option value='JM'>Jamaica</option>
<option value='JP'>Japan</option>
<option value='JO'>Jordan</option>
<option value='KZ'>Kazakstan</option>
<option value='KE'>Kenya</option>
<option value='KI'>Kiribati</option>
<option value='KW'>Kuwait</option>
<option value='KG'>Kyrgystan</option>
<option value='LA'>Lao</option>
<option value='LV'>Latvia</option>
<option value='LB'>Lebanon</option>
<option value='LS'>Lesotho</option>
<option value='LR'>Liberia</option>
<option value='LY'>Libyan Arab Jamahiriya</option>
<option value='LI'>Liechtenstein</option>
<option value='LT'>Lithuania</option>
<option value='LU'>Luxembourg</option>
<option value='MO'>Macau</option>
<option value='MK'>Macedonia (FYR)</option>
<option value='MG'>Madagascar</option>
<option value='MW'>Malawi</option>
<option value='MY'>Malaysia</option>
<option value='MV'>Maldives</option>
<option value='ML'>Mali</option>
<option value='MT'>Malta</option>
<option value='MH'>Marshall Islands</option>
<option value='MQ'>Martinique</option>
<option value='MR'>Mauritania</option>
<option value='MU'>Mauritius</option>
<option value='YT'>Mayotte</option>
<option value='MX'>Mexico</option>
<option value='FM'>Micronesia</option>
<option value='MD'>Moldova</option>
<option value='MC'>Monaco</option>
<option value='MN'>Mongolia</option>
<option value='MS'>Montserrat</option>
<option value='MA'>Morocco</option>
<option value='MZ'>Mozambique</option>
<option value='MM'>Myanmar</option>
<option value='NA'>Namibia</option>
<option value='NR'>Nauru</option>
<option value='NP'>Nepal</option>
<option value='NL'>Netherlands</option>
<option value='AN'>Netherlands Antilles</option>
<option value='NT'>Neutral Zone</option>
<option value='NC'>New Caledonia</option>
<option value='NZ'>New Zealand</option>
<option value='NI'>Nicaragua</option>
<option value='NE'>Niger</option>
<option value='NG'>Nigeria</option>
<option value='NU'>Niue</option>
<option value='NF'>Norfolk Island</option>
<option value='KP'>North Korea</option>
<option value='MP'>Northern Mariana Islands</option>
<option value='NO'>Norway</option>
<option value='OM'>Oman</option>
<option value='PK'>Pakistan</option>
<option value='PW'>Palau</option>
<option value='PA'>Panama</option>
<option value='PG'>Papua New Guinea</option>
<option value='PY'>Paraguay</option>
<option value='PE'>Peru</option>
<option value='PH'>Philippines</option>
<option value='PN'>Pitcairn</option>
<option value='PL'>Poland</option>
<option value='PT'>Portugal</option>
<option value='PR'>Puerto Rico</option>
<option value='QA'>Qatar</option>
<option value='RE'>Reunion</option>
<option value='RO'>Romania</option>
<option value='RU'>Russian Federation</option>
<option value='RW'>Rwanda</option>
<option value='SH'>Saint Helena</option>
<option value='KN'>Saint Kitts and Nevis</option>
<option value='LC'>Saint Lucia</option>
<option value='PM'>Saint Pierre and Miquelon</option>
<option value='VC'>Saint Vincent and the Grenadines</option>
<option value='WS'>Samoa</option>
<option value='SM'>San Marino</option>
<option value='ST'>Sao Tome and Principe</option>
<option value='SA'>Saudi Arabia</option>
<option value='SN'>Senegal</option>
<option value='SC'>Seychelles</option>
<option value='SL'>Sierra Leone</option>
<option value='SG'>Singapore</option>
<option value='SK'>Slovakia</option>
<option value='SI'>Slovenia</option>
<option value='SB'>Solomon Islands</option>
<option value='SO'>Somalia</option>
<option value='ZA'>South Africa</option>
<option value='GS'>South Georgia</option>
<option value='KR'>South Korea</option>
<option value='ES'>Spain</option>
<option value='LK'>Sri Lanka</option>
<option value='SD'>Sudan</option>
<option value='SR'>Suriname</option>
<option value='SJ'>Svalbard and Jan Mayen Islands</option>
<option value='SZ'>Swaziland</option>
<option value='SE'>Sweden</option>
<option value='CH'>Switzerland</option>
<option value='SY'>Syria</option>
<option value='TW'>Taiwan</option>
<option value='TJ'>Tajikistan</option>
<option value='TZ'>Tanzania</option>
<option value='TH'>Thailand</option>
<option value='TG'>Togo</option>
<option value='TK'>Tokelau</option>
<option value='TO'>Tonga</option>
<option value='TT'>trinidad and Tobago</option>
<option value='TN'>Tunisia</option>
<option value='tr'>Turkey</option>
<option value='TM'>Turkmenistan</option>
<option value='TC'>Turks and Caicos Islands</option>
<option value='TV'>Tuvalu</option>
<option value='UG'>Uganda</option>
<option value='UA'>Ukraine</option>
<option value='AE'>United Arab Emirates</option>
<option value='UK'>United Kingdom</option>
<option value='UM'>United States Minor Outlying Islands</option>
<option value='US'>United States of America</option>
<option value='UY'>Uruguay</option>
<option value='UZ'>Uzbekistan</option>
<option value='VU'>Vanuatu</option>
<option value='VE'>Venezuela</option>
<option value='VN'>Viet Nam</option>
<option value='VG'>Virgin Islands (british)</option>
<option value='VI'>Virgin Islands (U.S.)</option>
<option value='WF'>Wallis and Futuna Islands</option>
<option value='EH'>Western Sahara</option>
<option value='YE'>Yemen</option>
<option value='YU'>Yugoslavia</option>
<option value='ZR'>Zaire</option>
<option value='ZM'>Zambia</option>
<option value='ZW'>Zimbabwe</option>
</select>
<p>
<input name="calcButton" onclick="calculate(this.form)" type=button value="Calculate Total">
<p>
<b>Total: £ </b><input name="amount" size=8 value="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
<p align="center">
<action="demo_form.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike"> Free Pen<br>
</p>
<!-- This generates a button that submits the information and send the user into the Worldpay payment pages. -->
<p align="center"><input type=submit value=Checkout onclick="calculate(this.form)"></p>
</form>
</body>
</html>

The ParseInt function only extracts the integer part.
In line 95:
x.amount.value = parseInt(basicprice) + Number(postage_and_packaging);
Change it to following:
x.amount.value = basicprice + Number(postage_and_packaging);

Trying to grab URL parameters, and POST them with form

I am trying to get a landing page grab the URL parameters. I have two hidden fields in the form that match the parameter names, but I can't seem to get this to work.
I need to grab the URL Parameters, and have them send with the rest of the form. The form's method="POST">
I need to do this with JavaScript, not PHP.
THANKS!
For instance, a URL will look like this:
http://mywebsite.com/qualify/new/?AFFILIATE_ID=-1&SUB_1=Test#
Here is my form code:
<html>
<head>
<script>
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
</script>
Please Choose an Insurance Type
Private / Group Insurance
Medicare / Medicaid
Secondary Insurance
<input type="text" name="phone" placeholder="Phone Number" required="required">
<select value="State" name="state" style="width:100%;height: 35px!important; margin-top: 10px!important;">
<option value="">Please Choose a State:</option>
<option value="Alabama">Alabama</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kentucky">Kentucky</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
</select>
<input type="number" min="18" max="64" step="1" name="birthdate" placeholder="Age" required="required" style="margin-bottom: 8px!important;">
<input type="text" name="insuranceComp" placeholder="Insurance Company" required="required">
<input type="text" name="memberID" placeholder="Member ID or Group Policy" required="required">
<input type="text" name="RxBin" placeholder="Rx Bin Number" required="required">
<input type="text" name="PcnNumber" placeholder="PCN Number" required="required">
<input type="text" name="groupID" placeholder="Rx Group ID" required="required">
<input type="hidden" name="SUB_1" value="">
<input type="hidden" name="AFFILIATE_ID" value="">
<button class="submit" style="width: 100%;">Submit Now</button>
</form>
</body>
</html>

If you mean GET values you can do this by either echoing the whole form with the variables in the appropriate places like so;
<?php
echo'
<input type="text" name="phone" placeholder="Phone Number" required="required">
<select value="State" name="state" style="width:100%;height: 35px!important; margin-top: 10px!important;">
<option value="">Please Choose a State:</option>
<option value="Alabama">Alabama</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kentucky">Kentucky</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
</select>
<input type="number" min="18" max="64" step="1" name="birthdate" placeholder="Age" required="required" style="margin-bottom: 8px!important;">
<input type="text" name="insuranceComp" placeholder="Insurance Company" required="required">
<input type="text" name="memberID" placeholder="Member ID or Group Policy" required="required">
<input type="text" name="RxBin" placeholder="Rx Bin Number" required="required">
<input type="text" name="PcnNumber" placeholder="PCN Number" required="required">
<input type="text" name="groupID" placeholder="Rx Group ID" required="required">
<input type="hidden" name="SUB_1" value="'.$_GET['value1'].'">
<input type="hidden" name="AFFILIATE_ID" value="'.$_GET['value2'].'">
<button class="submit" style="width: 100%;">Submit Now</button>
</form>
';
?>
Alternatively you could echo only the hidden fields, like so;
<?php
echo'
<input type="hidden" name="SUB_1" value="'.$_GET['value1'].'">
<input type="hidden" name="AFFILIATE_ID" value="'.$_GET['value2'].'">
';
?>

Your conceptual approach seems reasonably sound, just a few implementation issues. The code might look something like this:
$(document).ready(function () {
if(window.location.search && window.location.search.indexOf('&') !== -1) {
var pairs = window.location.search.replace('?', '').split('&');
$.each(pairs, function (index, pair) {
var parameter = pair.split('=')[0];
var value = pair.split('=')[1];
if(parameter === 'AFFILIATE_ID' || parameter === 'SUB_1') {
$('input[name="' + parameter + '"]').val(value);
}
});
}
});
NOTE: this answer uses jQuery, which in this situation would probably be best for browser compatability, but I can post a pure JS solution if you need one.

Your code works. You just need to add the part that populates your form fields:
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
var returnval = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
// populate form fields
$("[name='"+name+"']").val( returnval );
return returnval;
}
// fire your function when the form submits
$(function(){
$('#contact-form').on('submit',function(){
getParameterByName('AFFILIATE_ID');
getParameterByName('SUB_1');
});
});