Trying to grab URL parameters, and POST them with form

Trying to grab URL parameters, and POST them with form - javascript

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

Related

How to reinitialize detailsAttribute onchange country from dropdown?

I am using geocompelete js library to fetch location from google but when i change the country from dropdown list it will showing the previous selected country results so i want to reinitialize the detailsAttribute when i select another country here is my js code.
I also add my raw html here you can see and give a best solution. Thanks
$(document).ready(function(){
$("#user_country_id").change(function() {
value =$("#user_country_id").find(':selected').attr('alpha_code');
$("#user_address").geocomplete({
componentRestrictions: {country: value},
details: "form",
detailsAttribute: "user-data-geo"
})
});
});
<form class="simple_form form" id="new_user" novalidate="novalidate" enctype="multipart/form-data" action="/admin/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="oEnMXiVNKoFizscwtSaRzEyGSQjBaBKdoU9oldGVASbGJUsCbNVJ/jZ8kIUs5110y4KSy/OhEWSYEEN0lfgMKg=="><div class="input string required user_first_name"><label class="string required" for="user_first_name"><abbr title="required">*</abbr> First name</label><input class="string required" required="required" aria-required="true" type="text" name="user[first_name]" id="user_first_name"></div>
<div class="input string required user_last_name"><label class="string required" for="user_last_name"><abbr title="required">*</abbr> Last name</label><input class="string required" required="required" aria-required="true" type="text" name="user[last_name]" id="user_last_name"></div>
<div class="input email required user_email"><label class="email required" for="user_email"><abbr title="required">*</abbr> Email</label><input class="string email required" required="required" aria-required="true" type="email" value="" name="user[email]" id="user_email"></div>
<div class="input hidden user_role field_without_errors"><input value="Trainer" class="hidden" type="hidden" name="user[role]" id="user_role"></div>
<div class="input boolean required user_is_active field_without_errors"><input value="0" type="hidden" name="user[is_active]"><label class="boolean required checkbox" for="user_is_active"><input class="boolean required" required="required" aria-required="true" type="checkbox" value="1" checked="checked" name="user[is_active]" id="user_is_active"><abbr title="required">*</abbr> Is active</label></div>
<div class="input integer optional user_country_id"><label class="integer optional" for="user_country_id">Country</label><select name="user[country_id]" id="user_country_id"><option value="">Select a Country</option>
<option alpha_code="AFG" value="244">Afghanistan</option>
<option alpha_code="ALA" value="4">Åland Islands</option>
<option alpha_code="ALB" value="240">Albania</option>
<option alpha_code="DZA" value="8">Algeria</option>
<option alpha_code="ASM" value="243">American Samoa</option>
<option alpha_code="AND" value="246">Andorra</option>
<option alpha_code="AGO" value="241">Angola</option>
<option alpha_code="AIA" value="5">Anguilla</option>
<option alpha_code="ATA" value="245">Antarctica</option>
<option alpha_code="ATG" value="242">Antigua and Barbuda</option>
<option alpha_code="ARG" value="1">Argentina</option>
<option alpha_code="ARM" value="9">Armenia</option>
<option alpha_code="ABW" value="2">Aruba</option>
<option alpha_code="AUS" value="7">Australia</option>
<option alpha_code="AUT" value="6">Austria</option>
<option alpha_code="AZE" value="3">Azerbaijan</option>
<option alpha_code="BHS" value="10">Bahamas</option>
<option alpha_code="BHR" value="11">Bahrain</option>
<option alpha_code="BGD" value="13">Bangladesh</option>
<option alpha_code="BRB" value="12">Barbados</option>
<option alpha_code="BLR" value="14">Belarus</option>
<option alpha_code="BEL" value="15">Belgium</option>
<option alpha_code="BLZ" value="16">Belize</option>
<option alpha_code="BEN" value="17">Benin</option>
<option alpha_code="BMU" value="18">Bermuda</option>
<option alpha_code="BTN" value="19">Bhutan</option>
<option alpha_code="BOL" value="20">Bolivia (Plurinational State of)</option>
<option alpha_code="BES" value="21">Bonaire, Sint Eustatius and Saba</option>
<option alpha_code="BIH" value="22">Bosnia and Herzegovina</option>
<option alpha_code="BWA" value="23">Botswana</option>
<option alpha_code="BRA" value="24">Brazil</option>
<option alpha_code="IOT" value="25">British Indian Ocean Territory</option>
<option alpha_code="BRN" value="28">Brunei Darussalam</option>
<option alpha_code="BGR" value="29">Bulgaria</option>
<option alpha_code="BFA" value="30">Burkina Faso</option>
<option alpha_code="BDI" value="31">Burundi</option>
<option alpha_code="CPV" value="35">Cabo Verde</option>
<option alpha_code="KHM" value="32">Cambodia</option>
<option alpha_code="CMR" value="33">Cameroon</option>
<option alpha_code="CAN" value="34">Canada</option>
<option alpha_code="CYM" value="36">Cayman Islands</option>
<option alpha_code="CAF" value="38">Central African Republic</option>
<option alpha_code="TCD" value="39">Chad</option>
<option alpha_code="CHL" value="37">Chile</option>
<option alpha_code="CHN" value="40">China</option>
<option alpha_code="CXR" value="41">Christmas Island</option>
<option alpha_code="CCK" value="42">Cocos (Keeling) Islands</option>
<option alpha_code="COL" value="43">Colombia</option>
<option alpha_code="COM" value="44">Comoros</option>
<option alpha_code="COG" value="45">Congo</option>
<option alpha_code="COD" value="46">Congo (Democratic Republic of the)</option>
<option alpha_code="COK" value="47">Cook Islands</option>
<option alpha_code="CRI" value="48">Costa Rica</option>
<option alpha_code="CIV" value="96">Côte d'Ivoire</option>
<option alpha_code="HRV" value="49">Croatia</option>
<option alpha_code="CUB" value="50">Cuba</option>
<option alpha_code="CUW" value="51">Curaçao</option>
<option alpha_code="CYP" value="52">Cyprus</option>
<option alpha_code="CZE" value="53">Czech Republic</option>
<option alpha_code="DNK" value="54">Denmark</option>
<option alpha_code="DJI" value="55">Djibouti</option>
<option alpha_code="DMA" value="56">Dominica</option>
<option alpha_code="DOM" value="57">Dominican Republic</option>
<option alpha_code="ECU" value="58">Ecuador</option>
<option alpha_code="EGY" value="59">Egypt</option>
<option alpha_code="SLV" value="60">El Salvador</option>
<option alpha_code="GNQ" value="61">Equatorial Guinea</option>
<option alpha_code="ERI" value="62">Eritrea</option>
<option alpha_code="EST" value="63">Estonia</option>
<option alpha_code="ETH" value="64">Ethiopia</option>
<option alpha_code="FLK" value="65">Falkland Islands (Malvinas)</option>
<option alpha_code="FRO" value="66">Faroe Islands</option>
<option alpha_code="FJI" value="67">Fiji</option>
<option alpha_code="FIN" value="68">Finland</option>
<option alpha_code="FRA" value="69">France</option>
<option alpha_code="GUF" value="70">French Guiana</option>
<option alpha_code="PYF" value="71">French Polynesia</option>
<option alpha_code="GAB" value="72">Gabon</option>
<option alpha_code="GMB" value="73">Gambia</option>
<option alpha_code="GEO" value="74">Georgia</option>
<option alpha_code="DEU" value="75">Germany</option>
<option alpha_code="GHA" value="76">Ghana</option>
<option alpha_code="GIB" value="77">Gibraltar</option>
<option alpha_code="GRC" value="78">Greece</option>
<option alpha_code="GRL" value="79">Greenland</option>
<option alpha_code="GRD" value="80">Grenada</option>
<option alpha_code="GLP" value="81">Guadeloupe</option>
<option alpha_code="GUM" value="82">Guam</option>
<option alpha_code="GTM" value="83">Guatemala</option>
<option alpha_code="GGY" value="84">Guernsey</option>
<option alpha_code="GIN" value="85">Guinea</option>
<option alpha_code="GNB" value="86">Guinea-Bissau</option>
<option alpha_code="GUY" value="87">Guyana</option>
<option alpha_code="HTI" value="88">Haiti</option>
<option alpha_code="VAT" value="89">Holy See</option>
<option alpha_code="HND" value="90">Honduras</option>
<option alpha_code="HKG" value="91">Hong Kong</option>
<option alpha_code="HUN" value="92">Hungary</option>
<option alpha_code="ISL" value="93">Iceland</option>
<option alpha_code="IND" value="94">India</option>
<option alpha_code="IDN" value="95">Indonesia</option>
<option alpha_code="IRN" value="97">Iran (Islamic Republic of)</option>
<option alpha_code="IRQ" value="98">Iraq</option>
<option alpha_code="IRL" value="99">Ireland</option>
<option alpha_code="IMN" value="100">Isle of Man</option>
<option alpha_code="ISR" value="101">Israel</option>
<option alpha_code="ITA" value="102">Italy</option>
<option alpha_code="JAM" value="103">Jamaica</option>
<option alpha_code="JPN" value="104">Japan</option>
<option alpha_code="JEY" value="105">Jersey</option>
<option alpha_code="JOR" value="106">Jordan</option>
<option alpha_code="KAZ" value="107">Kazakhstan</option>
<option alpha_code="KEN" value="108">Kenya</option>
<option alpha_code="KIR" value="109">Kiribati</option>
<option alpha_code="PRK" value="155">Korea (Democratic People's Republic of)</option>
<option alpha_code="KOR" value="200">Korea (Republic of)</option>
<option alpha_code="KWT" value="110">Kuwait</option>
<option alpha_code="KGZ" value="111">Kyrgyzstan</option>
<option alpha_code="LAO" value="112">Lao People's Democratic Republic</option>
<option alpha_code="LVA" value="113">Latvia</option>
<option alpha_code="LBN" value="114">Lebanon</option>
<option alpha_code="LSO" value="115">Lesotho</option>
<option alpha_code="LBR" value="116">Liberia</option>
<option alpha_code="LBY" value="117">Libya</option>
<option alpha_code="LIE" value="118">Liechtenstein</option>
<option alpha_code="LTU" value="119">Lithuania</option>
<option alpha_code="LUX" value="120">Luxembourg</option>
<option alpha_code="MAC" value="121">Macao</option>
<option alpha_code="MKD" value="122">Macedonia (the former Yugoslav Republic of)</option>
<option alpha_code="MDG" value="123">Madagascar</option>
<option alpha_code="MWI" value="124">Malawi</option>
<option alpha_code="MYS" value="125">Malaysia</option>
<option alpha_code="MDV" value="126">Maldives</option>
<option alpha_code="MLI" value="127">Mali</option>
<option alpha_code="MLT" value="128">Malta</option>
<option alpha_code="MHL" value="129">Marshall Islands</option>
<option alpha_code="MTQ" value="130">Martinique</option>
<option alpha_code="MRT" value="131">Mauritania</option>
<option alpha_code="MUS" value="132">Mauritius</option>
<option alpha_code="MYT" value="133">Mayotte</option>
<option alpha_code="MEX" value="134">Mexico</option>
<option alpha_code="FSM" value="135">Micronesia (Federated States of)</option>
<option alpha_code="MDA" value="136">Moldova (Republic of)</option>
<option alpha_code="MCO" value="137">Monaco</option>
<option alpha_code="MNG" value="138">Mongolia</option>
<option alpha_code="MNE" value="139">Montenegro</option>
<option alpha_code="MSR" value="140">Montserrat</option>
<option alpha_code="MAR" value="141">Morocco</option>
<option alpha_code="MOZ" value="142">Mozambique</option>
<option alpha_code="MMR" value="143">Myanmar</option>
<option alpha_code="NAM" value="144">Namibia</option>
<option alpha_code="NRU" value="145">Nauru</option>
<option alpha_code="NPL" value="146">Nepal</option>
<option alpha_code="NLD" value="147">Netherlands</option>
<option alpha_code="NCL" value="148">New Caledonia</option>
<option alpha_code="NZL" value="149">New Zealand</option>
<option alpha_code="NIC" value="150">Nicaragua</option>
<option alpha_code="NER" value="151">Niger</option>
<option alpha_code="NGA" value="152">Nigeria</option>
<option alpha_code="NIU" value="153">Niue</option>
<option alpha_code="NFK" value="154">Norfolk Island</option>
<option alpha_code="MNP" value="156">Northern Mariana Islands</option>
<option alpha_code="NOR" value="157">Norway</option>
<option alpha_code="OMN" value="158">Oman</option>
<option alpha_code="PAK" value="159">Pakistan</option>
<option alpha_code="PLW" value="160">Palau</option>
<option alpha_code="PSE" value="161">Palestine, State of</option>
<option alpha_code="PAN" value="162">Panama</option>
<option alpha_code="PNG" value="163">Papua New Guinea</option>
<option alpha_code="PRY" value="164">Paraguay</option>
<option alpha_code="PER" value="165">Peru</option>
<option alpha_code="PHL" value="166">Philippines</option>
<option alpha_code="PCN" value="167">Pitcairn</option>
<option alpha_code="POL" value="168">Poland</option>
<option alpha_code="PRT" value="169">Portugal</option>
<option alpha_code="PRI" value="170">Puerto Rico</option>
<option alpha_code="QAT" value="171">Qatar</option>
<option alpha_code="KOS" value="172">Republic of Kosovo</option>
<option alpha_code="REU" value="173">Réunion</option>
<option alpha_code="ROU" value="174">Romania</option>
<option alpha_code="RUS" value="175">Russian Federation</option>
<option alpha_code="RWA" value="176">Rwanda</option>
<option alpha_code="BLM" value="177">Saint Barthélemy</option>
<option alpha_code="SHN" value="178">Saint Helena, Ascension and Tristan da Cunha</option>
<option alpha_code="KNA" value="179">Saint Kitts and Nevis</option>
<option alpha_code="LCA" value="180">Saint Lucia</option>
<option alpha_code="MAF" value="181">Saint Martin (French part)</option>
<option alpha_code="SPM" value="182">Saint Pierre and Miquelon</option>
<option alpha_code="VCT" value="183">Saint Vincent and the Grenadines</option>
<option alpha_code="WSM" value="184">Samoa</option>
<option alpha_code="SMR" value="185">San Marino</option>
<option alpha_code="STP" value="186">Sao Tome and Principe</option>
<option alpha_code="SAU" value="187">Saudi Arabia</option>
<option alpha_code="SEN" value="188">Senegal</option>
<option alpha_code="SRB" value="189">Serbia</option>
<option alpha_code="SYC" value="190">Seychelles</option>
<option alpha_code="SLE" value="191">Sierra Leone</option>
<option alpha_code="SGP" value="192">Singapore</option>
<option alpha_code="SXM" value="193">Sint Maarten (Dutch part)</option>
<option alpha_code="SVK" value="194">Slovakia</option>
<option alpha_code="SVN" value="195">Slovenia</option>
<option alpha_code="SLB" value="196">Solomon Islands</option>
<option alpha_code="SOM" value="197">Somalia</option>
<option alpha_code="ZAF" value="198">South Africa</option>
<option alpha_code="SGS" value="199">South Georgia and the South Sandwich Islands</option>
<option alpha_code="SSD" value="201">South Sudan</option>
<option alpha_code="ESP" value="202">Spain</option>
<option alpha_code="LKA" value="203">Sri Lanka</option>
<option alpha_code="SDN" value="204">Sudan</option>
<option alpha_code="SUR" value="205">Suriname</option>
<option alpha_code="SJM" value="206">Svalbard and Jan Mayen</option>
<option alpha_code="SWZ" value="207">Swaziland</option>
<option alpha_code="SWE" value="208">Sweden</option>
<option alpha_code="CHE" value="209">Switzerland</option>
<option alpha_code="SYR" value="210">Syrian Arab Republic</option>
<option alpha_code="TWN" value="211">Taiwan</option>
<option alpha_code="TJK" value="212">Tajikistan</option>
<option alpha_code="TZA" value="213">Tanzania, United Republic of</option>
<option alpha_code="THA" value="214">Thailand</option>
<option alpha_code="TLS" value="215">Timor-Leste</option>
<option alpha_code="TGO" value="216">Togo</option>
<option alpha_code="TKL" value="217">Tokelau</option>
<option alpha_code="TON" value="218">Tonga</option>
<option alpha_code="TTO" value="219">Trinidad and Tobago</option>
<option alpha_code="TUN" value="220">Tunisia</option>
<option alpha_code="TUR" value="221">Turkey</option>
<option alpha_code="TKM" value="222">Turkmenistan</option>
<option alpha_code="TCA" value="223">Turks and Caicos Islands</option>
<option alpha_code="TUV" value="224">Tuvalu</option>
<option alpha_code="UGA" value="225">Uganda</option>
<option alpha_code="UKR" value="226">Ukraine</option>
<option alpha_code="ARE" value="227">United Arab Emirates</option>
<option alpha_code="GBR" value="228">United Kingdom of Great Britain and Northern Ireland</option>
<option alpha_code="USA" value="229">United States of America</option>
<option alpha_code="URY" value="230">Uruguay</option>
<option alpha_code="UZB" value="231">Uzbekistan</option>
<option alpha_code="VUT" value="232">Vanuatu</option>
<option alpha_code="VEN" value="233">Venezuela (Bolivarian Republic of)</option>
<option alpha_code="VNM" value="234">Viet Nam</option>
<option alpha_code="VGB" value="26">Virgin Islands (British)</option>
<option alpha_code="VIR" value="27">Virgin Islands (U.S.)</option>
<option alpha_code="WLF" value="235">Wallis and Futuna</option>
<option alpha_code="ESH" value="236">Western Sahara</option>
<option alpha_code="YEM" value="237">Yemen</option>
<option alpha_code="ZMB" value="238">Zambia</option>
<option alpha_code="ZWE" value="239">Zimbabwe</option></select>
</div><div class="input string required user_address_location"><label class="string required" for="user_address"><abbr title="required">*</abbr> Location</label><input id="user_address" class="string required" required="required" aria-required="true" type="text" name="user[address_attributes][location]"></div>
<div class="input string required user_address_street_name"><label class="string required" for="user_address_attributes_street_name"><abbr title="required">*</abbr> Street name</label><input user-data-geo="route" class="string required" required="required" aria-required="true" type="text" name="user[address_attributes][street_name]" id="user_address_attributes_street_name"></div>
<div class="input string required user_address_street_number"><label class="string required" for="user_address_attributes_street_number"><abbr title="required">*</abbr> Street number</label><input user-data-geo="street_number" class="string required" required="required" aria-required="true" type="text" name="user[address_attributes][street_number]" id="user_address_attributes_street_number"></div>
<div class="input string required user_address_city"><label class="string required" for="user_address_attributes_city"><abbr title="required">*</abbr> City</label><input user-data-geo="locality" class="string required" required="required" aria-required="true" type="text" name="user[address_attributes][city]" id="user_address_attributes_city"></div>
<div class="input string required user_address_state"><label class="string required" for="user_address_attributes_state"><abbr title="required">*</abbr> State</label><input user-data-geo="administrative_area_level_1" class="string required" required="required" aria-required="true" type="text" name="user[address_attributes][state]" id="user_address_attributes_state"></div>
<div class="input string required user_address_postal_code"><label class="string required" for="user_address_attributes_postal_code"><abbr title="required">*</abbr> Postal code</label><input user-data-geo="postal_code" class="string required" required="required" aria-required="true" type="text" name="user[address_attributes][postal_code]" id="user_address_attributes_postal_code"></div>
<div class="input string required user_address_administrative_area_level_1"><label class="string required" for="user_address_attributes_administrative_area_level_1"><abbr title="required">*</abbr> Administrative area level 1</label><input user-data-geo="floor" class="string required" required="required" aria-required="true" type="text" name="user[address_attributes][administrative_area_level_1]" id="user_address_attributes_administrative_area_level_1"></div>
<div class="input string optional user_address_latitude"><label class="string optional" for="user_address_attributes_latitude">Latitude</label><input user-data-geo="lat" class="string optional" type="text" name="user[address_attributes][latitude]" id="user_address_attributes_latitude"></div>
<div class="input string optional user_address_longitude"><label class="string optional" for="user_address_attributes_longitude">Longitude</label><input user-data-geo="lng" class="string optional" type="text" name="user[address_attributes][longitude]" id="user_address_attributes_longitude"></div>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User">
</form>

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">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 name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">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 name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())

Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">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 name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>

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

