Develop Reference

Transfer data from input to another input

I have some inputs. "input and select" data in the id value of "customer-1", I want to match and transfer with "class" value if click add button.
For example, id="customer-1" "input and select" data in, I want it imported into class="customer-1".
$('.customer-add').click(function(){
var customer_id = $('.customer-add').closest('.customer-bar').find("input").attr("id");
$("." + customer_id).val($("#" + customer_id).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-1">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-1">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
<br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-2">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-2">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
I updated my code. I was able to transfer a single input, but I have to transfer them all

Change id to class
use closest and next
I assume you meant copy from customer1 to customer2
I cannot make a working snippet because you have the same IDs and no names, but the code will look this this
$(function() {
$(".customer-add").on("click",function() {
const $container = $(this).closest(".customer-bar")
const $nextContainer = $container.next(".customer-bar")
const $currentElements = $(":input",$container);
const $nextElements = $(":input",$nextContainer);
$currentElements.each(function(i) {
console.log(i,$(this).attr("class"))
$nextElements.eq(i).val($(this).val())
})
})
})

I updated my code. I was able to transfer a single input, but I have to transfer them all

How to add and delete the multiple form field based on selection in php

I create the form with multiple form field.I have the Form Fields are Name,Mobile,Email and No Of Referrer. Based on selection option(No Of Referrer)....
Here i create the form for Refer and earn for student admission process.... when the user select no of referrer as 2 i need to show reference details fields 2 times if change again 1 means show the field one time.... After select the No of Referrer field i show the following field Name,Email,Mobile,City,Course...
$(document).ready(function() {
toggleFields();
$("#select_btn").change(function() {
toggleFields();
});
});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
if ($("#select_btn").val() <= 5 && $("#select_btn").val() != 0)
$("#parentPermission").show();
else
$("#parentPermission").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="parentPermission">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
Now it is the form field....But does not dynamically shows the form field based on selection... For example if i select No of Referrer option is 2 then need to show the form field 2 times... change it 3 means show 3 times,change to 1 means show only one times... How to do show and hide the form field based on the selection???

You need to use $('div').clone().html(). See the below working solution and it has some changes in html.
$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>

This could be realized via .clone() and editing ids / names of the cloned objects. Alternatively: Your #select_btn already has number values for it, use them in a foreach to directly modify the html() output.

$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>

Submit and Change jquery code rewrite

This code determines whether the form elements e.g. input fields, radio buttons and select fields have an attribute called required="required" then the jquery and add an error accordingly.
If the input field then has a value, then the change listener, should automatically remove the error.
The code works fine - However, its not been written well. There are lots of things being repeated.
What would be the best way of optimising the code?
$(document).ready(function() {
var count = 0;
$(".form-unique").attr('novalidate', "");
$('.form-unique').on('submit change', function(e) {
if (count > 0) {
$(this).find('.error-message').remove();
e.preventDefault();
console.log($('.supererror').length);
var dateField = $(".form-unique").find('#date-year').parent();
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
});
}
});
$('.form-unique').on('submit', function(e) {
count++;
if (count == 1) {
$(this).find('.myaccount-invalid-email-content').remove();
e.preventDefault();
console.log($('.supererror').length);
var _this = $(this);
var checkboxes = [];
_this.find(':input').each(function(i, val) {
$(this).css('border', 'transparent');
if ($(this).attr('required')) {
if ($(this).val() != '') {
$(this).removeClass('supererror');
if ($(this).attr('type') == "checkbox" || $(this).attr('type') == "radio") {
var checkboxName = $(this).attr('name');
if (checkboxes.indexOf(checkboxName) == -1) {
checkboxes.push(checkboxName);
var selector = "input:checked[type='radio'][name='" + $(this).attr('name') + "']";
if ($(selector).length == 0) {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
}
}
}
} else {
var superb = $(this).closest('div').find('label').text();
superb = superb.replace(/\*/g, '').replace(/\:/g, '');
$("input[type='checkbox'][name='submitted[yes_no]']").change(function() {
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
});
$(this).addClass('supererror').css('border', '3px solid red');
$(this).parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
if ($(".moving-out-date-year").val() == "" || $(".moving-out-date-month").val() == "" || $(".moving-out-date-day").val() == "") {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
$(".form-unique").find('.moving-out-date-year').parent().prepend('<div class="error-message"><div class="messages error login-error-msg-div">ERROR - This is an error.</div></div>');
} else {
$(".form-unique").find('.moving-out-date-year').parent().find(".myaccount-invalid-email-content").remove();
}
}
}
});
}
if ($('.supererror').length == 0) {
$('.form-unique').off();
$('.form-unique').submit();
}
});
});
.supererror{
border: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form action="/" novalidate="" class="form-unique">
<div class="main-content">
<div class="new-markup">
<h3>Your contact details</h3>
</div>
<div class="name">
<label for="name">Full name: <span class="form-required">*</span></label>
<input id="name" required="required" type="text" name="submitted[name]" value="" class="form-text required"/>
</div>
<div class="new-e-mail-1">
<label for="e-mail-1">Email address: <span class="form-required">*</span></label>
<input id="e-mail-1" required="required" type="text" name="submitted[new_e_mail_1]" value="" class="form-text required"/>
</div>
<div class="phone-1">
<label for="phone-1">Phone number: <span class="form-required">*</span></label>
<input id="phone-1" required="required" type="text" name="submitted[phone_1]" value="" class="form-text required"/>
</div>
<div class="webform-component-markup moving-out">
<h3>Moving out</h3>
</div>
<div class="address-line-1">
<label for="address-line-1">House name/number: <span class="form-required">*</span></label>
<input id="address-line-1" required="required" type="text" name="submitted[address_line_1]" value="" class="form-text required"/>
</div>
<div class="address-line-2">
<label for="address-line-2">Street: <span class="form-required">*</span></label>
<input id="address-line-2" required="required" type="text" name="submitted[address_line_2]" value="" class="form-text required"/>
</div>
<div class="town-city">
<label for="town-city">District: </label>
<input id="town-city" type="text" name="submitted[town_city]" value="" class="form-text"/>
</div>
<div class="city">
<label for="city">City: </label>
<input id="city" type="text" name="submitted[city]" value="" class="form-text"/>
</div>
<div class="postcode2">
<label for="postcode2">Postcode: </label>
<input id="postcode2" type="text" name="submitted[postcode2]" value="" class="form-text"/>
</div>
<div class="webform-component-markup moving-date">
<h3>date</h3>
</div>
<div class="webform-component-date moving-out-date">
<label for="moving-out-date">Moving out date: <span class="form-required">*</span></label>
<div class="webform-container-inline webform-datepicker">
<label for="moving-out-date-year" class="element-invisible">Year </label>
<select id="moving-out-date-year" required="required" name="submitted[moving_out_date][year]" class="year form-select">
<option value="" selected="selected">Year</option>
<option value="2015">2015</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>
</select>
<label for="moving-out-date-month" class="element-invisible">Month </label>
<select id="moving-out-date-month" required="required" name="submitted[moving_out_date][month]" class="month form-select">
<option value="" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<label for="moving-out-date-day" class="element-invisible">Day </label>
<select id="moving-out-date-day" required="required" name="submitted[moving_out_date][day]" class="day form-select">
<option value="" selected="selected">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>
<input id="dp1452155277044" type="image" src="/sites/all/modules/contrib/webform/images/calendar.png" alt="Open popup calendar" title="Open popup calendar" class="webform-calendar webform-calendar-start-2015-12-24 webform-calendar-end-2021-01-07 webform-calendar-day-0 hasDatepicker"/>
</div>
</div>
<div class="webform-component-markup new-address">
<h3>New address</h3>
</div>
<div class="addressnew-line-1">
<label for="addressnew-line-1">House name/number: </label>
<input id="addressnew-line-1" type="text" name="submitted[addressnew_line_1]" value="" class="form-text"/>
</div>
<div class="addressnew-line-2">
<label for="addressnew-line-2">Street: </label>
<input id="addressnew-line-2" type="text" name="submitted[addressnew_line_2]" value="" class="form-text"/>
</div>
<div class="town-city-new">
<label for="town-city-new">District: </label>
<input id="town-city-new" type="text" name="submitted[town_city_new]" value="" class="form-text"/>
</div>
<div class="county-new">
<label for="county-new">City: </label>
<input id="county-new" type="text" name="submitted[county_new]" value="" class="form-text"/>
</div>
<div class="postcode3">
<label for="postcode3">Postcode: </label>
<input id="postcode3" type="text" name="submitted[postcode3]" value="" class="form-text"/>
</div>
<div class="webform-component-markup take-us-with-you">
<h3>Take us with you</h3>
</div>
<div>
<label for="yes-no">yes?: </label>
<div id="yes-no" class="form-radios webform-radio-buttons">
<input id="yes-no-1" type="radio" name="submitted[yes_no]" value="1" class="webform-radio-buttons form-radio"/>
<label for="yes-no-1" class="option">No </label>
<input id="yes-no-2" type="radio" name="submitted[yes_no]" value="2" class="webform-radio-buttons form-radio"/>
<label for="yes-no-2" class="option">Yes </label>
</div>
</div>
<div class="form-actions">
<input type="submit" name="op" value="Submit" class="webform-submit button-primary form-submit"/>
</div>
</div>
</form>

$("form")[0].checkValidity() checks for form validity on modern browsers :P
Besides that it's indeed recommend to post this on codereview. There's nough to improve, too many ifs nested, full html variables in the code that can be replaced with a function which returns a html string that has a classname and text value input.

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');
});
});

