Copy billing address to shipping address using javascript - javascript

Im trying to get my page to use the same as billing address checkbox to copy the information to the shipping address but it is not working.
Here is my HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=page-width, initial-scale=1.0">
<title>Snoot Flowers - Order</title>
<link rel="stylesheet" href="snoot.css" />
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<script src="modernizr.custom.65897.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>
Snoot Flowers
</h1>
</header>
<nav>
<ul>
<li>Floral Arrangements</li>
<li>Seasonal Bouquets</li>
<li>Live Plants</li>
<li>Shop by Price</li>
</ul>
</nav>
</div>
<article>
<h2>Place an Order</h2>
<div id="errorText"></div>
<form action="results.htm">
<fieldset id="message" class="checks">
<legend>Message</legend>
<input id="congrats" name="Congratulations" type="checkbox" />
<label for="congrats">Congratulations!</label>
<input id="bday" name="HappyBirthday" type="checkbox" />
<label for="bday">Happy Birthday!</label>
<input id="anniv" name="HappyAnniversary" type="checkbox" />
<label for="anniv">Happy Anniversary!</label>
<input id="love" name="ILoveYou" type="checkbox" />
<label for="love">I love you!</label>
<input id="custom" name="CustomMessage" type="checkbox" />
<label for="custom">Custom message:</label>
<textarea id="customText" name="CustomText" placeholder="Enter custom message here (max 250 characters)"></textarea>
<div class="errorMessage"></div>
</fieldset>
<fieldset id="billingAddress" class="text">
<legend>Billing Address</legend>
<label for="billFName">First Name</label>
<input id="billFName" name="BillingFirstName" type="text" required="required" />
<label for="billLName">Last Name</label>
<input id="billLName" name="BillingLastName" type="text" required="required" />
<label for="billStreet">Street Address</label>
<input id="billStreet" name="BillingStreet" type="text" required="required" />
<label for="billCity">City</label>
<input id="billCity" name="BillingCity" type="text" required="required" />
<label for="billState">State</label>
<select id="billState" name="BillingState" required="required">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<label for="billZip">Zip</label>
<input id="billZip" name="BillingZip" type="number" required="required" />
<label for="billPhone">Phone</label>
<input id="billPhone" name="BillingPhone" type="number" required="required" />
<div class="errorMessage"></div>
</fieldset>
<fieldset id="deliveryAddress" class="text">
<legend>Delivery Address</legend>
<div class="checks">
<input id="sameAddr" name="SameAddress" type="checkbox" />
<label for="sameAddr">same as billing address</label>
</div>
<label for="delivFName">First Name</label>
<input id="delivFName" name="DeliveryFirstName" type="text" required="required" />
<label for="delivLName">Last Name</label>
<input id="delivLName" name="DeliveryLastName" type="text" required="required" />
<label for="delivStreet">Street Address</label>
<input id="delivStreet" name="DeliveryStreet" type="text" required="required" />
<label for="delivCity">City</label>
<input id="delivCity" name="DeliveryCity" type="text" required="required" />
<label for="delivState">State</label>
<select id="delivState" name="DeliveryState" required="required">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<label for="delivZip">Zip</label>
<input id="delivZip" name="DeliveryZip" type="number" required="required" />
<label for="delivPhone">Phone</label>
<input id="delivPhone" name="DeliveryPhone" type="number" required="required" />
<div class="errorMessage"></div>
</fieldset>
<fieldset id="deliveryDate" class="checks">
<legend>Delivery Date</legend>
<div class="inline" id="delivDate">
<select id="delivMo" name="DelivMonth" required="required">
<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 id="delivDy" name="DelivDay" required="required">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="delivYr" name="DelivYear" required="required">
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div class="errorMessage"></div>
</fieldset>
<fieldset id="paymentInfo" class="text">
<legend>Payment</legend>
<div id="cards" class="inline">
<input id="visa" name="PaymentType" type="radio" value="Visa" />
<label for="visa">Visa</label>
<input id="mc" name="PaymentType" type="radio" value="MC" />
<label for="mc">Master Card</label>
<input id="discover" name="PaymentType" type="radio" value="Discover" />
<label for="discover">Discover</label>
<input id="amex" name="PaymentType" type="radio" value="AmEx" />
<label for="amex">American Express</label>
</div>
<div>
<label for="ccNum">Card #</label>
<input id="ccNum" name="CardNumber" type="number" required="required" />
<div id="ccNumErrorMessage"></div>
</div>
<div>
<label>Expiration</label>
<div class="inline" id="exp">
<label for="expMo" id="expMoLabel">Expiration Month</label>
<select id="expMo" name="ExpMonth" required="required">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<label for="expYr" id="expYrLabel">Expiration Year</label>
<select id="expYr" name="ExpYear" required="required">
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
<label for="cvv">CVV</label>
<input id="cvv" name="CVVValue" type="number" required="required" />
<div id="cvvErrorMessage"></div>
</div>
<div class="errorMessage"></div>
</fieldset>
<fieldset id="createAccount" class="text">
<legend>Create Account?</legend>
<p>To be able to access your purchase history and make changes to your order, enter a name and password to create an account.</p>
<label for="username">Username</label>
<input id="username" name="NewUsername" type="text" />
<label for="pass1">Password</label>
<input id="pass1" name="Password1" type="password" />
<label for="pass2">Password (verify)</label>
<input id="pass2" name="Password2" type="password" />
<div class="errorMessage"></div>
</fieldset>
<div id="buttonContainer">
<input type="submit" value="Place Order" id="orderButton" />
</div>
</form>
</article>
<footer>Snoot Flowers <span>•</span> Davenport, Iowa</footer>
<script src="script.js"></script>
</body>
</html>
Here is the javascript code.
What it is supposed to do it that when i check the check box "same as billing address" it is supposed to copy the information from the biling address form and fill up the shipping address form.
function copyBillingAddress() {
var billingInputElements = document.querySelectorAll("#billingAddress input");
var deliveryInputElements = document.querySelectorAll("#deliveryAddress input");
if (document.getElementById("sameAddr").checked) {
for (var i = 0; i < billingInputElements.length; i++) {
deliveryInputElements[i + 1].value = billingInputElements[i].value;
}
document.querySelector("#deliveryAddress select").value = document.querySelector("#billingAddress select").value;
}else {
for (var i = 0; i < billingInputElements.length; i++) {
deliveryInputElements[i + 1].value = "";
}
document.querySelector("#deliveryAddress select").selectedIndex = -1;
}
}
function createEventListener() {
var same = document.getElementById("sameAddr");
if (same.addEventListener) {
same.addEventListener("click", copyBillingAddress, false);
} else if (same.attachEvent) {
same.attachEvent("onclick", copyBillingAddress);
}
}