How to calculate how many days between "check-in date" and "check-out date"?

I'm trying to figure out how to calculate the amount of days between the user's input of the check-in date and the check-out date. I need to take that number and multiple it by the room choice they selected to get the grand total cost for their stay and display it somewhere on the screen.
I'm not entirely sure how to calculate the number of days, but for getting the cost of the room would I need to assign an id to each type of room and assign it a numerical value instead of the current setup I have now? Or how else can you assign a value to the selection of each room?
<script>
function check() {
if(document.getElementById('checkin').value > document.getElementById('checkout').value)
{
alert("Check-out date must be after check-in date!")
}
}
//function result() {
//document.getElementById('standard').value *
//}
</script>
<body>
<form>
<fieldset>
<legend>test</legend>
First Name: <br>
<input type="text" name="firstname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
<br><br>
Last Name: <br>
<input type="text" name="lastname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
<br><br>
Street Address: <br>
<input type="text" name="street" size="45" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>
<br><br>
City: <br>
<input type="text" name="city" size="45" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
<br><br>
State: <br>
<input list="states" name="state" size="45" required>
<datalist id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</datalist>
<br><br>
Zip Code: <br>
<input type="text" name="zipcode" size="45" pattern="[0-9]+" title="Numbers only." required>
<br><br>
Phone Number: <br>
<input type="text" name="phone" size="45" pattern="[0-9-]+" title="Numbers only." required>
<br><br>
E-mail: <br>
<input type="email" name="email" size="45" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required>
<br><br>
Check-In Date:<br>
<input type="date" id="checkin" name="checkin" required>
<br><br>
Check-Out Date:<br>
<input type="date" id="checkout" name="checkout" required>
<br><br>
Room:<br>
<input list="rooms" name="room" size="16" required>
<datalist id="rooms">
<option value="Standard ($50/night)">
<option value="Queen ($75/night)">
<option value="King ($100/night)">
<option value="Business ($125/night)">
<option value="Deluxe Suite ($150/night)">
</datalist>
<br><br>
<button type="submit" onclick="check()">Submit</button>
</fieldset>
</form>
</body>