javascript form validation if element exist

Im making a form validation and im creating a dom dynamically but when I press the submit button to create the error it is calling the element multiple times instead of once. So how can I make it call it once? Im a little lost on this one.
Javascript:
function validateForm(){
var xfields=document.forms["form1"]["amt"].value;
if (xfields==null || xfields==""){
var errortag = document.createElement('label');
var realinput = document.getElementById('amt');
var errortagname = 'error';
errortag.setAttribute('class',errortagname);
errortag.innerHTML = 'Amount of loan needed';
var adddiv = document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling);
if(adddiv === true){
document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling);
return false;
}else{
xfields.remove('errortag');
}
}
return true;
}
HTML
<div id="st-widget" style=" width: 393px; padding-bottom: 0;">
<form class="ui-form ui-widget-form" id="short_form" method="get" name="form1" target="_blank" onsubmit="return validateForm()">
<input type="hidden" > <input id="scl" name="scl" type="hidden" value="">
<input name="optInQ" type="hidden" value="t">
<input name="inplst" type="hidden" value="BSGAEOZ">
<div class="grad-date" style="clear:left; #width:138px;">
<label for="gradDate">When will you graduate?</label>
<select id="gradDate" name="gradDate" style="width:46px !important;" tabindex="10" title="Month">
<option selected="selected" value="">Month</option>
<option value="January">January</option>
<option value="February">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 id="grad-month" name="gradDate" style="width:46px !important;" tabindex="15" title="Year">
<option selected="selected" value="">Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</div>
<div id="amtloan" class="amount">
<label for="amt">Amount of loan needed?</label>
<input class="amt-input required" id="amt" name="amt" style="width:137px;" tabindex="20" title="Amount of loan needed" type="text" value="">
</div>
<div class="ui-form-action" style="margin-top:18px;">
<button class="ui-btn button" id="" name="go" tabindex="35" title="GO" type="submit" value="Submit">
<span class="ui-btn-ctn medium">Continue </span>
</button>
</div>
</form></div></div>

This line
var adddiv = document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling);
causes the errortag to be inserted every time you call the validator function. Try
//...
var adddiv = document.getElementsByClassName(errortagname).length == 0;
if(adddiv === true){
document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling);
}
return false;
}
Not sure what the else clause is supposed to do though.
There is a lot of potential for improvement, but I think Stackoverflow is not the right place to discuss the code in great detail.