You forgot to call your createEventListener(). You can just simplify it this way(unless you are obviously targeting older browsers):
(function(){
function copyBillingAddress()
{
var billingInputElements = document.querySelectorAll("#billingAddress input");
var deliveryInputElements = document.querySelectorAll("#deliveryAddress input");
if (document.getElementById("sameAddr").checked)
{
for (var i = 0; i < billingInputElements.length; i++)
{
deliveryInputElements[i + 1].value = billingInputElements[i].value;
}
document.querySelector("#deliveryAddress select").value = document.querySelector("#billingAddress select").value;
}else
{
for (var i = 0; i < billingInputElements.length; i++)
{
deliveryInputElements[i + 1].value = "";
}
document.querySelector("#deliveryAddress select").selectedIndex = -1;
}
}
document.getElementById("sameAddr").addEventListener('change',
function()
{
copyBillingAddress();
}
);
})();
<form action="results.htm">
<fieldset id="billingAddress" class="text">
<legend>Billing Address</legend>
<label for="billFName">First Name</label>
<input id="billFName" name="BillingFirstName" type="text" required="required" />
<label for="billLName">Last Name</label>
<input id="billLName" name="BillingLastName" type="text" required="required" />
<label for="billStreet">Street Address</label>
<input id="billStreet" name="BillingStreet" type="text" required="required" />
<label for="billCity">City</label>
<input id="billCity" name="BillingCity" type="text" required="required" />
<label for="billState">State</label>
<select id="billState" name="BillingState" required="required">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<label for="billZip">Zip</label>
<input id="billZip" name="BillingZip" type="number" required="required" />
<label for="billPhone">Phone</label>
<input id="billPhone" name="BillingPhone" type="number" required="required" />
<div class="errorMessage"></div>
</fieldset>
<fieldset id="deliveryAddress" class="text">
<legend>Delivery Address</legend>
<div class="checks">
<input id="sameAddr" name="SameAddress" type="checkbox" />
<label for="sameAddr">same as billing address</label>
</div>
<label for="delivFName">First Name</label>
<input id="delivFName" name="DeliveryFirstName" type="text" required="required" />
<label for="delivLName">Last Name</label>
<input id="delivLName" name="DeliveryLastName" type="text" required="required" />
<label for="delivStreet">Street Address</label>
<input id="delivStreet" name="DeliveryStreet" type="text" required="required" />
<label for="delivCity">City</label>
<input id="delivCity" name="DeliveryCity" type="text" required="required" />
<label for="delivState">State</label>
<select id="delivState" name="DeliveryState" required="required">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<label for="delivZip">Zip</label>
<input id="delivZip" name="DeliveryZip" type="number" required="required" />
<label for="delivPhone">Phone</label>
<input id="delivPhone" name="DeliveryPhone" type="number" required="required" />
<div class="errorMessage"></div>
</fieldset>
</form>