<script>
function check() {
var date1 = new Date(document.getElementById('checkin').value);
var date2 = new Date(document.getElementById('checkout').value);
var diff = Math.abs(date2.getTime() - date1.getTime());
var noofdays = Math.ceil(diff / (1000 * 3600 * 24));
if(date1 > date2){
alert("Check-out date must be after check-in date!")
}
else {
alert(noofdays);
}
}
</script>
<body>
<form>
<fieldset>
<legend>test</legend>
First Name: <br>
<input type="text" name="firstname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
<br><br>
Last Name: <br>
<input type="text" name="lastname" size="45" pattern="[A-Za-z]+" title="Alphabet characters only." required>
<br><br>
Street Address: <br>
<input type="text" name="street" size="45" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>
<br><br>
City: <br>
<input type="text" name="city" size="45" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
<br><br>
State: <br>
<input list="states" name="state" size="45" required>
<datalist id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</datalist>
<br><br>
Zip Code: <br>
<input type="text" name="zipcode" size="45" pattern="[0-9]+" title="Numbers only." required>
<br><br>
Phone Number: <br>
<input type="text" name="phone" size="45" pattern="[0-9-]+" title="Numbers only." required>
<br><br>
E-mail: <br>
<input type="email" name="email" size="45" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required>
<br><br>
Check-In Date:<br>
<input type="date" id="checkin" name="checkin" required>
<br><br>
Check-Out Date:<br>
<input type="date" id="checkout" name="checkout" required>
<br><br>
Room:<br>
<input list="rooms" name="room" size="16" required>
<datalist id="rooms">
<option value="Standard ($50/night)">
<option value="Queen ($75/night)">
<option value="King ($100/night)">
<option value="Business ($125/night)">
<option value="Deluxe Suite ($150/night)">
</datalist>
<br><br>
<button type="submit" onclick="check()">Submit</button>
</fieldset>
</form>
</body>

