Close button on lightbox is not working - javascript

I have a light box on Request a Quote button. But when i click on close button it doesn't close the lightbox
http://expedition2india.com/tour_packages.php?destination=&package=26&tab=include&page_id=#placeholder
<div id="inline_content" style="display:none;">
<div class="trans"></div>
<div class="popup">
<div class="head left">CloseT
<h2>Request a Quote</h2>
<p>Fill out the form below to request a quote.</p>
</div>
<div id="preloader"><img src="<?php echo SITE_URL; ?>images/preloader.gif" /></div>
<form id="reg-form" class="formular" method="post" action="">
<table cellpadding="0" width="100%" cellspacing="0" border="0" class="left" style="padding:20px;">
<tr><td style="font-family:'Trebuchet MS', verdana; font-size:12px; font-weight:bold"><strong>Selected Tour:</strong> <span class="selected_tour"><?php echo $tour['package_name']; ?></span></td></tr>
<!--<tr><td style="font-family:'Trebuchet MS', verdana; font-size:12px; font-weight:bold"><strong>Selected Date:</strong> <span class="selected_date"></span></td></tr> -->
<tr><td><input type="text" name="cname" id="cname" class="textbox2bg validate[required,minSize[3],maxSize[50]] text-input" placeholder="Name" /></td></tr>
<tr><td><input type="text" name="email" id="email" class="textbox2bg validate[required,custom[email]] text-input" placeholder="Email Id" /></td></tr>
<tr><td><input type="text" name="phone" id="phone" placeholder="Phone" class="validate[required,custom[phone]] text-input"/></td></tr>
<tr>
<td><select name="travelMonth" id="travelMonth" class="textarea2bg validate[required] text-input">
<option value="" selected="selected">Select Travel month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</td>
</tr>
<tr>
<td><select name="adults" id="adults" class="textarea2bg validate[required] text-input">
<option value="" selected="selected">Select No. of Adults</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="10">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="20+">20+</option>
</select>
</td>
</tr>
<tr>
<td><select name="child" id="child">
<option value="" selected="selected">Select No. of Children</option>
<option value="0">0</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>
</select>
</td>
</tr>
<tr>
<td><select name="hotel_type" id="hotel_type" class="textarea2bg validate[required] text-input">
<option value="" selected="selected">Select Hotel Types</option>
<option value="first_class">First Class</option>
<option value="deluxe">Deluxe</option>
<option value="Oppulent">Oppulent</option>
</select>
</td>
</tr>
<tr>
<td><textarea name="otherinfo" id="otherinfo" placeholder="Other Information"></textarea><input type="hidden" name="selected_date" id="selected_date" /></td></tr>
<tr><td><input type="hidden" value="<?php echo $tour['id']; ?>" name="tour" id="tour" /><input type="submit" name="Submit" id="submit" class="bt" value="Submit" /></td></tr>
</table>
</form>
<div id="thanks"></div>
</div>
</div>


The thing you want to delete simply can hide or removed from DOM.
Tried this way
$("#Iwanttohide").hide()
$("#Iwanttohide").html("");
You can also tried fadeout to hide the elements with fade animation.

Related

jQuery How to display the hidden Nxt button when there's a value in Input Type

I would like to know if there's a value in the Input. If there is, the NEXT button will display.
Here's my logic
$('.regform input').on('click', function() {
if($(".firstname").val()!="" && $(".email").val()!="" && $(".password").val()!="") {
$(".submit .myButton").css({
display: "block",
visibility: "visible"
}
)};
});
This is a 5 step form. Currently, the Next Button is display none. So when the step in on the Input type, the Next Button is display none. But when you insert values on Input type, the button will reveal.
Here's my html
<form id="regform" method="post" action="http://blahblah.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man"></div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman"></div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</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="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
<div class="submit">
<input type="button" class="myButton" value="Next">
</div>
Please help me with this situation.