function copyAddress() {
const textValues = ['attention', 'line_one', 'line_two', 'zip_code'];
textValues.forEach(function (item, index) {
document.getElementById(`billingaddress-${item}`).value = document.getElementById(`mailingaddress-${item}`).value;
});
}

Related

How to use jQuery hide effect in select option

I got one more doubt I'm close to the answer but not getting it to worked. Actually I have the a default input text & default drop-down(drop-down which consist of west Bengal & others). Now if someone click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.
Below is the code what I have tried. Can any one please guideme I'm a bit new to jQuery.
$(document).ready(function() {
$("#state").on("select", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

'select' is not the jQuery event you are expecting. It is related to text selectiongs in text inputs and text areas.
You should use 'change' instead for when the value of the select field changes.
$(document).ready(function() {
$("#state").on("change", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

$(document).ready(function() {
$(document).on("change","#state", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}else{
$(".westbengaldistrict").hide();
$(".otherdistricts").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>

I want to display my selected values from a multi dropbox into a disabled text field but I am unable to do it. Please tell me what i am missing

Following is my HTML code for a form. This form contains some country fields that are multiple dropdown select inputs.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="\images\trademark_icon.png" type="image/gif" sizes="16x16">
</head>
<style>
<!--Blah Blah -->
</style>
<body>
<h2 ><img src="images/hero_logo.png" class="herologo" ><span class="form-title">Trademark Filing Application</span></h2><br>
<div>
<p style="padding-left:20px"><span class="error">* required field.</span></p>
<form action="insert.php" method="post" enctype="multipart/form-data">
<!-- Department -->
<b>Select Department:</b><span class="error"> *</span>
<select id="dept" name="department" required>
<option value="">Please Select...</option>
<option value="ceo">CEO Office</option>
<option value="global">Global</option>
<option value="marketing">Marketing</option>
<option value="parts">Parts</option>
</select>
<br><br><br>
<!-- Class -->
<b>Select Class:</b><span class="error"> *</span><br><br>
<input type="radio" id="wordradio" name="classs" value="Word" required>Word
<input type="radio" id="deviceradio" name="classs" value="Device" style="margin-left:20px">Device
<input type="radio" id="logoradio" name="classs" value="Logo" style="margin-left:20px">Logo
<input type="radio" id="soundradio" name="classs" value="Sound" style="margin-left:20px">Sound
<input type="radio" id="taglineradio" name="classs" value="Tagline" style="margin-left:20px">Tagline
<br><br><br>
<!-- Preferences -->
<b>Enter Preference(s):</b><br>
1. <input type="text" id="pref1" name="preference1" style="width:30%" placeholder="Preference 1" required>
<input type="file" id="prefbtn1" name="files[]" multiple="" required>
<span class="error">*</span>
<br>
2. <input type="text" id="pref2" name="preference2" style="width:30%" placeholder="Preference 2">
<input type="file" id="prefbtn2" name="files[]" multiple="" >
<br>
3. <input type="text" id="pref3" name="preference3" style="width:30%" placeholder="Preference 3">
<input type="file" id="prefbtn3" name="files[]" multiple="" >
<br>
4. <input type="text" id="pref4" name="preference4" style="width:30%" placeholder="Preference 4">
<input type="file" id="prefbtn4" name="files[]" multiple="" >
<br>
5. <input type="text" id="pref5" name="preference5" style="width:30%" placeholder="Preference 5">
<input type="file" id="prefbtn5" name="files[]" multiple="" >
<br><br><br>
<!-- Goods and Services -->
<b>Enter The Types of Goods & Services :</b><span class="error"> *</span>
<br>
<input type="text" id="goodss" name="goodsnservice" placeholder="Select the type of Goods and Services" required>
<br><br><br>
<!-- Mark in Use? -->
<b>Is Mark In Use?</b><span class="error"> *</span><br><br>
<input type="radio" id="marky" name="mark" value="yes" onclick="disableNo()" required>Yes
<!-- Mark in Use?: YES -->
<div id="markyes" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Did You Use It?</b>
<input type="date" name="yeswhen" style="margin-left:10px" id="markyesdate" required><span class="error"> *</span><br><br>
<b>Where Did You Use It?</b><span class="error"> *</span><br>
<select name="yescountry[]" style="width:20%" id="markyescountry" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
<b>Proof Of First Use:</b><span class="error"> *</span><br>
<input type="file" id="markyesproof" name="files[]" value="Upload one or more files" multiple="" required>
</div><br>
<!-- Mark in Use?: NO -->
<input type="radio" name="mark" value="no" onclick="disableYes()" >No<br>
<div id="markno" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Are You Expected To Use It?</b>
<input type="date" name="nowhen" style="margin-left:10px" id="marknodate" required><span class="error"> *</span><br><br>
<b>Where will You Use It?</b><span class="error"> *</span><br>
<select name="nocountry[]" style="width:20%" id="marknocountry" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American">American Samoa</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
</div><br>
<!-- Mark Applied Country -->
<b style="text-height:50%">Mark Applied Country:</b><br>
<select name="markappliedcountry" id="multi-country" class="dropdown-country" style="width:20%" multiple >
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
<br><br><br>
<input type="text" id="selected_values" name="multiple_selected_values" disabled/><br/><br/>
<input type="submit" value="Submit">
</form>
</div>
<script>
function disableNo() {
document.getElementById("marknocountry").required = false;
document.getElementById("marknodate").required = false;
}
function disableYes() {
document.getElementById("markyescountry").required = false;
document.getElementById("markyesdate").required = false;
document.getElementById("markyesproof").required = false;
}
var selText;
$('select').on('change', function() {
selText ="";
$("#multi-country").each(function () {
var $this = $(this);
if(selText !=""){
selText = selText.concat(",");
selText = selText.concat($this.text());
}
else
selText=$this.text();
});
//alert(selText);
document.getElementById("selected_values").value=selText;
});
</script>
</body>
</html>
I was trying to use it first on Applied Country(the one at the last), so that if it worked, I would replicate it to other fields too. Also, is there any way that I can reuse the same dropdown list for three different select inputs?

I think that should do the job:
<select name="markappliedcountry" id="multi-country" class="dropdown-country" style="width:20%" multiple >
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
<input type="text" id="selected_values" name="multiple_selected_values" disabled/>
JS:
$(document).ready(function() {
$('select').on('change', function() {
$('input').val($(this).val());
});
});
JSFiddle example

So, after 29 days after asking this question and trying many alternatives, I finally found the answer:
This is my Html file:
<!DOCTYPE html>
<html>
<head>
<title>Trademark Filing Application</title>
<link rel="icon" href="\images\trademark_icon.png" type="image/gif" sizes="16x16">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h2 ><img src="images/hero_logo.png" class="herologo" ><span class="form-title">Trademark Filing Application</span></h2><br>
<div>
<p style="padding-left:20px"><span class="error">* required field.</span></p>
<form action="insert.php" method="post" enctype="multipart/form-data">
<!-- Department -->
<b>Select Department:</b><span class="error"> *</span>
<select id="dept" name="department" required>
<option value="">Please Select...</option>
<option value="CEO Office">CEO Office</option>
<option value="Global">Global</option>
<option value="Marketing">Marketing</option>
<option value="Parts">Parts</option>
</select>
<br><br><br>
<!-- Class -->
<b>Select Class:</b><span class="error"> *</span><br><br>
<input type="radio" id="wordradio" name="classs" value="Word" required>Word
<input type="radio" id="deviceradio" name="classs" value="Device" style="margin-left:20px">Device
<input type="radio" id="logoradio" name="classs" value="Logo" style="margin-left:20px">Logo
<input type="radio" id="soundradio" name="classs" value="Sound" style="margin-left:20px">Sound
<input type="radio" id="taglineradio" name="classs" value="Tagline" style="margin-left:20px">Tagline
<br><br><br>
<!-- Preferences -->
<b>Enter Preference(s):</b><br>
1. <input type="text" id="pref1" name="preference1" style="width:30%" placeholder="Preference 1" required>
<input type="file" id="prefbtn1" name="image" multiple="" required>
<span class="error">*</span>
<br>
2. <input type="text" id="pref2" name="preference2" style="width:30%" placeholder="Preference 2">
<input type="file" id="prefbtn2" name="preferTwo[]" multiple="" >
<br>
3. <input type="text" id="pref3" name="preference3" style="width:30%" placeholder="Preference 3">
<input type="file" id="prefbtn3" name="preferThree[]" multiple="" >
<br>
4. <input type="text" id="pref4" name="preference4" style="width:30%" placeholder="Preference 4">
<input type="file" id="prefbtn4" name="preferFour[]" multiple="" >
<br>
5. <input type="text" id="pref5" name="preference5" style="width:30%" placeholder="Preference 5">
<input type="file" id="prefbtn5" name="preferFive[]" multiple="" >
<br><br><br>
<!-- Goods and Services -->
<b>Enter The Types of Goods & Services :</b><span class="error"> *</span>
<br>
<input type="text" id="goodss" name="goodsnservice" placeholder="Select the type of Goods and Services" required>
<br><br><br>
<!-- Mark in Use? -->
<b>Is Mark In Use?</b><span class="error"> *</span><br><br>
<input type="radio" id="marky" name="mark" value="yes" onclick="disableNo()" required>Yes
<!-- Mark in Use?: YES -->
<div id="markyes" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Did You Use It?</b>
<input type="date" name="yeswhen" style="margin-left:10px" id="markyesdate" required><span class="error"> *</span><br><br>
<b>Where Did You Use It?</b><span class="error"> *</span><br>
<input type="text" style="height:10px;width:50%" id="selected_yes" name="yes_country_values" disabled /> <br/>
<select name="yescountry" id="yescountry" style="width:40%" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
<b>Proof Of First Use:</b><span class="error"> *</span><br>
<input type="file" id="markyesproof" name="yesProof[]" value="Upload proof" multiple="" required>
</div><br>
<!-- Mark in Use?: NO -->
<input type="radio" name="mark" value="no" onclick="disableYes()" >No<br>
<div id="markno" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Are You Expected To Use It?</b>
<input type="date" name="nowhen" style="margin-left:10px" id="marknodate" required><span class="error"> *</span><br><br>
<b>Where will You Use It?</b><span class="error"> *</span><br>
<input type="text" style="height:10px;width:50%" id="selected_no" name="no_country_values" disabled /><br/>
<select name="marknocountry" id="nocountry" style="width:40%" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bonaire">Bonaire</option>
<option value="Bosnia & Herzegovina">Bosnia & Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Ter">British Indian Ocean Ter</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Canary Islands">Canary Islands</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Channel Islands">Channel Islands</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Island">Cocos Island</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'Ivoire">Cote D'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curacao">Curacao</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Ter">French Southern Ter</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Great Britain">Great Britain</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Hawaii">Hawaii</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea North">Korea North</option>
<option value="Korea Sout">Korea South</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Nambia">Nambia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherland Antilles">Netherland Antilles</option>
<option value="Netherlands (Holland, Europe)">Netherlands (Holland, Europe)</option>
<option value="Nevis">Nevis</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau Island">Palau Island</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn Island">Pitcairn Island</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Republic of Montenegro">Republic of Montenegro</option>
<option value="Republic of Serbia">Republic of Serbia</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St Barthelemy">St Barthelemy</option>
<option value="St Eustatius">St Eustatius</option>
<option value="St Helena">St Helena</option>
<option value="St Kitts-Nevis">St Kitts-Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Maarten">St Maarten</option>
<option value="St Pierre & Miquelon">St Pierre & Miquelon</option>
<option value="St Vincent & Grenadines">St Vincent & Grenadines</option>
<option value="Saipan">Saipan</option>
<option value="Samoa">Samoa</option>
<option value="Samoa American">Samoa American</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome & Principe">Sao Tome & Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Tahiti">Tahiti</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad & Tobago">Trinidad & Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks & Caicos Is">Turks & Caicos Is</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States of America">United States of America</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City State">Vatican City State</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (Brit)">Virgin Islands (Brit)</option>
<option value="Virgin Islands (USA)">Virgin Islands (USA)</option>
<option value="Wake Island">Wake Island</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
</div><br>
<!-- Mark Applied Country -->
<b style="text-height:50%">Mark Applied Country:</b><br>
<input type="text" style="height:10px;width:50%" id="selected_applied" name="applied_selected_values" value="selected_applied" disabled /> <br/>
<select name="markappliedcountry" id="appliedcountry" style="width:40%" multiple >
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br/><br/>
<input type="submit" value="Submit">
</form>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yescountry').on('change', function() {
$('#selected_yes').val($(this).val());
});
$('#nocountry').on('change', function() {
$('#selected_no').val($(this).val());
});
$('#appliedcountry').on('change', function() {
$('#selected_applied').val($(this).val());
});
});
</script>
<script>
function disableNo() {
document.getElementById("nocountry").required = false;
document.getElementById("marknodate").required = false;
}
function disableYes() {
document.getElementById("yescountry").required = false;
document.getElementById("markyesdate").required = false;
document.getElementById("markyesproof").required = false;
}
</script>
</body>
</html>
I have shortened the select options due to the shortage of character limit. But, one out of the three select menus has all the options. So, you can copy those if you want to.

Change Form action url Dynamically

So I need to change the default url to something much better I have made it to work on .htaccess but I can't do it into the form action...Can someone tell me how to change the form url the form goes to the url
s=thesearch&for=for&genre=genre&lang=lang&quality=quality&rating=rating&orderby=orderby
I want to make the form goes to
s=thesearch/for/genre/lang/quality/rating/orderby
the form code that goes into the first url:
<form role="search" method="get" class="search-form" action="s=">
<label>
<input autofocus autocomplete="off" type="search" class="search-field" placeholder="Search …" value="" name="" title="Search for:">
</label>
<input type="submit" class="search-submit" value="Search">
<!-- Squared THREE -->
<div class="squaredThree">
<input type="checkbox" id="squaredThree" name="check" />
<label for="squaredThree">
<div style="font-weight: 700;font-size: 1.1em;color: #5a5a5a;margin-left:25px;margin-top:2px;">Advanced</div>
<div style="font-weight: 700;font-size: 1.1em;color: #5a5a5a;margin-left:98px;margin-top:-20px;">Search</div></label>
</div>
<script type="text/javascript">
document.getElementById('squaredThree').onchange = function() {
document.getElementById('advanced-search').style.display = this.checked ? 'block' : 'none';
};
</script>
<div id="advanced-search">
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:70px;">
Search For:
</span>
<select name="for" style="margin-left:46px;">
<option value="Title" selected="selected">Title</option>
<option value="Actor">Actor</option>
<option value="Writer">Writer</option>
<option value="Director">Director</option>
<option value="Company">Company</option>
<option value="IMDb_ID">IMDb ID</option>
</select><br>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:85px;">
Genre:
</span>
<select name="genre" style="margin-left:46px;">
<option value="All" selected="selected">All</option>
<option value="Action">Action</option>
<option value="Adventure">Adventure</option>
<option value="Animation">Animation</option>
<option value="Comedy">Comedy</option>
<option value="Crime">Crime</option>
<option value="Drama">Drama</option>
<option value="Family">Family</option>
<option value="Fantasy">Fantasy</option>
<option value="Horror">Horror</option>
<option value="Music">Music</option>
<option value="Musical">Musical</option>
<option value="Mystery">Mystery</option>
<option value="Romance">Romance</option>
<option value="Sci-Fi">Sci-Fi</option>
<option value="Sport">Sport</option>
<option value="Thriller">Thriller</option>
<option value="War">War</option>
<option value="Western">Western</option></select>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:82px;">Subtitle:</span>
<select name="lang" style="margin-left:46px;">
<option value="All" selected="selected">All</option>
<option value="Arabic">Arabic</option>
<option value="Czech">Czech</option>
<option value="Danish">Danish</option>
<option value="Dutch">Dutch</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Greek">Greek</option>
<option value="Indonesian">Indonesian</option>
<option value="Malay">Malay</option>
<option value="Spanish">Spanish</option>
<option value="Swedish">Swedish</option>
<option value="Turkish">Turkish</option>
</select>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:82.5px;">Quality:</span>
<select name="quality" style="margin-left:46px;">
<option value="All" selected="selected">All</option>
<option value="CAM">CAM</option>
<option value="Non-HD">Non HD</option>
<option value="HD">HD</option>
<option value="Full-HD">Full HD</option></select>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:85px;">Rating:</span>
<select name="rating" style="margin-left:46px;">
<option value="0" selected="selected">All</option>
<option value="9">9+</option>
<option value="8">8+</option>
<option value="7">7+</option>
<option value="6">6+</option>
<option value="5">5+</option>
<option value="4">4+</option>
<option value="3">3+</option>
<option value="2">2+</option>
<option value="1">1+</option>
</select><br>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:76px;">Order By:</span>
<select name="orderby" style="margin-left:46px;">
<option value="Latest" selected="selected">Latest</option>
<option value="Oldest">Oldest</option>
<option value="Rating">Rating</option>
<option value="Alphabetical">Alphabetical</option>
<option value="Views">Views</option></select>
</select>
</div>
</form>
Anyone who knows how to change the form url with something...

You can set you action attribute like any other attribute
$("form").attr("action", "/path/to/formaction");

How to properly pass dynamic input fields to another page for display?

So I have "add" and "delete" buttons that will respectively add/delete input fields. I also have a "preview" button ( using anchor tags) that will send the user to the next page. Upon clicking the preview button, I want to collect all information given and re-displayed on the next page.
I'm totally un aware of how to collect this dynamic information (user will add/delete BEFORE hitting preview, so the amount of input is unknown). How can I pass all this?
Here is what my code/markup looks like (Sorry if it is too many lines of code, I just want to give you as much information as possible):
JavaScript for deleting and adding fields:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
Add Line
Delete Line
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">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="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">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="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>
<div class="panel" style="width:98%; margin:0 auto">
<h5>Terms and Conditions</h5>
<p>I.</p>
<p>II.</p>
<p>III.</p>
<p>IV.</p>
</div>
<hr>
<div align="center">
Preview
</div>

If the information doesn't need to be secure, just use the url to pass parameters:
How to get the value from the GET parameters?
1) on your onclick function, you collect the information and create a string that is going to be the new url (with the parameters)
2) use window.location = newUrl; to access the link
3) in the new page, parse the URL to get the info

You can use localStorage variable to pass values between pages
eg. page 1:
localStorage.setItem("key","value");
page 2:
var value=localStorage.getItem("key");

How to add numbers from dynamic input fields?

I'm basically working on a form right now. But my form has "add" and "delete" buttons to accommodate extra fields. Now, one of the fields is a "total budget" field.
I'm going to send all input fields to another page. But, I want to be able to add up complete total amount from all "total budget" fields. (Keep in mind, there is one total budget field, but the user can "add"/"delete" and there could be more).
When I pass it to the next page, I want to pass them individually, and keep them as so for display. On the next page there will be an extra "final total amount" which I will display that.
Also, I'm using foundation 5 (Not sure if that matters).
Now, I'm not sure how to do this. Can some one point me towards the right way?
Here's what my mark up looks like:
JAVASCRIPT:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
Add Line
Delete Line
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">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="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">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="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>

Assuming the value in Total Budget is not a string and you dont need to parse it away from currency prefixes etc...:
var totalBudget = 0;
$("input[placeholder='Total Budget']").each(function() {
totalBudget += $(this).val();
});

You could have a "Grand Total" hidden input field in your HTML
<input type="hidden" id="grand-total" name="grand-total"/>
You can pass its value with the other input values when you go to the next page
Add a class="total-budget" to the "Total Budget" input fields, and a javascript function which calculates the grand total
function computeGrandTotal() {
var grandTotal = 0;
$(".total-budget").each(function () {
var total = $(this).val();
if ($.isNumeric(total)) {
grandTotal += parseFloat(total);
}
});
$('#grand-total').html(grandTotal);
}
Trigger the computeGrandTotal() function when you go to the next page
<a onclick="computeGrandTotal()" href="#">Go to next page</a>
jsfiddle

Categories