How to take user input selected room and multiple it by the difference in days between two dates? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Once the user selects the type of room they want and how many days they are staying, how do I calculate the total cost of their stay?
I'm not quite sure how to grab the room the user selected and multiple it by the diffDays to get the total cost.
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
var date1 = new Date(document.getElementById('checkin').value);
var date2 = new Date(document.getElementById('checkout').value);
var diff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(diff / (1000 * 3600 * 24));
if (date1 > date2){
alert("Check-out date must be after check-in date!")
}
else {
calculate();
}
}
//function calculate();
// if (document.getElementById("standard")
// var report = this.value * 50 * dayDiff;
</script>
<body>
<form>
<fieldset>
<legend>Reserve Hotel Room</legend>
Check-In Date:<br>
<input type="date" id="checkin" name="checkin" required>
<br><br>
Check-Out Date:<br>
<input type="date" id="checkout" name="checkout" required>
<br><br>
Room:
<select id="room" name="room" onchange="report(this.value)">
<option id="standard" value="50">Standard ($50/night)</option>
<option id="queen" value="75">Queen ($75/night)</option>
<option id="king" value="100">King ($100/night)</option>
<option id="business" value="125">Business ($125/night)</option>
<option id="deluxe" value="150">Deluxe Suite ($150/night)</option>
</select>
<button type="submit" onclick="check()">Submit</button>
</fieldset>
</form>
</body>
How would I perform the calculate function to where it takes the value of the room selected and multiplies it by the difference in days?
** I don't want to use datepicker.

