URL Parameters for Form Selections - javascript

URL: https://www.example.com/packagesearch/?destination=Caribbean%2FMexico&departure=LHR%2CLGW%2CLTN%2CSEN%2CSTN&departureDate=2018-06-24&durationMin=7&adults=2&children=0&product=sun&rating=345&infants=0&priceMin=0&priceMax=100000
I'm looking to carry the 'destination', 'departure', 'departureDate', 'durationMin', 'adults', 'children' and use them as pre set values in the following form for when the page loads.
<form method="get" action="/packagesearch/" id="hubv1search" class="clearfix" >
<div class="thm-tk-input-4-1 thm-tk-first-select">
<label>Where to?</label>
<select name="destination" class="select2">
<option class="group" value="Balearics">Balearic Islands</option>
<option value="Balearics/Ibiza"> Ibiza</option>
<option value="Balearics/Majorca"> Majorca</option>
<option value="Balearics/Menorca"> Menorca</option>
<option class="group" value="Bulgaria">Bulgaria</option>
<option value="Bulgaria/Bourgas Region"> Bourgas Region</option>
<option value="Bulgaria/Varna Region"> Varna Region</option>
<option class="group" value="Canaries">Canary Islands</option>
<option value="Canaries/Fuerteventura"> Fuerteventura</option>
<option value="Canaries/Gran Canaria"> Gran Canaria</option>
<option value="Canaries/La Palma"> La Palma</option>
<option value="Canaries/Lanzarote"> Lanzarote</option>
<option value="Canaries/Tenerife"> Tenerife</option>
<option class="group" value="Cape Verde">Cape Verde Islands</option>
<option value="Cape Verde/Boa Vista"> Boa Vista</option>
<option value="Cape Verde/Santa Maria"> Santa Maria</option>
<option class="group" value="Caribbean">Caribbean</option>
<option value="Caribbean/Antigua"> Antigua</option>
<option value="Caribbean/Aruba"> Aruba</option>
<option value="Caribbean/Bahamas"> Bahamas</option>
<option value="Caribbean/Barbados"> Barbados</option>
<option value="Caribbean/Bermuda"> Bermuda</option>
<option value="Caribbean/British Virgin Islands"> British Virgin Islands</option>
<option value="Caribbean/Costa Rica"> Costa Rica</option>
<option value="Caribbean/Cuba"> Cuba</option>
<option value="Caribbean/Dominican Republic"> Dominican Republic</option>
<option value="Caribbean/Grenada"> Grenada</option>
<option value="Caribbean/Grenadines"> Grenadines</option>
<option value="Caribbean/Jamaica"> Jamaica</option>
<option value="Caribbean/Mexico"> Mexico</option>
<option value="Caribbean/Saint Kitts & Nevis"> Saint Kitts & Nevis</option>
<option value="Caribbean/St. Lucia"> St. Lucia</option>
<option value="Caribbean/Trinidad & Tobago"> Trinidad & Tobago</option>
<option class="group" value="Croatia">Croatia</option>
<option value="Croatia/Dalmatian Riviera"> Dalmatian Riviera</option>
<option value="Croatia/Dubrovnik Riviera"> Dubrovnik Riviera</option>
<option class="group" value="Cyprus">Cyprus</option>
<option value="Cyprus/Larnaca Region"> Larnaca Region</option>
<option value="Cyprus/Paphos Region"> Paphos Region</option>
<option class="group" value="Egypt">Egypt</option>
<option value="Egypt/Hurghada"> Hurghada</option>
<option value="Egypt/Luxor"> Luxor</option>
<option value="Egypt/Naama Bay"> Naama Bay</option>
<option value="Egypt/Nabq Bay"> Nabq Bay</option>
<option value="Egypt/Shark's Bay"> Shark's Bay</option>
<option value="Egypt/Sharm El Sheikh"> Sharm El Sheikh</option>
<option value="Egypt/Soma Bay"> Soma Bay</option>
<option class="group" value="Far East">Far East</option>
<option value="Far East/Bali"> Bali</option>
<option value="Far East/Thailand"> Thailand</option>
<option class="group" value="Greece">Greece</option>
<option value="Greece/Alonissos"> Alonissos</option>
<option value="Greece/Attica"> Attica</option>
<option value="Greece/Corfu"> Corfu</option>
<option value="Greece/Crete"> Crete</option>
<option value="Greece/Evia"> Evia</option>
<option value="Greece/Halki"> Halki</option>
<option value="Greece/Halkidiki"> Halkidiki</option>
<option value="Greece/Ios"> Ios</option>
<option value="Greece/Ithaka"> Ithaka</option>
<option value="Greece/Kalamata"> Kalamata</option>
<option value="Greece/Kalymnos"> Kalymnos</option>
<option value="Greece/Karpathos"> Karpathos</option>
<option value="Greece/Kefalonia"> Kefalonia</option>
<option value="Greece/Kos"> Kos</option>
<option value="Greece/Lefkada"> Lefkada</option>
<option value="Greece/Leros"> Leros</option>
<option value="Greece/Lesbos"> Lesbos</option>
<option value="Greece/Meganissi"> Meganissi</option>
<option value="Greece/Mykonos"> Mykonos</option>
<option value="Greece/Paros"> Paros</option>
<option value="Greece/Paxos"> Paxos</option>
<option value="Greece/Pelion"> Pelion</option>
<option value="Greece/Peloponnese"> Peloponnese</option>
<option value="Greece/Preveza"> Preveza</option>
<option value="Greece/Rhodes"> Rhodes</option>
<option value="Greece/Samos"> Samos</option>
<option value="Greece/Santorini"> Santorini</option>
<option value="Greece/Skiathos"> Skiathos</option>
<option value="Greece/Skopelos"> Skopelos</option>
<option value="Greece/Symi"> Symi</option>
<option value="Greece/Syros"> Syros</option>
<option value="Greece/Thassos"> Thassos</option>
<option value="Greece/Thessaloniki"> Thessaloniki</option>
<option value="Greece/Thessaly"> Thessaly</option>
<option value="Greece/Zante"> Zante</option>
<option class="group" value="Indian Ocean">Indian Ocean</option>
<option value="Indian Ocean/Goa"> Goa</option>
<option value="Indian Ocean/India"> India</option>
<option value="Indian Ocean/Kerala"> Kerala</option>
<option value="Indian Ocean/Maldives"> Maldives</option>
<option value="Indian Ocean/Mauritius"> Mauritius</option>
<option value="Indian Ocean/Seychelles"> Seychelles</option>
<option value="Indian Ocean/Sri Lanka"> Sri Lanka</option>
<option class="group" value="Italy">Italy</option>
<option value="Italy/Abruzzo"> Abruzzo</option>
<option value="Italy/Campania"> Campania</option>
<option value="Italy/Friuli-Venezia Giulia"> Friuli-Venezia Giulia</option>
<option value="Italy/Lazio"> Lazio</option>
<option value="Italy/Lombardy"> Lombardy</option>
<option value="Italy/Piemonte"> Piemonte</option>
<option value="Italy/Sardinia"> Sardinia</option>
<option value="Italy/Sicily"> Sicily</option>
<option value="Italy/Trentino-Alto Adige"> Trentino-Alto Adige</option>
<option value="Italy/Tuscany"> Tuscany</option>
<option value="Italy/Veneto"> Veneto</option>
<option class="group" value="Maltese Islands">Maltese Islands</option>
<option value="Maltese Islands/Malta"> Malta</option>
<option class="group" value="Morocco">Morocco</option>
<option value="Morocco/Agadir"> Agadir</option>
<option value="Morocco/Marrakech"> Marrakech</option>
<option class="group" value="Portugal">Portugal</option>
<option value="Portugal/Algarve"> Algarve</option>
<option value="Portugal/Madeira"> Madeira</option>
<option class="group" value="Spain">Spain</option>
<option value="Spain/Costa Blanca"> Costa Blanca</option>
<option value="Spain/Costa Brava"> Costa Brava</option>
<option value="Spain/Costa Del Sol"> Costa Del Sol</option>
<option value="Spain/Costa Dorada"> Costa Dorada</option>
<option class="group" value="Tunisia">Tunisia</option>
<option value="Tunisia/Tunis"> Tunis</option>
<option class="group" value="Turkey">Turkey</option>
<option value="Turkey/Antalya"> Antalya Area</option>
<option value="Turkey/Bodrum"> Bodrum Area</option>
<option value="Turkey/Dalaman"> Dalaman Area</option>
<option value="Turkey/Izmir"> Izmir</option>
<option class="group" value="USA">USA</option>
<option value="USA/California"> California (Los Angeles)</option>
<option value="USA/Florida"> Florida</option>
<option value="USA/Nevada"> Nevada (Las Vegas)</option>
</select>
</div>
<div class="thm-tk-input-5-1">
<label>Fly from</label>
<select name="departure" class="select2">
<option class="group" value="LHR,LGW,LTN,SEN,STN">All London</option>
<option value="LGW"> London Gatwick</option>
<option value="LHR"> London Heathrow</option>
<option value="LTN"> London Luton</option>
<option value="SEN"> London Southend</option>
<option value="STN"> London Stansted</option>
<option class="group" value="BHX,EMA">All Midlands</option>
<option value="BHX"> Birmingham</option>
<option value="EMA"> East Midlands</option>
<option class="group" value="MME,NCL">All North East</option>
<option value="MME"> Durham Tees Valley</option>
<option value="NCL"> Newcastle</option>
<option class="group" value="BLK,LPL,MAN">All North West</option>
<option value="BLK"> Blackpool</option>
<option value="LPL"> Liverpool</option>
<option value="MAN"> Manchester</option>
<option class="group" value="BFS,BHD,LDY">All Northern Ireland</option>
<option value="BFS"> Belfast</option>
<option value="BHD"> Belfast City</option>
<option value="LDY"> City Of Derry</option>
<option class="group" value="ABZ,EDI,GLA,PIK,INV">All Scotland</option>
<option value="ABZ"> Aberdeen</option>
<option value="EDI"> Edinburgh</option>
<option value="GLA"> Glasgow</option>
<option value="PIK"> Glasgow Prestwick</option>
<option value="INV"> Inverness</option>
<option class="group" value="BOH,SOU">All South</option>
<option value="BOH"> Bournemouth</option>
<option value="SOU"> Southampton</option>
<option class="group" value="BRS,CWL,EXT,NQY">All West Country + Wales</option>
<option value="BRS"> Bristol</option>
<option value="CWL"> Cardiff</option>
<option value="EXT"> Exeter</option>
<option value="NQY"> Newquay</option>
<option class="group" value="DSA,HUY,LBA">All Yorkshire</option>
<option value="DSA"> Doncaster Sheffield</option>
<option value="HUY"> Humberside</option>
<option value="LBA"> Leeds Bradford</option>
<option class="group" value="NWI">All East Anglia</option>
<option value="NWI"> Norwich</option>
</select>
</div>
<div class="thm-tk-input-5-1">
<label>When</label>
<input type="text" name="departureDate" class="thm-date-picker" placeholder="Select a date">
</div>
<div class="thm-tk-input-5-1">
<label>Duration</label>
<select name="durationMin" class="select2">
<option value="7">Any</option>
<option value="7">7 Nights</option>
<option value="10">10 Nights</option>
<option value="11">11 Nights</option>
<option value="14">14 Nights</option>
<option value="21">21 Nights</option>
</select>
</div>
<div class="thm-tk-input-15">
<div class="thm-tk-input-2-1">
<label>Adults</label>
<select name="adults" class="select2">
<option value="2"><?php esc_html_e('2', 'themeum-core'); ?></option>
<option value="3"><?php esc_html_e('3', 'themeum-core'); ?></option>
<option value="4"><?php esc_html_e('4', 'themeum-core'); ?></option>
<option value="5"><?php esc_html_e('5', 'themeum-core'); ?></option>
<option value="6"><?php esc_html_e('6', 'themeum-core'); ?></option>
<option value="7"><?php esc_html_e('7', 'themeum-core'); ?></option>
<option value="8"><?php esc_html_e('8', 'themeum-core'); ?></option>
</select>
</div>
<div class="thm-tk-input-2-1">
<label>Children</label>
<select name="children" class="select2">
<option value="0"><?php esc_html_e('0', 'themeum-core'); ?></option>
<option value="1"><?php esc_html_e('1', 'themeum-core'); ?></option>
<option value="2"><?php esc_html_e('2', 'themeum-core'); ?></option>
<option value="3"><?php esc_html_e('3', 'themeum-core'); ?></option>
<option value="4"><?php esc_html_e('4', 'themeum-core'); ?></option>
<option value="5"><?php esc_html_e('5', 'themeum-core'); ?></option>
<option value="6"><?php esc_html_e('6', 'themeum-core'); ?></option>
<option value="7"><?php esc_html_e('7', 'themeum-core'); ?></option>
<option value="8"><?php esc_html_e('8', 'themeum-core'); ?></option>
</select>
</div>
</div>
<button class="btn btn-primary thm-tk-search-btn" id="flight-search" type="submit"><?php esc_html_e('Search', 'themeum-core'); ?></button><br>
<input type="hidden" name="product" value="sun"><input type="hidden" name="rating" value="345"><input type="hidden" name="infants" value="0"><input type="hidden" name="priceMin" value="0"><input type="hidden" name="priceMax" value="100000">
</div></form>