First you need to attach event handler to keypress event of inputs, click event won't work here. Then your selectors for inputs is wrong, you are using class selectors but you need to select using name. something like this works:
$('#regform input').on('keypress', function() {
if($("[name='firstname']").val()!="" && $("[name='email']").val()!="" && $("[name='password']").val()!="") {
$(".submit .myButton").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="regform" method="post" action="http://blahblah.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man"></div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman"></div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</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="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
<div class="submit">
<input type="button" class="myButton" value="Next" style="display:none;">
</div>

$('.regform input').on('click', function() {
if($(".firstname").val()!="" && $(".email").val()!="" && $(".password").val()!="") {
$(".submit .myButton").show();
)};
});

Show a alert message when pressing button without exiting the modal form

I have a signup modal form and I want the users to get an alert message if there are fields empty when they press the register button.
I can't really figure it out how to do it.
As I said in my previous posts I am new to coding so please be patient with me.
Thank you!
<div class="modal fade" id="signUp" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="text-center"><i class="fa fa-user-plus" aria-hidden="true"></i> Registro</h3>
</div>
<div class="modal-body">
<form action="" name="registerform" id="signup1" method="POST" role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="name"><i class="fa fa-user-circle" aria-hidden="true"></i> Nombres</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Ingresa tu(s) nombre(s)">
<span id="nameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lname"><i class="fa fa-user-circle" aria-hidden="true"></i> Apellidos</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Ingresa tus apellidos">
<span id="lnameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
</div>
<div class="form-group" id="genero">
<div class="btn-group" data-toggle="buttons">
<label for="masculino" class="btn btn-default active">
<input type="radio" name="genero" id="masculino" autocomplete="off" checked value="M">
Masculino
</label>
<label for="femenino" class="btn btn-default">
<input type="radio" name="genero" id="femenino" autocomplete="off" value="F">
Femenino
</label>
</div>
</div>
<div class="form-group">
<label for="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Correo electronico</label><span id="resultmail"></span>
<input type="email" class="form-control" name="email" id="email" placeholder="Ingresa tu correo electronico" autocomplete="off">
</div>
<div class="form-group">
<label for="user"><i class="fa fa-user" aria-hidden="true"></i> Usuario</label><span id="result"></span>
<input type="text" class="form-control" name="user" id="user" placeholder="Ingresa tu usuario" autocomplete="off">
</div>
<div class="form-group">
<label><i class="fa fa-birthday-cake" aria-hidden="true"></i> Fecha de nacimiento</label>
<div class="row" id="fecha">
<div class="col-xs-4">
<select class="form-control btn-default custom" name="day">
<option hidden>Dia</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>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="month">
<option hidden>Mes</option>
<option value="01">Enero</option>
<option value="02">Febrero</option>
<option value="03">Marzo</option>
<option value="04">Abril</option>
<option value="05">Mayo</option>
<option value="06">Junio</option>
<option value="07">Julio</option>
<option value="08">Agosto</option>
<option value="09">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="year">
<option hidden>Año</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</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">1954</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>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="password"><i class="fa fa-eye" aria-hidden="true"></i> Contrasena</label><span id="resultpass"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Ingresa tu contrasena" autocomplete="off">
</div>
<div class="form-group">
<label for="cpassword"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Confirma tu contrasena</label><span id="resultcpass"></span>
<input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Vuelve a ingresar tu contrasena" autocomplete="off">
</div>
</div>
<div class="modal-footer">
<input type="submit" id="btnregistrar" name="register" class="btn btn-default" value="Registrar"></input>
<button type="button" id="btncerrar1" id="reset" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</form>
</div>
</div>

jquery chosen plugin with dynamic table

I'm using the jQuery plugin chosen. I have that working as I want. My issue is using it with a dynamic table. The initial row works but when a new row is added to the table the newly added chosen doesn't work. I did find a question on here about using .on but am completely lost as to how to go about this.
jQuery Code for chosen plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script>
$(function() {
$(".chzn-select").chosen();
});
</script>
HTML CODE
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>
JS code for adding rows to table
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
</script>

hey, I know i'm little late but you need to destroy your chosen and
then append and recontruct it like this:
$(function() {
$(".chzn-select").chosen();
});
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append
$(".chzn-select").chosen("destroy")
var clone = $('#newId').get(0).outerHTML;
var tblRow = '<tr><td> <input type="text"></td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td>'+$("#selectJob").html()+'</td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td >'+clone+'</td>';
tblRow += '<td </td> <td </td> ';
tblRow+='</tr>';
$("#myTable").append(tblRow);
$('.chzn-select').chosen()
}
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet" type="text/css">
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value=" " readonly>
</td>
<td>
<input type="text" name="UnitID[]" value=" " readonly>
</td>
<td>
<div id="selectJob">
<select id="JobCode" name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</div>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" id="newId" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>

Validate my HTMK form field after my checkbox is checked

I have created an html form with hidden fields that shows after checking checkbox. I want to validate these hidden fields when the checkbox is checked.
style:
.box {
display:none;
}
here javascript code:
$(document).ready(function(){
$('input[type="checkbox"]').click(function() {
if($(this).attr("value")=="red") {
$(".box").toggle();
}
});
});
<form action="thankyou.php" method="post" name="form9" >
<label>First Name:* </label><input type="text" class="FullContactFields" name="Firstname" required title="Specify your first name"> <br><br>
<label>Last Name:* </label><input type="text" class="FullContactFields" name="Lastname" required title="Specify your last name" > <br><br>
<label>Phone:* </label><input type="text" pattern=".{10}|.{10}" required title="Enter your correct 10 digit phone number" class="FullContactFields" name="UserPhone" required ><br><br>
<label>Email:* </label><input type="email" class="FullContactFields" name="UserEmail" required title="Specify your correct email address." ><br><br>
<div class="checkbox">
<input id="check1" type="checkbox" name="colorCheckbox" value="red">
<label for="check1" class="CheckboxLabel">I would also like quotes for moving my vehicle</label>
</div>
<div class="box">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<td width="52%" valign="top" class="txtmatterarl2" rowspan="2">
</td></tbody></table>
<div style="display: block; color:#fff; padding: 28px 0 0 4px;" id="autozone" fade="1" speed="400">
<!--hide /show -->
<table width="100%" cellspacing="1" cellpadding="1" border="0">
<tbody><tr>
<td width="6%" align="left"> </td>
<td width="16%" align="left"><b><font color="#fff" class="headingcontact">Vehicle Details:</font></b></td>
<td width="7%" align="left"> </td>
<td width="71%" align="left" nowrap="nowrap"><b><font color="#fff" class="headingcontact">Vehicle #2 (Optional):</font></b></td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left">
<select onChange="FillList()" class="TextBox3 nish" id="vehicle1_make" size="1" name="vehicle1_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left" >
<select onChange="FillList2()" class="TextBox3 nish" id="vehicle2_make" size="1" name="vehicle2_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left">
<select class="TextBox3 nish" id="vehicle1_model" name="vehicle1_model" >
<option value="0"> Please Select </option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left" style="padding: 10px 0 12px;">
<select class="TextBox3 nish" id="vehicle2_model" name="vehicle2_model">
<option value="0"> Please Select </option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle1_year" class="TextBox3 nish" name="vehicle1_year"></td>
<td align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle2_year" class="TextBox3 nish" name="vehicle2_year"></td>
</tr>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
</tbody></table>
</div>
</div>
<input type="hidden" name="subid" id="subid" value='<?php echo $subid; ?>'/><input type="submit" value="Get Your FREE Quotes" class="OrangeButton"></td>
</form>
</div></div>

$('form[name="form9"]').on('submit', function () {
var subidValue = $("#subid").val();
// Now do all the validations that you want to do on the value stored in the variable subidValue
});
$('input[type="checkbox"]').click(function() {
if($(this).attr("value")=="red") {
$(".box").toggle();
// Get/Select all the fields that you want to validate right here and run the validations...
}
});
register click event for all the checkboxes
if the value of the clicked checkbox is 'red'
then select all the elements with class 'box' and toggle them
after this since you have landed in a place where the checkbox with value 'red' is clicked, now you can write your validation code.
Hope this explains...

$('form[name="form9"]').on('submit', function () {
var subidValue = $("#subid").val();
// Now do all the validations that you want to do on the value stored in the variable subidValue
});

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

Categories

Resources