You can check the number of days by
// contains the difference in milliseconds
diffDate = (checkOutDate - checkInDate),
// contains the difference in days
diffDays = 1 + (diffDate / 1000 / 60 / 60 / 24);
// total cost for their stay
selectedRoomRate = $("#room").val();
selectedRoomTotalCost = selectedRoomRate * diffDays;
Updated 2016-11-11:
Updated snippet to return the cost.
Updated 2016-11-12:
<input list="roomList"> will bring you only suggestions while typing a value. To get the options to select a room type, you need <select> tag.
Try the following snippet:
function check() {
var checkInDate = new Date($("#checkin").val()),
checkOutDate = new Date($("#checkout").val()),
diffDate = (checkOutDate - checkInDate),
diffDays = 1 + (diffDate / 1000 / 60 / 60 / 24),
selectedRoomRate = $("#room").val(),
selectedRoomTotalCost;
if (diffDate < 0) {
alert("Check-out date must be after check-in date!");
return;
}
selectedRoomTotalCost = selectedRoomRate * diffDays;
alert('Total Cost: $' + selectedRoomTotalCost);
}
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="settings.css">
<title>Tranquility Hotels Limited</title>
<script>
</script>
</head>
<body>
<div class="center">
<form>
<fieldset>
<legend>Reserve Hotel Room</legend>
First Name:
<input type="text" name="firstname" placeholder="First Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>Last Name:
<input type="text" name="lastname" placeholder="Last Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>
<br>
<br>Street Address:
<input type="text" name="street" placeholder="1234 Awesome Street" size="30" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>City:
<input type="text" name="city" placeholder="Cleveland" size="30" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
<br>
<br>State:
<input list="states" name="state" placeholder="OH" size="10" required>
<datalist id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</datalist>
Zip Code:
<input type="text" name="zipcode" placeholder="12345" size="10" pattern="[0-9]+" title="Numbers only." required>
<br>
<br>Phone Number:
<input type="text" name="phone" size="25" placeholder="440-123-4567" pattern="[0-9]+" title="Numbers only." required>E-mail:
<input type="email" name="email" size="25" placeholder="email#domain.com" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required>
<br>
<br>Check-In Date:
<input type="date" id="checkin" name="checkin" value="2015-07-05" required>Check-Out Date:
<input type="date" id="checkout" name="checkout" value="2015-07-17" required>
<br>
<br>Room:
<select id="room" name="room" required>
<option value="50" selected>Standard ($50/night)</option>
<option value="75">Queen ($75/night)</option>
<option value="100">King ($100/night)</option>
<option value="125">Business ($125/night)</option>
<option value="150">Deluxe Suite ($150/night)</option>
</select>
<button type="submit" onclick="check()">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>