Related

Why are the 2 <select> elements that are being appended to my form not looking the same as the first 2 fixed in my Form?

I have an HTML form that gets company information.
In that form, I have 2 <select multiple> elements (one for company countries and one for sectors) on which I used JQuery and Bootstrap to give them a nice style and to allow the user to choose multiple options in an easier manner.
The Problem: When the user clicks "Add Company Button" to add a new company section to the form, the appended <select multiple> elements are not being styled the same way.
The difference isn't between the first two select fields, it is rather between the first 2 select fields and the pairs that get added when you click 'Add Company'. The first two are appearing how I want them (2 rectangular boxes in which the user clicks on multiple options from the dropdown), while the others are appearing like an unstyled dropdown where you have to press Ctrl+click on the options you want to select
Please note that I removed the CSS and other parts of the page to keep things simple. Also in the appended section, I removed some options to stay within the character limit of this post
The code:
$(document).ready(function() {
$(".mul-select").select2({
placeholder: "Select Company Sectors", //placeholder
tags: true,
tokenSeparators: ['/', ',', ';', " "]
});
})
$(document).ready(function() {
$(".mul-select.countries").select2({
placeholder: "Company's Country Locations", //placeholder
tags: true,
tokenSeparators: ['/', ',', ';', " "]
});
})
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var index = $(".company-info").find(".company-info-row").length + 1;
$(".company-info").append(`
<div class="added company-info-row" style="margin:5% 0 0 0;">
<div class="company-data" style="padding:1% 4%;">
<div>
<select name="addedCompany[${index}][sectors][]" id="accountSector_${index}" class="dropdown mul-select" multiple="" tabindex="-1" aria-hidden="true">
<option value="Advertising">Advertising</option>
<option value="Aerospace">Aerospace</option>
<option value="Agriculture">Agriculture</option>
</select>
</div>
<div>
<select name="addedCompany[${index}][countries][]" id="additionalAccountLocations_${index}" class="dropdown mul-select countries" multiple="true">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</div>
</div>
<div class="add_del_btn_outer_comp" style="margin:0 4% 0 4%;">
<button class="add_new_frm_field_btn">
<img src="add-icon.png" alt="Add Company Button">
</button>
<button class="remove_node_btn_frm_field" disabled>
<img src="remove-icon.png" alt="Remove Company Button">
</button>
</div>
</div>
</div>
`);
$(".company-info").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".company-info").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
$(document).ready(function() {
//===== delete the form feed row
$("body").on("click", ".remove_node_btn_frm_field", function() {
$(this).closest(".company-info-row").remove();
console.log("success");
});
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="login-box">
<div class="company-info">
<div class="company-info-row">
<div class="company-data" style="padding:1% 4%;">
<div>
<select name="company[sectors][]" id="accountSector" class="dropdown mul-select" multiple>
<option value="Advertising">Advertising</option>
<option value="Aerospace">Aerospace</option>
<option value="Agriculture">Agriculture</option>
<option value="Apparel & Accessories">Apparel & Accessories</option>
<option value="Architecture">Architecture</option>
<option value="Automotive">Automotive</option>
<option value="Banking">Banking</option>
<option value="Biotechnology">Biotechnology</option>
<option value="Building Materials & Equipment">Building Materials & Equipment</option>
<option value="Chemical">Chemical</option>
<option value="Computer">Computer</option>
<option value="Construction">Construction</option>
<option value="Consulting">Consulting</option>
<option value="Creative">Creative</option>
<option value="Culture">Culture</option>
<option value="Defense">Defense</option>
<option value="Education">Education</option>
<option value="Electric Power">Electric Power</option>
<option value="Electronics">Electronics</option>
<option value="Energy">Energy</option>
<option value="Entertainment & Leisure">Entertainment & Leisure</option>
<option value="Finance">Finance</option>
<option value="Food & Beverage">Food & Beverage</option>
<option value="Grocery">Grocery</option>
<option value="Healthcare">Healthcare</option>
<option value="Hospitality">Hospitality</option>
<option value="Insurance">Insurance</option>
<option value="Legal">Legal</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Marketing">Marketing</option>
<option value="Mass Media">Mass Media</option>
<option value="Mining">Mining</option>
<option value="Music">Music</option>
<option value="Petroleum">Petroleum</option>
<option value="Publishing">Publishing</option>
<option value="Real Estate">Real Estate</option>
<option value="Retail">Retail</option>
<option value="Service">Service</option>
<option value="Shipping">Shipping</option>
<option value="Software">Software</option>
<option value="Sports">Sports</option>
<option value="Support">Support</option>
<option value="Technology">Technology</option>
<option value="Telecommunications">Telecommunications</option>
<option value="Television">Television</option>
<option value="Testing, Inspection & Certification">Testing, Inspection & Certification</option>
<option value="Transportation">Transportation</option>
<option value="Travel">Travel</option>
<option value="Venture Capital">Venture Capital</option>
<option value="Water">Water</option>
<option value="Wholesale">Wholesale</option>
</select>
</div>
<div>
<select name="company[countries][]" id="additionalAccountLocations" class="dropdown mul-select countries" multiple>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">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 DIvoire">Cote DIvoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curaco">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="Indonesia">Indonesia</option>
<option value="India">India</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">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="Phillipines">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="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="United Kingdom">United Kingdom</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Erimates">United Arab Emirates</option>
<option value="United States of America">United States of America</option>
<option value="Uraguay">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>
</div>
</div>
<div class="add_del_btn_outer_comp" style="margin:0 4% 0 4%;">
<button class="add_new_frm_field_btn">
<img src="add-icon.png" alt="Add Company Button">
</button>
<button class="remove_node_btn_frm_field" disabled>
<img src="remove-icon.png" alt="Remove Company Button">
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Any help in making them appear and function in the same way is highly appreciated. Thank you in advance!
My Fiddle: https://jsfiddle.net/30jwqfc5/

The first two select elements are instance of select2 and the later element is native html select. You need to instantiate select2 for the dynamically generated select elements after hitting the add company button, inside the click handler,
$('.mul-select').select2();
here is the fiddle https://jsfiddle.net/vpof3ab5/

File progress bar using jquery form and laravel

I want to implement a progress-bar in my form when uploading a file. i added the jquery form script below
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
and added a this script
<script>
var main = function(){
$("#upload").on('submit',function(e)
{
e.preventDefault();
$(this).ajaxSubmit(
{
beforeSend:function(){
$("prog").show();
$("#prog").attr('value','0');
},
uploadProgress:function(event,position,total,percentComplete)
{
$("#prog").attr('value', percentComplete);
},
success: function(data){
$("#here").html(data);
}
})
})
};
$(document).ready(main);
Any here is my form
<form method="POST" action="/store" enctype="multipart/form-data" id="upload">
#csrf
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Name</label>
<sup class="required" title="Required">*</sup>
<input type="text" class="file" title="Name" value="{{old('name')}}" name="name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Email</label>
<sup class="required" title="Required">*</sup>
<input type="text" class="file" title="Email" value="{{old('email')}}" name="email" >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Phone</label>
<sup class="required" title="Required">*</sup>
<input type="number" class="file" title="Phone" value="{{old('phone')}}" name="phone" >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Country</label>
<sup class="required" title="Required">*</sup>
<select class="file" title="Country" id="country" value="{{old('country')}}" name="country">
<option value="">Select your country</option>
<option value="United States">United States</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and 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="Azerbaidjan">Azerbaidjan</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="Bosnia-Herzegovina">Bosnia-Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</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="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="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Islands">Cocos Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, Democratic Republic">Congo, Democratic Republic</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="Djibuti">Djibuti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</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 Territories">French Southern Territories</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="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea Bissau">Guinea Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard and MC Donald Islands">Heard and MC Donald Islands</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="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, Democratic People's Rep">Korea, Democratic People's Rep</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kosovo">Kosovo</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="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</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="Micronesia">Micronesia</option>
<option value="Moldava">Moldava</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</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="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</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">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="S Georgia and S Sandwich Islands">S Georgia and S Sandwich Islands</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and 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="St Helena">St Helena</option>
<option value="St Kitts and Nevis">St Kitts and Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Pierre and Miquelon">St Pierre and Miquelon</option>
<option value="St Vincent and Grenadines">St Vincent and Grenadines</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="US Minor Islands">US Minor Islands</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="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (British)">Virgin Islands (British)</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Yugoslavia">Yugoslavia</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Title of video</label>
<sup class="required" title="Required">*</sup>
<input type="text" name="title" title="Title of video" value="{{old('title')}}" class="file" name="video">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Regional Agency</label>
<sup class="required" title="Required">*</sup>
<select class="file" title="Regional Agency" id="state" {{old('agency')}} name="agency">
<option value="">Select your regional agency</option>
<option>Africa</option>
<option>Asia</option>
<option>Australia</option>
<option>Europe/United Kingdom</option>
<option>North America</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Category</label>
<sup class="required" title="Required">*</sup>
<select class="file" title="Category" id="state" {{old('category')}} name="category">
<option value="">Select a category</option>
<option value="Traditional Rhythm (Small Band)">Traditional Rhythm (small band)</option>
<option value="Traditional Rhythm (Large Band)">Traditional Rhythm (large band)</option>
<option value="Voices and Percussion (Small Band)">Voices and Percussion (small band)</option>
<option value="Voices and Percussion (Large Band)">Voices and Percussion (large band)</option>
<option value="Melodic Percussion (Small Band)">Melodic Percussion (small band)</option>
<option value="Melodic Percussion (Large Band)">Melodic Percussion (large band)</option>
<option value="Drum Kit Solo">Drum Kit Solo</option>
<option value="Drum Line Face Off (Small Band)">Drum Line Face-off (small band)</option>
<option value="Drum Line Face Off (Large Band)">Drum Line Face-off (large band)</option>
<option value="Innovative and Creative Rhythm (Small Band)">Innovative and Creative Rhythm (small band)</option>
<option value="Innovative and Creative Rhythm (Large Band)">Innovative and Creative Rhythm (large band)</option>
</select>
</div>
</div>
<div class="container" style="margin-top:10px;">
<label style="margin-bottom:-10%;">VIDEO UPLOAD</label><hr>
<input type="file" title="Upload a Video" name="video" class="file">
<progress max="100" value="0" id="prog" style="display:none;"></progress>
<div id="here"></div>
</div>
<div class="col-md-12 col-sm-12">
<br>
<button type="submit" class="btn btn-info btn-block" disabled><i class="fa fa-save"></i> SUBMIT APPLICATION</button>
</div>
</div>
</form>
Now, it disabled my submit button and when i checked the console, i get the error message 'ajaxSubmit is not a function at HTMLFormElement'. Please what am i doing wrong?
Please, any help will be deeply appreciated.
Thanks

Prevent refresh when submitting form by POST

I'm trying to embed the following form on a page, and when people press submit, the form submits via POST and then the page scrolls down to the next slide.
However the CMS which the form is based on forces a redirect when the form is submitted, which obviously takes the user away from my page.
How can I prevent the form from redirecting? I assume I would have to prevent the submit via e.preventDefault(); and then manually write some javascript to post the form, but confused as to how to do that. So far all my attempts have just stopped the form from submitting altogether.
<form name="signup" class="bsd-signup-135" action="https://***" method="post" id="signup">
<div class="fieldset" id="bsd-field-country">
<div class="label"><label class="field">Country</label></div>
<div class="input">
<select id="country" name="country">
<option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="VG">British Virgin Islands</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros Islands</option>
<option value="CD">Congo, Democratic Republic of the</option>
<option value="CG">Congo, Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Cote D'ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="TP">East Timor</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Republic of Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KR">South Korea</option>
<option value="XK">Kosovo</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn Island</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SH">St. Helena</option>
<option value="PM">St. Pierre and Miquelon</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SY">Syria</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB" selected="selected">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="VN">Viet Nam</option>
<option value="VI">Virgin Islands (U.S.)</option>
<option value="WF">Wallis and Futuna Islands</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</div>
<div class="fieldset" id="bsd-field-email">
<div class="label"><label class="field">Email</label></div>
<div class="input"><input type="email" class="text" size="48" id="email" name="email"></div>
</div>
<div class="fieldset" id="bsd-field-firstname">
<div class="label"><label class="field">First Name</label></div>
<div class="input"><input size="16" id="firstname" name="firstname" type="text"></div>
</div>
<div class="fieldset" id="bsd-field-lastname">
<div class="label"><label class="field">Last Name</label></div>
<div class="input"><input size="25" id="lastname" name="lastname" type="text"></div>
</div>
<div class="fieldset" id="bsd-field-custom-1963-group">
<div class="label"><label class="field">Radio buttons:</label></div>
<div class="input"> <input id="custom-1963_0" class="custom-1963" name="custom-1963" value="1" type="radio"><label for="custom-1963_0">Option 1</label> <input id="custom-1963_1" class="custom-1963" name="custom-1963" value="2" type="radio"><label for="custom-1963_1">Option 2</label> <input id="custom-1963_2" class="custom-1963" name="custom-1963" value="3" type="radio"><label for="custom-1963_2">Option 3</label> </div>
</div>
<div class="fieldset" id="bsd-field-email_opt_in">
<div class="label"><label class="field"></label></div>
<div class="input"><input id="email_opt_in" name="email_opt_in" type="checkbox" value="1"><label for="email_opt_in">Would you like to receive updates about our news, campaigns and appeals by email?</label></div>
</div>
<div class="fieldset" id="bsd-field-submit-btn">
<div class="label"><label class="field"></label></div>
<div class="input"><input name="submit-btn" value="Sign the petition" type="submit" id="submit_button"></div>
</div>
</form>
I got this far with the javascript, but was unsure of how to post whether a field is checked or not, or how to post radios (especially radios with a hyphen in their name/ID, which I cannot change due to CMS.
$("#signup").submit(function(event) {
event.preventDefault();
var $form = $(this),
url = $form.attr("action");
var posting = $.post(url, {
country: $("#country").val(),
email: $("#email").val(),
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
});
posting.done(function(data) {
alert("Success!");
});
});

How do I grab the option text from a value

So I have this snippet of HTML:
<div class="col-md-3">
<div class="form-group">
<select id="billcountry" class="form-control" name="bill_country" onchange="alert(this.value); console.log(this);" tabindex="16">
<option value="USA">United States</option>
<option value="CAN">Canada</option>
<option value="AFGH">Afghanistan</option>
<option value="ALBA">Albania</option>
<option value="ALGE">Algeria</option>
<option value="ANGO">Angola</option>
<option value="ANGU">Anguilla</option>
<option value="ANTA">Antartica</option>
<option value="ANTI">Antigua & Barbuda</option>
<option value="ARGE">Argentina</option>
<option value="ARME">Armenia</option>
<option value="ARUB">Aruba</option>
<option value="AUST">Austria</option>
<option value="AUS">Australia</option>
<option value="AZER">Azerbaijan</option>
<option value="BAHA">Bahamas</option>
<option value="BAHR">Bahrain</option>
<option value="BANG">Bangladesh</option>
<option value="BARB">Barbados</option>
<option value="BELA">Belarus</option>
<option value="BELG">Belgium</option>
<option value="BELI">Belize</option>
<option value="BENI">Benin</option>
<option value="BERM">Bermuda</option>
<option value="BHUT">Bhutan</option>
<option value="BOLI">Bolivia</option>
<option value="BORN">Borneo</option>
<option value="BOSN">Bosnia</option>
<option value="BOTS">Botswana</option>
<option value="BRAZ">Brazil</option>
<option value="BRIO">British Indian Ocean Territories</option>
<option value="BRVI">British Virgin Islands</option>
<option value="BRUN">Brunei</option>
<option value="BULG">Bulgaria</option>
<option value="BURK">Burkina Faso</option>
<option value="BURU">Burundi</option>
<option value="CAMB">Cambodia</option>
<option value="CAME">Cameroon</option>
<option value="CAPV">Cape Verde Island</option>
<option value="CAYM">Cayman Islands</option>
<option value="CAFR">Central African Republic</option>
<option value="CHAD">Chad</option>
<option value="CHIL">Chile</option>
<option value="CHIN">China</option>
<option value="COLO">Colombia</option>
<option value="COMO">Comoros</option>
<option value="CONG">Congo</option>
<option value="COST">Costa Rica</option>
<option value="IVOR">Cote D'ivoire</option>
<option value="CROA">Croatia</option>
<option value="CUBA">Cuba</option>
<option value="CYPR">Cyprus</option>
<option value="CZEC">Czech Republic</option>
<option value="DENM">Denmark</option>
<option value="DJIB">Djibouti</option>
<option value="DOMI">Dominican Republic</option>
<option value="ECUA">Ecuador</option>
<option value="EGYP">Egypt</option>
<option value="ELSA">El Salvador</option>
<option value="ENGL">England</option>
<option value="EQGU">Equatorial Guinea</option>
<option value="ERIT">Eritrea</option>
<option value="ESTO">Estonia</option>
<option value="ETHI">Ethiopia</option>
<option value="FALK">Falkland Islands</option>
<option value="FARO">Faroe Islands</option>
<option value="FIJI">Fiji</option>
<option value="FINL">Finland</option>
<option value="FRAN">France</option>
<option value="FRGU">French Guiana</option>
<option value="POLY">French Polynesia</option>
<option value="FRST">French So Territories</option>
<option value="GABO">Gabon</option>
<option value="GAMB">Gambia</option>
<option value="GEOR">Georgia</option>
<option value="GERM">Germany</option>
<option value="GHAN">Ghana</option>
<option value="GIBR">Gibraltar</option>
<option value="GREC">Greece</option>
<option value="GREE">Greenland</option>
<option value="GREN">Grenada</option>
<option value="GUAD">Guadeloupe</option>
<option value="GUAT">Guatemala</option>
<option value="GUIB">Guinea-bissau</option>
<option value="GUYA">Guyana</option>
<option value="HAIT">Haiti</option>
<option value="HOND">Honduras</option>
<option value="HONG">Hong Kong</option>
<option value="HUNG">Hungary</option>
<option value="ICEL">Iceland</option>
<option value="INDI">India</option>
<option value="INDO">Indonesia</option>
<option value="IRAN">Iran</option>
<option value="IRAQ">Iraq</option>
<option value="IREL">Ireland</option>
<option value="ISRA">Israel</option>
<option value="ITAL">Italy</option>
<option value="JAMA">Jamaica</option>
<option value="JAPA">Japan</option>
<option value="JORD">Jordan</option>
<option value="KAZA">Kazakhstan</option>
<option value="KENY">Kenya</option>
<option value="KUWA">Kuwait</option>
<option value="KYRG">Kyrgyzstan</option>
<option value="LAOS">Laos</option>
<option value="LATV">Latvia</option>
<option value="LEBA">Lebanon</option>
<option value="LESO">Lesotho</option>
<option value="LIBE">Liberia</option>
<option value="LIBY">Libya</option>
<option value="LIEC">Liechtenstien</option>
<option value="LITH">Lithuania</option>
<option value="LUXE">Luxembourg</option>
<option value="MACA">Macau</option>
<option value="MACE">Macedonia</option>
<option value="MADA">Madagascar</option>
<option value="MALW">Malawi</option>
<option value="MALA">Malaysia</option>
<option value="MALD">Maldives</option>
<option value="MALI">Mali</option>
<option value="MALT">Malta</option>
<option value="MART">Martinique</option>
<option value="MAUA">Mauritania</option>
<option value="MAUS">Mauritius</option>
<option value="MAYO">Mayotte</option>
<option value="MEXI">Mexico</option>
<option value="MOLD">Moldova</option>
<option value="MONA">Monaco</option>
<option value="MONG">Mongolia</option>
<option value="MONT">Montserrat</option>
<option value="MORO">Morocco</option>
<option value="MOZA">Mozambique</option>
<option value="MYAN">Myanmar</option>
<option value="NIRE">N Ireland</option>
<option value="NAMI">Namibia</option>
<option value="NEPA">Nepal</option>
<option value="NETH">Netherlands</option>
<option value="NANT">Netherlands Antilles</option>
<option value="NCAL">New Caledonia</option>
<option value="NGUI">New Guinea</option>
<option value="NZEA">New Zealand</option>
<option value="NICA">Nicaragua</option>
<option value="NIGE">Niger</option>
<option value="NIGA">Nigeria</option>
<option value="NKOR">North Korea</option>
<option value="NORW">Norway</option>
<option value="OMAN">Oman</option>
<option value="PAKI">Pakistan</option>
<option value="PANA">Panama</option>
<option value="PAPU">Papua New Guinea</option>
<option value="PARA">Paraguay</option>
<option value="PERU">Peru</option>
<option value="PHIL">Philippines</option>
<option value="POLA">Poland</option>
<option value="PORT">Portugal</option>
<option value="ANDO">Principality Of Andorra</option>
<option value="QATA">Qatar</option>
<option value="ROMA">Romania</option>
<option value="RUSS">Russia</option>
<option value="RWAN">Rwanda</option>
<option value="SGEO">S Georgia & S Sandwich Isls</option>
<option value="SOMO">Samoa (western)</option>
<option value="SANM">San Marino</option>
<option value="SAOT">Sao Tome & Principe</option>
<option value="SAUD">Saudi Arabia</option>
<option value="SCOT">Scotland</option>
<option value="SENE">Senegal</option>
<option value="SEYC">Seychelles Island</option>
<option value="SIER">Sierra Leone</option>
<option value="SING">Singapore</option>
<option value="SLVK">Slovakia</option>
<option value="SLVN">Slovenia</option>
<option value="SOLO">Solomon Island</option>
<option value="SOMA">Somalia</option>
<option value="SAFR">South Africa</option>
<option value="SKOR">South Korea</option>
<option value="SPAI">Spain</option>
<option value="SRIL">Sri Lanka</option>
<option value="STHL">St Helena</option>
<option value="STKN">St Kitts & Nevis</option>
<option value="STLU">St Lucia</option>
<option value="STPM">St Pierre & Miquelon</option>
<option value="STVG">St Vincent & The Grenadines</option>
<option value="SUDA">Sudan</option>
<option value="SURI">Suriname</option>
<option value="SWAZ">Swaziland</option>
<option value="SWED">Sweden</option>
<option value="SWIT">Switzerland</option>
<option value="SYRI">Syria</option>
<option value="TAIW">Taiwan</option>
<option value="TANZ">Tanzania</option>
<option value="THAI">Thailand</option>
<option value="TOGO">Togo</option>
<option value="TONG">Tonga</option>
<option value="TRIN">Trinidad & Tobago</option>
<option value="TUNI">Tunisia</option>
<option value="TURK">Turkey</option>
<option value="TURC">Turks & Caicos Islands</option>
<option value="UGAN">Uganda</option>
<option value="UKRA">Ukraine</option>
<option value="UAE">United Arab Emirates</option>
<option value="URUG">Uruguay</option>
<option value="UZBE">Uzbekistan</option>
<option value="VATI">Vatican</option>
<option value="VENE">Venezuela</option>
<option value="VIET">Vietnam</option>
<option value="WALE">Wales</option>
<option value="WFIS">Wallis & Futuna Islands</option>
<option value="SAHA">Western Sahara</option>
<option value="WSAM">Western Samoa</option>
<option value="YEME">Yemen</option>
<option value="YUGO">Yugoslavia</option>
<option value="ZAIR">Zaire</option>
<option value="ZAMB">Zambia</option>
<option value="ZIMB">Zimbabwe</option>
</select>
</div>
</div>
And as you can see, when the value of the <select> changes, the new value is passed to an alert currently.
I have looked all over for a solution (without jQuery to grab the options text based solely off of the value.
So if the select were changed to value USA, I have attempted (and failed) at getting the words United States
Any thoughts on how to efficiently go about this without using jQuery or having to loop through each option and checking its value and then grabbing its innerHTML if it matches?
**EDIT: ** I am searching for the actual TEXT and not the VALUE. Why this isn't duplicate.

Avoid using JavaScript inside and element.
You can try this:
var select = document.getElementById('billcountry');
select.addEventListener('change', function () {
console.log(this.options[this.selectedIndex].text);
});

You can use this to get the text of the selected element:
this[this.selectedIndex].innerHTML
<div class="col-md-3">
<div class="form-group">
<select id="billcountry" class="form-control" name="bill_country" onchange="alert(this[this.selectedIndex].innerHTML); console.log(this);" tabindex="16">
<option value="USA">United States</option>
<option value="CAN">Canada</option>
<option value="AFGH">Afghanistan</option>
<option value="ALBA">Albania</option>
<option value="ALGE">Algeria</option>
<option value="ANGO">Angola</option>
<option value="ANGU">Anguilla</option>
<option value="ANTA">Antartica</option>
<option value="ANTI">Antigua & Barbuda</option>
<option value="ARGE">Argentina</option>
<option value="ARME">Armenia</option>
<option value="ARUB">Aruba</option>
<option value="AUST">Austria</option>
<option value="AUS">Australia</option>
<option value="AZER">Azerbaijan</option>
<option value="BAHA">Bahamas</option>
<option value="BAHR">Bahrain</option>
<option value="BANG">Bangladesh</option>
<option value="BARB">Barbados</option>
<option value="BELA">Belarus</option>
<option value="BELG">Belgium</option>
<option value="BELI">Belize</option>
<option value="BENI">Benin</option>
<option value="BERM">Bermuda</option>
<option value="BHUT">Bhutan</option>
<option value="BOLI">Bolivia</option>
<option value="BORN">Borneo</option>
<option value="BOSN">Bosnia</option>
<option value="BOTS">Botswana</option>
<option value="BRAZ">Brazil</option>
<option value="BRIO">British Indian Ocean Territories</option>
<option value="BRVI">British Virgin Islands</option>
<option value="BRUN">Brunei</option>
<option value="BULG">Bulgaria</option>
<option value="BURK">Burkina Faso</option>
<option value="BURU">Burundi</option>
<option value="CAMB">Cambodia</option>
<option value="CAME">Cameroon</option>
<option value="CAPV">Cape Verde Island</option>
<option value="CAYM">Cayman Islands</option>
<option value="CAFR">Central African Republic</option>
<option value="CHAD">Chad</option>
<option value="CHIL">Chile</option>
<option value="CHIN">China</option>
<option value="COLO">Colombia</option>
<option value="COMO">Comoros</option>
<option value="CONG">Congo</option>
<option value="COST">Costa Rica</option>
<option value="IVOR">Cote D'ivoire</option>
<option value="CROA">Croatia</option>
<option value="CUBA">Cuba</option>
<option value="CYPR">Cyprus</option>
<option value="CZEC">Czech Republic</option>
<option value="DENM">Denmark</option>
<option value="DJIB">Djibouti</option>
<option value="DOMI">Dominican Republic</option>
<option value="ECUA">Ecuador</option>
<option value="EGYP">Egypt</option>
<option value="ELSA">El Salvador</option>
<option value="ENGL">England</option>
<option value="EQGU">Equatorial Guinea</option>
<option value="ERIT">Eritrea</option>
<option value="ESTO">Estonia</option>
<option value="ETHI">Ethiopia</option>
<option value="FALK">Falkland Islands</option>
<option value="FARO">Faroe Islands</option>
<option value="FIJI">Fiji</option>
<option value="FINL">Finland</option>
<option value="FRAN">France</option>
<option value="FRGU">French Guiana</option>
<option value="POLY">French Polynesia</option>
<option value="FRST">French So Territories</option>
<option value="GABO">Gabon</option>
<option value="GAMB">Gambia</option>
<option value="GEOR">Georgia</option>
<option value="GERM">Germany</option>
<option value="GHAN">Ghana</option>
<option value="GIBR">Gibraltar</option>
<option value="GREC">Greece</option>
<option value="GREE">Greenland</option>
<option value="GREN">Grenada</option>
<option value="GUAD">Guadeloupe</option>
<option value="GUAT">Guatemala</option>
<option value="GUIB">Guinea-bissau</option>
<option value="GUYA">Guyana</option>
<option value="HAIT">Haiti</option>
<option value="HOND">Honduras</option>
<option value="HONG">Hong Kong</option>
<option value="HUNG">Hungary</option>
<option value="ICEL">Iceland</option>
<option value="INDI">India</option>
<option value="INDO">Indonesia</option>
<option value="IRAN">Iran</option>
<option value="IRAQ">Iraq</option>
<option value="IREL">Ireland</option>
<option value="ISRA">Israel</option>
<option value="ITAL">Italy</option>
<option value="JAMA">Jamaica</option>
<option value="JAPA">Japan</option>
<option value="JORD">Jordan</option>
<option value="KAZA">Kazakhstan</option>
<option value="KENY">Kenya</option>
<option value="KUWA">Kuwait</option>
<option value="KYRG">Kyrgyzstan</option>
<option value="LAOS">Laos</option>
<option value="LATV">Latvia</option>
<option value="LEBA">Lebanon</option>
<option value="LESO">Lesotho</option>
<option value="LIBE">Liberia</option>
<option value="LIBY">Libya</option>
<option value="LIEC">Liechtenstien</option>
<option value="LITH">Lithuania</option>
<option value="LUXE">Luxembourg</option>
<option value="MACA">Macau</option>
<option value="MACE">Macedonia</option>
<option value="MADA">Madagascar</option>
<option value="MALW">Malawi</option>
<option value="MALA">Malaysia</option>
<option value="MALD">Maldives</option>
<option value="MALI">Mali</option>
<option value="MALT">Malta</option>
<option value="MART">Martinique</option>
<option value="MAUA">Mauritania</option>
<option value="MAUS">Mauritius</option>
<option value="MAYO">Mayotte</option>
<option value="MEXI">Mexico</option>
<option value="MOLD">Moldova</option>
<option value="MONA">Monaco</option>
<option value="MONG">Mongolia</option>
<option value="MONT">Montserrat</option>
<option value="MORO">Morocco</option>
<option value="MOZA">Mozambique</option>
<option value="MYAN">Myanmar</option>
<option value="NIRE">N Ireland</option>
<option value="NAMI">Namibia</option>
<option value="NEPA">Nepal</option>
<option value="NETH">Netherlands</option>
<option value="NANT">Netherlands Antilles</option>
<option value="NCAL">New Caledonia</option>
<option value="NGUI">New Guinea</option>
<option value="NZEA">New Zealand</option>
<option value="NICA">Nicaragua</option>
<option value="NIGE">Niger</option>
<option value="NIGA">Nigeria</option>
<option value="NKOR">North Korea</option>
<option value="NORW">Norway</option>
<option value="OMAN">Oman</option>
<option value="PAKI">Pakistan</option>
<option value="PANA">Panama</option>
<option value="PAPU">Papua New Guinea</option>
<option value="PARA">Paraguay</option>
<option value="PERU">Peru</option>
<option value="PHIL">Philippines</option>
<option value="POLA">Poland</option>
<option value="PORT">Portugal</option>
<option value="ANDO">Principality Of Andorra</option>
<option value="QATA">Qatar</option>
<option value="ROMA">Romania</option>
<option value="RUSS">Russia</option>
<option value="RWAN">Rwanda</option>
<option value="SGEO">S Georgia & S Sandwich Isls</option>
<option value="SOMO">Samoa (western)</option>
<option value="SANM">San Marino</option>
<option value="SAOT">Sao Tome & Principe</option>
<option value="SAUD">Saudi Arabia</option>
<option value="SCOT">Scotland</option>
<option value="SENE">Senegal</option>
<option value="SEYC">Seychelles Island</option>
<option value="SIER">Sierra Leone</option>
<option value="SING">Singapore</option>
<option value="SLVK">Slovakia</option>
<option value="SLVN">Slovenia</option>
<option value="SOLO">Solomon Island</option>
<option value="SOMA">Somalia</option>
<option value="SAFR">South Africa</option>
<option value="SKOR">South Korea</option>
<option value="SPAI">Spain</option>
<option value="SRIL">Sri Lanka</option>
<option value="STHL">St Helena</option>
<option value="STKN">St Kitts & Nevis</option>
<option value="STLU">St Lucia</option>
<option value="STPM">St Pierre & Miquelon</option>
<option value="STVG">St Vincent & The Grenadines</option>
<option value="SUDA">Sudan</option>
<option value="SURI">Suriname</option>
<option value="SWAZ">Swaziland</option>
<option value="SWED">Sweden</option>
<option value="SWIT">Switzerland</option>
<option value="SYRI">Syria</option>
<option value="TAIW">Taiwan</option>
<option value="TANZ">Tanzania</option>
<option value="THAI">Thailand</option>
<option value="TOGO">Togo</option>
<option value="TONG">Tonga</option>
<option value="TRIN">Trinidad & Tobago</option>
<option value="TUNI">Tunisia</option>
<option value="TURK">Turkey</option>
<option value="TURC">Turks & Caicos Islands</option>
<option value="UGAN">Uganda</option>
<option value="UKRA">Ukraine</option>
<option value="UAE">United Arab Emirates</option>
<option value="URUG">Uruguay</option>
<option value="UZBE">Uzbekistan</option>
<option value="VATI">Vatican</option>
<option value="VENE">Venezuela</option>
<option value="VIET">Vietnam</option>
<option value="WALE">Wales</option>
<option value="WFIS">Wallis & Futuna Islands</option>
<option value="SAHA">Western Sahara</option>
<option value="WSAM">Western Samoa</option>
<option value="YEME">Yemen</option>
<option value="YUGO">Yugoslavia</option>
<option value="ZAIR">Zaire</option>
<option value="ZAMB">Zambia</option>
<option value="ZIMB">Zimbabwe</option>
</select> </div>
</div>

You can use the following code to achieve that. this (the select) contains an attribute options with all the option elements. It also has the current selectedIndex.
<select id="billcountry" class="form-control" name="bill_country" onchange="alert(this.options[this.selectedIndex].text); console.log(this);" tabindex="16">
Jsfiddle

You could use the element.querySelector['value='] to grab the option element by value and then grab the innerHTML property.
According to MDN, element.querySelector() "returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors." So it will have to search through each option element until it finds what it's looking for.
Here's an example:
HTML
<select name="color" id="color" onChange="handleChange.call(this)">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
JS Change Function
function handleChange(){
console.log(document.querySelector("[value=" + this.value + "]").innerHTML);
}

Get option value in form, then use it in a url

I have a form where you can select a nation, the nation contains a value. For example 34 with that value,<br> I can get a image if you put it in a url like 'http://packarmy.nl/img/nation/' . $_GET['nationvalue'] . '.png'
<img src='http://futhead.cursecdn.com/static/img/16/clubs/<? echo $_GET[nation_id] ?>' >
<select id="nation-id">
<option value="149">Afghanistan</option>
<option value="1">Albania</option>
<option value="97">Algeria</option>
<option value="194">American Samoa</option>
<option value="2">Andorra</option>
<option value="98">Angola</option>
<option value="62">Anguilla</option>
<option value="63">Antigua & Barbuda</option>
<option value="52" selected="yes">Argentina</option>
<option value="3">Armenia</option>
<option value="64">Aruba</option>
<option value="195">Australia</option>
<option value="4">Austria</option>
<option value="5">Azerbaijan</option>
<option value="65">Bahamas</option>
<option value="150">Bahrain</option>
<option value="151">Bangladesh</option>
<option value="66">Barbados</option>
<option value="6">Belarus</option>
<option value="7">Belgium</option>
<option value="67">Belize</option>
<option value="99">Benin</option>
<option value="68">Bermuda</option>
<option value="152">Bhutan</option>
<option value="53">Bolivia</option>
<option value="8">Bosnia Herzegovina</option>
<option value="100">Botswana</option>
<option value="54">Brazil</option>
<option value="69">British Virgin Isles</option>
<option value="153">Brunei Darussalam</option>
<option value="9">Bulgaria</option>
<option value="101">Burkina Faso</option>
<option value="102">Burundi</option>
<option value="154">Cambodia</option>
<option value="103">Cameroon</option>
<option value="70">Canada</option>
<option value="104">Cape Verde Islands</option>
<option value="71">Cayman Islands</option>
<option value="105">Central African Rep.</option>
<option value="106">Chad</option>
<option value="55">Chile</option>
<option value="155">China PR</option>
<option value="56">Colombia</option>
<option value="214">Comoros</option>
<option value="107">Congo</option>
<option value="196">Cook Islands</option>
<option value="72">Costa Rica</option>
<option value="10">Croatia</option>
<option value="73">Cuba</option>
<option value="11">Cyprus</option>
<option value="12">Czech Republic</option>
<option value="13">Denmark</option>
<option value="109">Djibouti</option>
<option value="74">Dominica</option>
<option value="207">Dominican Republic</option>
<option value="110">DR Congo</option>
<option value="57">Ecuador</option>
<option value="111">Egypt</option>
<option value="76">El Salvador</option>
<option value="14">England</option>
<option value="112">Equatorial Guinea</option>
<option value="113">Eritrea</option>
<option value="208">Estonia</option>
<option value="114">Ethiopia</option>
<option value="16">Faroe Islands</option>
<option value="197">Fiji</option>
<option value="17">Finland</option>
<option value="18">France</option>
<option value="19">FYR Macedonia</option>
<option value="115">Gabon</option>
<option value="116">Gambia</option>
<option value="20">Georgia</option>
<option value="21">Germany</option>
<option value="117">Ghana</option>
<option value="205">Gibraltar</option>
<option value="22">Greece</option>
<option value="206">Greenland</option>
<option value="77">Grenada</option>
<option value="157">Guam</option>
<option value="78">Guatemala</option>
<option value="118">Guinea</option>
<option value="119">Guinea Bissau</option>
<option value="79">Guyana</option>
<option value="80">Haiti</option>
<option value="81">Honduras</option>
<option value="158">Hong Kong</option>
<option value="23">Hungary</option>
<option value="24">Iceland</option>
<option value="159">India</option>
<option value="160">Indonesia</option>
<option value="161">Iran</option>
<option value="162">Iraq</option>
<option value="26">Israel</option>
<option value="27">Italy</option>
<option value="108">Ivory Coast</option>
<option value="82">Jamaica</option>
<option value="163">Japan</option>
<option value="164">Jordan</option>
<option value="165">Kazakhstan</option>
<option value="120">Kenya</option>
<option value="166">Korea DPR</option>
<option value="167">Korea Republic</option>
<option value="168">Kuwait</option>
<option value="169">Kyrgyzstan</option>
<option value="170">Laos</option>
<option value="28">Latvia</option>
<option value="171">Lebanon</option>
<option value="121">Lesotho</option>
<option value="122">Liberia</option>
<option value="123">Libya</option>
<option value="29">Liechtenstein</option>
<option value="30">Lithuania</option>
<option value="31">Luxemburg</option>
<option value="172">Macao</option>
<option value="124">Madagascar</option>
<option value="125">Malawi</option>
<option value="173">Malaysia</option>
<option value="174">Maldives</option>
<option value="126">Mali</option>
<option value="32">Malta</option>
<option value="127">Mauritania</option>
<option value="128">Mauritius</option>
<option value="83">Mexico</option>
<option value="33">Moldova</option>
<option value="175">Mongolia</option>
<option value="15">Montenegro</option>
<option value="84">Montserrat</option>
<option value="129">Morocco</option>
<option value="130">Mozambique</option>
<option value="176">Myanmar</option>
<option value="131">Namibia</option>
<option value="177">Nepal</option>
<option value="34">Netherlands</option>
<option value="85">Netherlands Antilles</option>
<option value="215">New Caledonia</option>
<option value="198">New Zealand</option>
<option value="86">Nicaragua</option>
<option value="132">Niger</option>
<option value="133">Nigeria</option>
<option value="35">Northern Ireland</option>
<option value="36">Norway</option>
<option value="178">Oman</option>
<option value="179">Pakistan</option>
<option value="180">Palestinian Authority</option>
<option value="87">Panama</option>
<option value="199">Papua New Guinea</option>
<option value="58">Paraguay</option>
<option value="59">Peru</option>
<option value="181">Philippines</option>
<option value="37">Poland</option>
<option value="38">Portugal</option>
<option value="88">Puerto Rico</option>
<option value="182">Qatar</option>
<option value="25">Republic of Ireland</option>
<option value="39">Romania</option>
<option value="40">Russia</option>
<option value="134">Rwanda</option>
<option value="200">Samoa</option>
<option value="41">San Marino</option>
<option value="135">São Tomé and Príncipe</option>
<option value="183">Saudi Arabia</option>
<option value="42">Scotland</option>
<option value="136">Senegal</option>
<option value="51">Serbia</option>
<option value="137">Seychelles</option>
<option value="138">Sierra Leone</option>
<option value="184">Singapore</option>
<option value="43">Slovakia</option>
<option value="44">Slovenia</option>
<option value="201">Solomon Islands</option>
<option value="139">Somalia</option>
<option value="140">South Africa</option>
<option value="45">Spain</option>
<option value="185">Sri Lanka</option>
<option value="89">St Kitts Nevis</option>
<option value="90">St Lucia</option>
<option value="91">St Vincent Grenadine</option>
<option value="141">Sudan</option>
<option value="92">Suriname</option>
<option value="142">Swaziland</option>
<option value="46">Sweden</option>
<option value="47">Switzerland</option>
<option value="186">Syria</option>
<option value="202">Tahiti</option>
<option value="213">Taiwan</option>
<option value="187">Tajikistan</option>
<option value="143">Tanzania</option>
<option value="188">Thailand</option>
<option value="212">Timor-Leste</option>
<option value="144">Togo</option>
<option value="203">Tonga</option>
<option value="93">Trinidad & Tobago</option>
<option value="145">Tunisia</option>
<option value="48">Turkey</option>
<option value="189">Turkmenistan</option>
<option value="94">Turks & Caicos</option>
<option value="146">Uganda</option>
<option value="49">Ukraine</option>
<option value="190">United Arab Emirates</option>
<option value="95">United States</option>
<option value="60">Uruguay</option>
<option value="96">US Virgin Islands</option>
<option value="191">Uzbekistan</option>
<option value="204">Vanuatu</option>
<option value="61">Venezuela</option>
<option value="192">Vietnam</option>
<option value="50">Wales</option>
<option value="193">Yemen</option>
<option value="147">Zambia</option>
<option value="148">Zimbabwe</option>
</select>
But I want it to update immediately which I tryed with this code:
$(function() {
var update = function() {
$('#photoans').text(
$.map($('#photo').serializeArray(),function(a) {
return a.value;
}).join(", ")
);
};
update();
$('#photo').change(update);
})
Which ofcourse gets you http://futhead.cursecdn.com/static/img/16/clubs/"<div id=photoans>34</div>".png' so that doesn't work. I hope someone can help me. Thanks!

If i understood correctly, I guess this is what you want:
$("#country").change(function(){
var curSelection = $(this).val();
var urlOfImage = "http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/" + curSelection + ".png";
$("img").attr("src",urlOfImage);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/0.png" />
<br>
<select id="country">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Update : Using Input Field
$("#countryInput").keyup(function(){
var curInput = $(this).val(); // Current Input URL
$("#img2").attr("src",curInput);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="img2" src="http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/0.png" />
<br>
URL : <input type="text" id="countryInput" />
<p>
To understand copy and paste this url: <b>http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/1.png</b>
</p>

You need start php and end php tag for echo $_GET content value nation_id
<img src='http://futhead.cursecdn.com/static/img/16/clubs/"<?php echo $_GET['nation_id'] ?>"' >
if you setup php interpritator

Categories

Resources