Use a datepicker , set preferred format mm/dd/yyyy else you have to change the date format inside your days calculate function
function calDays(){
startDate = $('#start-date').val();
enddate =$('#start-date').val();
days = Math.round(((new Date(endDate) )- (new Date(startDate) ) )/(3600000*24))
daysSuffix = " Day";
if(days > 1){
daysSuffix = " Days";
}
$('#total-days').val(days + daysSuffix)
}

You can use datepicker() from Jquery-UI and add a function for calculate the datediff.
$("#checkin").datepicker();
$("#checkout").datepicker();
$("#check").click(function(){
function parseDate(str) {
var mdy = str.split('/');
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}
function daydiff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
var CostPerNight = $('#costRoom').val()
totalCost = daydiff(parseDate($('#checkin').val()), parseDate($('#checkout').val())) * CostPerNight;
alert(totalCost)
})
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="center">
<form>
<fieldset>
<legend>Reserve Hotel Room</legend>
First Name:
<input type="text" name="firstname" placeholder="First Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>Last Name:
<input type="text" name="lastname" placeholder="Last Name" size="25" pattern="[A-Za-z-]+" title="Alphabet characters only." required>
<br>
<br>Street Address:
<input type="text" name="street" placeholder="1234 Awesome Street" size="30" pattern="[A-Za-z0-9 ]+" title="Alphabet characters and numbers only." required>City:
<input type="text" name="city" placeholder="Cleveland" size="30" pattern="[A-Za-z ]+" title="Alphabet characters only." required>
<br>
<br>State:
<input list="states" name="state" placeholder="OH" size="10" required>
<datalist id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</datalist>
Zip Code:
<input type="text" name="zipcode" placeholder="12345" size="10" pattern="[0-9]+" title="Numbers only." required>
<br>
<br>Phone Number:
<input type="text" name="phone" size="25" placeholder="440-123-4567" pattern="[0-9]+" title="Numbers only." required>E-mail:
<input type="email" name="email" size="25" placeholder="email#domain.com" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required>
<br>
<br>Check-In Date:
<input type="date" id="checkin" name="checkin" required>Check-Out Date:
<input type="date" id="checkout" name="checkout" required>
<br>
<br>Room:
<input id="costRoom" list="rooms" name="room" size="16" required>
<datalist id="rooms">
<option value="50">Standard ($50/night)</option>
<option value="75">Queen ($75/night)</option>
<option value="100">King ($100/night)</option>
<option value="125">Business ($125/night)</option>
<option value="150">Deluxe Suite ($150/night)</option>
</datalist>
<br>
<br>
<button type="submit" id="check">Submit</button>
</fieldset>
</form>
</div>
Function daydiff source here
UPDATE
Without datpicker you can just add your date with format you want and split on your delimiter.
example:
if you use : 01.02.2017
you just modify split to : var mdy = str.split('.');

Develop Reference

JavaScript is the programming language of the Web.

Trying to grab URL parameters, and POST them with form - javascript

Related

How to reinitialize detailsAttribute onchange country from dropdown?

Replace value from select inside hidden input

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

How to calculate how many days between "check-in date" and "check-out date"?

How to take user input selected room and multiple it by the difference in days between two dates? [closed]

Categories

Resources