How to reinitialize detailsAttribute onchange country from dropdown? - javascript

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

Related

if statement javascript on select tag

I'm new to writing JavaScript
I want to write something like this but I cant access the opt group in my JavaScript …
if (select-country value == an option in optgroup(africa) ){
countryGrade=50
}
else if(select-country value == an option in optgroup(north america) ){
countryGrade=20
}
else if(select-country value == an option in optgroup(south america) ){
countryGrade=30
}
it is a form so when the form is submitted it will go over the conditions
what i to do is assign points to the country grade that is why im using if statement
var scholarshipGrade=document.getElementById("scholar_grade")
var form=document.getElementById("form")
var age=document.getElementById("age")
var fname=document.getElementById("fname")
var mname=document.getElementById("mname")
var lname=document.getElementById("name")
var ageGrade=0
var countryGrade=0
var subjectGrade=0;
scholarshipGrade=ageGrade+countryGrade+subjectGrade
form.addEventListener('submit',function(e){
e.preventDefault()
if(age.value >=18 && age.value <=24){
ageGrade= 100
}
else if(age.value >=25 && age.value <=30){
ageGrade=80
}
else if(age.value >=31 && age.value <=35){
ageGrade=50
}
else if(age.value >=36 && age.value <=40){
ageGrade=30
}
else if(age.value >=41){
ageGrade=10
}
})
body{
background-color:gray;
}
h1{
text-align: center;
}
p{
text-align: center;
}
input[type=text], select, textarea, input[type=email]{
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<Html>
<head>
<link rel="stylesheet" href="style.css">
<title>
Scholarship Project
</title>
</head>
<body>
<h1>Apply For Scholarship</h1>
<div><p>You can apply for a scholarship here, check if you qualify after filling the following fields,after all fields are filled submit the form</p></div>
<form id="form" name="form">
<label> Firstname </label>
<input type="text" name="firstname" id="fname" /> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" id="mname"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" id="lname"/> <br> <br>
<br>
<label>
Gender :
</label>
<input type="radio" name="male"/> Male
<input type="radio" name="female"/> Female
<br>
<br>
<label>Enter your age: </label>
<input type="number" id= "age" name="num" min="18" max="60"><br> <br>
<label>
Phone :
</label>
<input type="text" name="phone" /> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
<label for="country">select your country</label> <br>
<select id="select-country" name="country" >
<option value="" selected="">Select country</option>
<optgroup label="Africa" id="africa" >
<option value="DZ">Algeria</option>
<option value="AO">Angola</option>
<option value="BJ">Benin</option>
<option value="BW">Botswana</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="CM">Cameroon</option>
<option value="CV">Cape Verde</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="DJ">Dijibouti</option>
<option value="EG">Egypt</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="ET">Ethiopia</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GH">Ghana</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="CI">Cote d'Ivoire (Ivory Coast)</option>
<option value="KE">Kenya</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="ML">Mali</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="NA">Namibia</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="RE">Reunion</option>
<option value="RW">Rwanda</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SH">Saint Helena</option>
<option value="SN">Senegal</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="SS">South Sudan</option>
<option value="SD">Sudan</option>
<option value="SZ">Swaziland</option>
<option value="TZ">Tanzania</option>
<option value="TG">Togo</option>
<option value="TN">Tunisia</option>
<option value="UG">Uganda</option>
<option value="EH">Western Sahara</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</optgroup>
<optgroup data-points='20' label="North America" class="namerica">
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="CA">Canada</option>
<option value="MX">Mexico</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AW">Aruba</option>
<option value="BS">Bahamas</option>
<option value="BB">Barbados</option>
<option value="BZ">Belize</option>
<option value="BM">Bermuda</option>
<option value="VG">British Virgin Islands</option>
<option value="KY">Cayman Islands</option>
<option value="CR">Costa Rica</option>
<option value="CU">Cuba</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="SV">El Salvador</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GT">Guatemala</option>
<option value="HT">Haiti</option>
<option value="HN">Honduras</option>
<option value="JM">Jamaica</option>
<option value="MQ">Martinique</option>
<option value="MS">Montserrat</option>
<option value="AN">Netherlands Antilles</option>
<option value="NI">Nicaragua</option>
<option value="PA">Panama</option>
<option value="PR">Puerto Rico</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="TT">Trinidad and Tobago</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="VI">US Virgin Islands</option>
</optgroup>
<optgroup data-points='30' label="South America" class="samerica">
<option value="AR">Argentina</option>
<option value="BO">Bolivia</option>
<option value="BR">Brazil</option>
<option value="CL">Chile</option>
<option value="CO">Colombia</option>
<option value="EC">Ecuador</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="GF">French Guiana</option>
<option value="GY">Guyana</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="SR">Suriname</option>
<option value="UY">Uruguay</option>
<option value="VE">Venezuela</option>
</optgroup>
<optgroup data-points='40' label="Asia" class="asia">
<option value="AF">Afghanistan</option>
<option value="AM">Armenia</option>
<option value="AZ">Azerbaijan</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BT">Bhutan</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="KH">Cambodia</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="GE">Georgia</option>
<option value="HK">Hong Kong</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IL">Israel</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao</option>
<option value="LB">Lebanon</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="MN">Mongolia</option>
<option value="MM">Myanmar (Burma)</option>
<option value="NP">Nepal</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PH">Philippines</option>
<option value="QA">Qatar</option>
<option value="RU">Russian Federation</option>
<option value="SA">Saudi Arabia</option>
<option value="SG">Singapore</option>
<option value="LK">Sri Lanka</option>
<option value="SY">Syria</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TH">Thailand</option>
<option value="TP">East Timor</option>
<option value="TM">Turkmenistan</option>
<option value="AE">United Arab Emirates</option>
<option value="UZ">Uzbekistan</option>
<option value="VN">Vietnam</option>
<option value="YE">Yemen</option>
</optgroup>
<optgroup data-points='10' label="Rest Of The World" class="rotws">
<option value="GB">United Kingdom</option>
<option value="AQ">Antarctica</option>
<option value="AL">Albania</option>
<option value="AD">Andorra</option>
<option value="AT">Austria</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BG">Bulgaria</option>
<option value="HR">Croatia (Hrvatska)</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="FR">France</option>
<option value="GI">Gibraltar</option>
<option value="DE">Germany</option>
<option value="GR">Greece</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HU">Hungary</option>
<option value="IT">Italy</option>
<option value="LI">Liechtenstein</option>
<option value="LU">Luxembourg</option>
<option value="MK">Macedonia</option>
<option value="MT">Malta</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="ME">Montenegro</option>
<option value="NL">Netherlands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="RO">Romania</option>
<option value="SM">San Marino</option>
<option value="RS">Serbia</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="ES">Spain</option>
<option value="UA">Ukraine</option>
<option value="DK">Denmark</option>
<option value="EE">Estonia</option>
<option value="FO">Faroe Islands</option>
<option value="FI">Finland</option>
<option value="GL">Greenland</option>
<option value="IS">Iceland</option>
<option value="IE">Ireland</option>
<option value="LV">Latvia</option>
<option value="LT">Lithuania</option>
<option value="NO">Norway</option>
<option value="SJ">Svalbard and Jan Mayen Islands</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="TR">Turkey</option>
<option value="AS">American Samoa</option>
<option value="AU">Australia</option>
<option value="CK">Cook Islands</option>
<option value="FJ">Fiji</option>
<option value="PF">French Polynesia (Tahiti)</option>
<option value="GU">Guam</option>
<option value="KB">Kiribati</option>
<option value="MH">Marshall Islands</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="NR">Nauru</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NU">Niue</option>
<option value="MP">Northern Mariana Islands</option>
<option value="PW">Palau</option>
<option value="PG">Papua New Guinea</option>
<option value="PN">Pitcairn</option>
<option value="WS">Samoa</option>
<option value="SB">Solomon Islands</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TV">Tuvalu</option>
<option value="VU">Vanuatu</option>
<option valud="WF">Wallis and Futuna Islands</option>
</optgroup>
</select><br><br>
<label for="subjects"></label>
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name ="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<button type="submit">submit</button>
</form>
<div>
<p></p>
<p id="scholar_grade"></p>
</div>
<script src="script.js"></script>
</body>
</html>

To find the associated optgroup and points value for a given country, you need to access the option selected
let opt = countrySelect.options[countrySelect.selectedIndex]
let optgrp = opt.closest('optgroup');
let continent = optgrp.label
let points = optgrp.dataset.points
let country = countrySelect.value
let countryname = opt.innerText
console.log(`You selected the country ${countryname} (value ${country}) that is in ${continent} for ${points} points`);
var scholarshipGrade = document.getElementById("scholar_grade")
var form = document.getElementById("form")
var age = document.getElementById("age")
var fname = document.getElementById("fname")
var mname = document.getElementById("mname")
var lname = document.getElementById("name")
let countrySelect = document.querySelector('#select-country')
var ageGrade = 0
var countryGrade = 0
var subjectGrade = 0;
scholarshipGrade = ageGrade + countryGrade + subjectGrade
form.addEventListener('submit', function(e) {
e.preventDefault()
// country stuff
let opt = countrySelect.options[countrySelect.selectedIndex]
let optgrp = opt.closest('optgroup');
let continent = optgrp.label
let points = optgrp.dataset.points
let country = countrySelect.value
let countryname = opt.innerText
console.log(`You selected the country ${countryname} (value ${country}) that is in ${continent} for ${points} points`);
// age stuff
if (age.value >= 18 && age.value <= 24) {
ageGrade = 100
} else if (age.value >= 25 && age.value <= 30) {
ageGrade = 80
} else if (age.value >= 31 && age.value <= 35) {
ageGrade = 50
} else if (age.value >= 36 && age.value <= 40) {
ageGrade = 30
} else if (age.value >= 41) {
ageGrade = 10
}
})
body {
background-color: gray;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
input[type=text],
select,
textarea,
input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<h1>Apply For Scholarship</h1>
<div>
<p>You can apply for a scholarship here, check if you qualify after filling the following fields,after all fields are filled submit the form</p>
</div>
<form id="form" name="form">
<label> Firstname </label>
<input type="text" name="firstname" id="fname" /> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" id="mname" /> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" id="lname" /> <br> <br>
<br>
<label>
Gender :
</label>
<input type="radio" name="male" /> Male
<input type="radio" name="female" /> Female
<br>
<br>
<label>Enter your age: </label>
<input type="number" id="age" name="num" min="18" max="60"><br> <br>
<label>
Phone :
</label>
<input type="text" name="phone" /> <br> <br> Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br> Email:
<input type="email" id="email" name="email" /> <br>
<br> <br>
<label for="country">select your country</label> <br>
<select id="select-country" name="country">
<option value="" selected="">Select country</option>
<optgroup data-points='30' label="Africa" id="africa">
<option value="DZ">Algeria</option>
<option value="AO">Angola</option>
<option value="BJ">Benin</option>
<option value="BW">Botswana</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="CM">Cameroon</option>
<option value="CV">Cape Verde</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="DJ">Dijibouti</option>
<option value="EG">Egypt</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="ET">Ethiopia</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GH">Ghana</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="CI">Cote d'Ivoire (Ivory Coast)</option>
<option value="KE">Kenya</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="ML">Mali</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="NA">Namibia</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="RE">Reunion</option>
<option value="RW">Rwanda</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SH">Saint Helena</option>
<option value="SN">Senegal</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="SS">South Sudan</option>
<option value="SD">Sudan</option>
<option value="SZ">Swaziland</option>
<option value="TZ">Tanzania</option>
<option value="TG">Togo</option>
<option value="TN">Tunisia</option>
<option value="UG">Uganda</option>
<option value="EH">Western Sahara</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</optgroup>
<optgroup data-points='20' label="North America" class="namerica">
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="CA">Canada</option>
<option value="MX">Mexico</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AW">Aruba</option>
<option value="BS">Bahamas</option>
<option value="BB">Barbados</option>
<option value="BZ">Belize</option>
<option value="BM">Bermuda</option>
<option value="VG">British Virgin Islands</option>
<option value="KY">Cayman Islands</option>
<option value="CR">Costa Rica</option>
<option value="CU">Cuba</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="SV">El Salvador</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GT">Guatemala</option>
<option value="HT">Haiti</option>
<option value="HN">Honduras</option>
<option value="JM">Jamaica</option>
<option value="MQ">Martinique</option>
<option value="MS">Montserrat</option>
<option value="AN">Netherlands Antilles</option>
<option value="NI">Nicaragua</option>
<option value="PA">Panama</option>
<option value="PR">Puerto Rico</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="TT">Trinidad and Tobago</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="VI">US Virgin Islands</option>
</optgroup>
<optgroup data-points='30' label="South America" class="samerica">
<option value="AR">Argentina</option>
<option value="BO">Bolivia</option>
<option value="BR">Brazil</option>
<option value="CL">Chile</option>
<option value="CO">Colombia</option>
<option value="EC">Ecuador</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="GF">French Guiana</option>
<option value="GY">Guyana</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="SR">Suriname</option>
<option value="UY">Uruguay</option>
<option value="VE">Venezuela</option>
</optgroup>
<optgroup data-points='40' label="Asia" class="asia">
<option value="AF">Afghanistan</option>
<option value="AM">Armenia</option>
<option value="AZ">Azerbaijan</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BT">Bhutan</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="KH">Cambodia</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="GE">Georgia</option>
<option value="HK">Hong Kong</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IL">Israel</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao</option>
<option value="LB">Lebanon</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="MN">Mongolia</option>
<option value="MM">Myanmar (Burma)</option>
<option value="NP">Nepal</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PH">Philippines</option>
<option value="QA">Qatar</option>
<option value="RU">Russian Federation</option>
<option value="SA">Saudi Arabia</option>
<option value="SG">Singapore</option>
<option value="LK">Sri Lanka</option>
<option value="SY">Syria</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TH">Thailand</option>
<option value="TP">East Timor</option>
<option value="TM">Turkmenistan</option>
<option value="AE">United Arab Emirates</option>
<option value="UZ">Uzbekistan</option>
<option value="VN">Vietnam</option>
<option value="YE">Yemen</option>
</optgroup>
<optgroup data-points='10' label="Rest Of The World" class="rotws">
<option value="GB">United Kingdom</option>
<option value="AQ">Antarctica</option>
<option value="AL">Albania</option>
<option value="AD">Andorra</option>
<option value="AT">Austria</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BG">Bulgaria</option>
<option value="HR">Croatia (Hrvatska)</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="FR">France</option>
<option value="GI">Gibraltar</option>
<option value="DE">Germany</option>
<option value="GR">Greece</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HU">Hungary</option>
<option value="IT">Italy</option>
<option value="LI">Liechtenstein</option>
<option value="LU">Luxembourg</option>
<option value="MK">Macedonia</option>
<option value="MT">Malta</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="ME">Montenegro</option>
<option value="NL">Netherlands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="RO">Romania</option>
<option value="SM">San Marino</option>
<option value="RS">Serbia</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="ES">Spain</option>
<option value="UA">Ukraine</option>
<option value="DK">Denmark</option>
<option value="EE">Estonia</option>
<option value="FO">Faroe Islands</option>
<option value="FI">Finland</option>
<option value="GL">Greenland</option>
<option value="IS">Iceland</option>
<option value="IE">Ireland</option>
<option value="LV">Latvia</option>
<option value="LT">Lithuania</option>
<option value="NO">Norway</option>
<option value="SJ">Svalbard and Jan Mayen Islands</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="TR">Turkey</option>
<option value="AS">American Samoa</option>
<option value="AU">Australia</option>
<option value="CK">Cook Islands</option>
<option value="FJ">Fiji</option>
<option value="PF">French Polynesia (Tahiti)</option>
<option value="GU">Guam</option>
<option value="KB">Kiribati</option>
<option value="MH">Marshall Islands</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="NR">Nauru</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NU">Niue</option>
<option value="MP">Northern Mariana Islands</option>
<option value="PW">Palau</option>
<option value="PG">Papua New Guinea</option>
<option value="PN">Pitcairn</option>
<option value="WS">Samoa</option>
<option value="SB">Solomon Islands</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TV">Tuvalu</option>
<option value="VU">Vanuatu</option>
<option valud="WF">Wallis and Futuna Islands</option>
</optgroup>
</select><br><br>
<label for="subjects"></label>
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<select name="subjects" id="subjects" filter="filter-std">
<option value="" selected="">Select subjects</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
<option value="Maths">Maths</option>
</select>
<input type="number" name="score" id="score">
<button type="submit">submit</button>
</form>
<div>
<p></p>
<p id="scholar_grade"></p>
</div>

How to select the first h3 (without class or id) inside a div with the .woocommerce-billing-fields class with vanilla javascript?

The idea is to change the <h3>
content when the page loads
<div class="woocommerce-billing-fields">
<h3>Detalhes de faturamento</h3>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10"><label for="billing_first_name" class="">Nome <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Brunno" data-qa-id="Nome" autocomplete="given-name"></span></p>
<p class="form-row form-row-last validate-required" id="billing_last_name_field" data-priority="20"><label for="billing_last_name" class="">Sobrenome <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Vert" data-qa-id="Sobrenome" autocomplete="family-name"></span></p>
<p class="form-row form-row-wide validate-required validate-email" id="billing_email_field" data-priority="30"><label for="billing_email" class="">Endereço de e-mail <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="brunnovert98#gmail.com" data-qa-id="Endereço de e-mail" autocomplete="email username"></span></p>
<p class="form-row form-row-wide address-field update_totals_on_change validate-required" id="billing_country_field" data-priority="40">
<label for="billing_country" class="">País <abbr class="required" title="obrigatório">*</abbr></label>
<span class="woocommerce-input-wrapper">
<select name="billing_country" id="billing_country" class="country_to_state country_select " data-qa-id="País" autocomplete="country" data-placeholder="Selecione um país…">
<option value="">Selecione um país…</option>
<option value="AF">Afeganistão</option>
<option value="ZA">África do Sul</option>
<option value="AL">Albânia</option>
<option value="DE">Alemanha</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antártica</option>
<option value="AG">Antígua e Barbuda</option>
<option value="SA">Arábia Saudita</option>
<option value="DZ">Argélia</option>
<option value="AR">Argentina</option>
<option value="AM">Armênia</option>
<option value="AW">Aruba</option>
<option value="AU">Austrália</option>
<option value="AT">Áustria</option>
<option value="AZ">Azerbaijão</option>
<option value="BS">Bahamas</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BH">Barém</option>
<option value="PW">Belau</option>
<option value="BE">Bélgica</option>
<option value="BZ">Belize</option>
<option value="BJ">Benim</option>
<option value="BM">Bermudas</option>
<option value="BY">Bielorrússia</option>
<option value="BO">Bolívia</option>
<option value="BA">Bósnia e Herzegovina</option>
<option value="BW">Botsuana</option>
<option value="BR" selected="selected">Brasil</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgária</option>
<option value="BF">Burquina Fasso</option>
<option value="BI">Burúndi</option>
<option value="BT">Butão</option>
<option value="CV">Cabo Verde</option>
<option value="CM">Camarões</option>
<option value="KH">Camboja</option>
<option value="CA">Canadá</option>
<option value="QA">Catar</option>
<option value="KZ">Cazaquistão</option>
<option value="TD">Chade</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CY">Chipre</option>
<option value="SG">Cingapura</option>
<option value="CO">Colômbia</option>
<option value="KM">Comores</option>
<option value="MP">Comunidade das Ilhas Marianas Setentrionais</option>
<option value="CG">Congo (Brazzaville)</option>
<option value="CD">Congo (Kinshasa)</option>
<option value="KP">Coréia do Norte</option>
<option value="KR">Coréia do Sul</option>
<option value="CR">Costa Rica</option>
<option value="CI">Costa do Marfim</option>
<option value="HR">Croácia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="DK">Dinamarca</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="EG">Egito</option>
<option value="SV">El Salvador</option>
<option value="AE">Emirados Árabes Unidos</option>
<option value="EC">Equador</option>
<option value="ER">Eritreia</option>
<option value="SK">Eslováquia</option>
<option value="SI">Eslovenia</option>
<option value="ES">Espanha</option>
<option value="US">Estados Unidos</option>
<option value="EE">Estônia</option>
<option value="ET">Etiópia</option>
<option value="FJ">Fiji</option>
<option value="PH">Filipinas</option>
<option value="FI">Finlândia</option>
<option value="FR">França</option>
<option value="GA">Gabão</option>
<option value="GM">Gâmbia</option>
<option value="GH">Gana</option>
<option value="GE">Geórgia</option>
<option value="GI">Gibraltar</option>
<option value="GD">Granada</option>
<option value="GR">Grécia</option>
<option value="GL">Groenlândia</option>
<option value="GP">Guadalupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GY">Guiana</option>
<option value="GF">Guiana Francesa</option>
<option value="GN">Guiné</option>
<option value="GQ">Guiné Equatorial</option>
<option value="GW">Guiné-Bissau</option>
<option value="HT">Haiti</option>
<option value="NL">Holanda</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungria</option>
<option value="YE">Iémen</option>
<option value="BV">Ilha Bouvet</option>
<option value="CX">Ilha Christmas</option>
<option value="HM">Ilha Heard e Ilhas McDonald</option>
<option value="NF">Ilha Norfolk</option>
<option value="IM">Ilha de Man</option>
<option value="MF">Ilha de São Martinho (República Francesa)</option>
<option value="AX">Ilhas Aland</option>
<option value="KY">Ilhas Cayman</option>
<option value="CC">Ilhas Cocos</option>
<option value="CK">Ilhas Cook</option>
<option value="FO">Ilhas Feroe</option>
<option value="GS">Ilhas Geórgia do Sul e Sandwich do Sul</option>
<option value="FK">Ilhas Malvinas</option>
<option value="MH">Ilhas Marshall</option>
<option value="UM">Ilhas Menores Distantes, Estados Unidos da América (EUA)</option>
<option value="PN">Ilhas Pitcairn</option>
<option value="SB">Ilhas Salomão</option>
<option value="TC">Ilhas Turcas e Caicos</option>
<option value="VI">Ilhas Virgens (EUA)</option>
<option value="VG">Ilhas Virgens Britânicas</option>
<option value="IN">Índia</option>
<option value="ID">Indonésia</option>
<option value="IR">Irã</option>
<option value="IQ">Iraque</option>
<option value="IE">Irlanda</option>
<option value="IS">Islândia</option>
<option value="IL">Israel</option>
<option value="IT">Itália</option>
<option value="JM">Jamaica</option>
<option value="JP">Japão</option>
<option value="JE">Jersey</option>
<option value="JO">Jordânia</option>
<option value="KW">Kuweit</option>
<option value="LA">Laos</option>
<option value="LV">Látvia</option>
<option value="LS">Lesoto</option>
<option value="LB">Líbano</option>
<option value="LR">Libéria</option>
<option value="LY">Líbia</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lituânia</option>
<option value="LU">Luxemburgo</option>
<option value="MO">Macao</option>
<option value="MK">Macedônia do Norte</option>
<option value="MG">Madagascar</option>
<option value="MY">Malásia</option>
<option value="MW">Malawi</option>
<option value="MV">Maldivas</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MA">Marrocos</option>
<option value="MQ">Martinica</option>
<option value="MU">Maurício</option>
<option value="MR">Mauritânia</option>
<option value="YT">Mayotte</option>
<option value="MX">México</option>
<option value="FM">Micronésia</option>
<option value="MZ">Moçambique</option>
<option value="MD">Moldávia</option>
<option value="MC">Mônaco</option>
<option value="MN">Mongólia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="NA">Namíbia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NI">Nicarágua</option>
<option value="NE">Níger</option>
<option value="NG">Nigéria</option>
<option value="NU">Niue</option>
<option value="NO">Noruega</option>
<option value="NC">Nova Caledónia</option>
<option value="NZ">Nova Zelândia</option>
<option value="OM">Omã</option>
<option value="BQ">Países baixos Caribenhos</option>
<option value="PA">Panamá</option>
<option value="PG">Papua-Nova Guiné</option>
<option value="PK">Paquistão</option>
<option value="PY">Paraguai</option>
<option value="PE">Peru</option>
<option value="PF">Polinésia Francesa</option>
<option value="PL">Polônia</option>
<option value="PR">Porto Rico</option>
<option value="PT">Portugal</option>
<option value="KE">Quênia</option>
<option value="KG">Quirguistão</option>
<option value="KI">Quiribáti</option>
<option value="GB">Reino Unido (UK)</option>
<option value="CZ">República Checa</option>
<option value="DO">República Dominicana</option>
<option value="CF">República da África Central</option>
<option value="MM">República da União de Myanmar</option>
<option value="RE">Reunião</option>
<option value="RO">Romênia</option>
<option value="RW">Ruanda</option>
<option value="RU">Rússia</option>
<option value="EH">Saara Ocidental</option>
<option value="SX">Saint Martin (parte Holandesa)</option>
<option value="PM">Saint-Pierre e Miquelon</option>
<option value="WS">Samoa</option>
<option value="AS">Samoa Americana</option>
<option value="SM">San Marino</option>
<option value="SH">Santa Helena</option>
<option value="LC">Santa Lúcia</option>
<option value="BL">São Bartolomeu</option>
<option value="KN">São Cristóvão e Nevis</option>
<option value="ST">São Tomé e Príncipe</option>
<option value="VC">São Vicente e Granadinas</option>
<option value="SN">Senegal</option>
<option value="SL">Serra Leoa</option>
<option value="RS">Sérvia</option>
<option value="SC">Seychelles</option>
<option value="SY">Síria</option>
<option value="SO">Somália</option>
<option value="LK">Sri Lanka</option>
<option value="SZ">Suazilândia</option>
<option value="SD">Sudão</option>
<option value="SS">Sudão do Sul</option>
<option value="SE">Suécia</option>
<option value="CH">Suiça</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard e Jan Mayen</option>
<option value="TH">Tailândia</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajiquistão</option>
<option value="TZ">Tanzânia</option>
<option value="IO">Território Britânico do Oceano Índico</option>
<option value="PS">Território Palestino</option>
<option value="TF">Território das Terras Austrais e Antárcticas Francesas</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad e Tobago</option>
<option value="TN">Tunísia</option>
<option value="TM">Turcomenistão</option>
<option value="TR">Turquia</option>
<option value="TV">Tuvalu</option>
<option value="UA">Ucrânia</option>
<option value="UG">Uganda</option>
<option value="UY">Uruguai</option>
<option value="UZ">Uzbequistão</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vaticano</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnã</option>
<option value="WF">Wallis e Futuna</option>
<option value="ZM">Zâmbia</option>
<option value="ZW">Zimbábue</option>
</select>
<noscript><button type="submit" name="woocommerce_checkout_update_totals" value="Atualizar país">Atualizar país</button></noscript></span></p>
<p class="form-row form-row-wide validate-required validate-phone" id="billing_phone_field" data-priority="50"><label for="billing_phone" class="">Telefone <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="tel" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value="(11) 99664-4255" data-qa-id="Telefone" autocomplete="tel"></span></p>
<p class="form-row form-row-wide address-field validate-required validate-postcode" id="billing_postcode_field" data-priority="60" data-o_class="form-row form-row-wide address-field validate-required validate-postcode"><label for="billing_postcode" class="">CEP <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="" value="06706-062" data-qa-id="CEP" autocomplete="postal-code"></span></p>
<p class="form-row form-row-wide address-field validate-required woocommerce-validated" id="billing_address_1_field" data-priority="70" style="display: block;"><label for="billing_address_1" class="">Endereço <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_address_1" id="billing_address_1" placeholder="Nome da rua e número da casa" value="Rua Antônio de Camargo" data-qa-id="Endereço" autocomplete="address-line1"></span></p>
<p class="form-row form-row-wide address-field woocommerce-validated" id="billing_address_2_field" data-priority="80" style="display: block;"><label for="billing_address_2" class="screen-reader-text">Apartamento, suíte, unidade, etc. (opcional) <span class="optional">(opcional)</span></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_address_2" id="billing_address_2" placeholder="Apartamento, suíte, unidade, etc. (opcional)" value="São Paulo II" autocomplete="address-line2"></span></p>
<p class="form-row form-row validate-required" id="billing_billing_number_field" data-priority="90"><label for="billing_billing_number" class="">Número <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_billing_number" id="billing_billing_number" placeholder="" value="" data-qa-id="Número"></span></p>
<p class="form-row form-row-wide address-field validate-required woocommerce-validated" id="billing_city_field" data-priority="100" data-o_class="form-row form-row-wide address-field validate-required" style="display: block;"><label for="billing_city" class="">Cidade <abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="" value="Cotia" data-qa-id="Cidade" autocomplete="address-level2"></span></p>
<p class="form-row form-row-wide address-field validate-required validate-state woocommerce-validated" id="billing_state_field" data-priority="110" data-o_class="form-row form-row-wide address-field validate-required validate-state" style="display: block;">
<label for="billing_state" class="">Estado <abbr class="required" title="obrigatório">*</abbr></label>
<span class="woocommerce-input-wrapper">
<select name="billing_state" id="billing_state" class="state_select " data-qa-id="Estado" autocomplete="address-level1" data-placeholder="Selecione uma opção…" data-input-classes="">
<option value="">Selecione uma opção…</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP" selected="selected">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</span>
</p>
</div>
</div>
I know it’s not a good practice, but it’s a temporary solution
Thank you very much!

document.querySelector('.woocommerce-billing-fields > h3:first-child').innerHTML = 'text you want to display';
The above code uses vanilla javascript to select the first h3 found within the first container with class woocommerce-billing-fields. You can then manipulate its contents by updating its innerHTML property.
The syntax of the selector used in querySelector matches the same way you would scope that field in CSS. More info on querySelector here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

You can use the selector:
'.woocommerce-billing-fields > h3:first-of-type'
The > is a child combinator. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Basically, it looks only at first-level descendants.
The h3:first-of-type selects the first element of its type (which in this case is h3) among a group of sibling elements.
So the selector '.woocommerce-billing-fields > h3:first-of-type' will select amongst the first-level descendants of your containing div (.woocommerce-billing-fields), the first h3 it finds.
References:
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

Jquery add attribute and get the value (laravel)

I have got a following html code.
$(".category-tab").on('click', function() {
var category_id = $(this).data("id");
$("#search-form").removeAttr("data-categoryid");
$("#search-form").attr("data-categoryid", category_id);
});
$("#search-form").submit(function(e) {
e.preventDefault();
var category_id = $(this).data('categoryid');
var country_id = $('#country').val();
var state_id = $('#state').val();
var search_text = $('#search-text').val();
console.log(category_id);
console.log(country_id);
console.log(state_id);
console.log(search_text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link category-tab active " data-id="1" data-toggle="tab" href="#montesorri" role="tab">Montessori</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="2" data-toggle="tab" href="#school" role="tab">School</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="3" data-toggle="tab" href="#college" role="tab">College</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="4" data-toggle="tab" href="#institute" role="tab">Institute</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="5" data-toggle="tab" href="#hostel" role="tab">Hostel</a>
</li>
<li class="nav-item">
<a class="nav-link category-tab " data-id="6" data-toggle="tab" href="#University" role="tab">University</a>
</li>
</ul>
<div class=" page-description" style="padding-bottom: 10px;">
<form id="search-form" data-categoryid="4">
<div class="form-row">
<div class="col-md-2">
<select name="country_id" id="country" class="form-control select2" style="width:100%;" required="">
<option value="" selected="" disabled="">-- Select Country --</option>
<option value="1" data-id="1">Afghanistan</option>
<option value="2" data-id="2">Albania</option>
<option value="3" data-id="3">Algeria</option>
<option value="4" data-id="4">American Samoa</option>
<option value="5" data-id="5">Andorra</option>
<option value="6" data-id="6">Angola</option>
<option value="7" data-id="7">Anguilla</option>
<option value="8" data-id="8">Antarctica</option>
<option value="9" data-id="9">Antigua And Barbuda</option>
<option value="10" data-id="10">Argentina</option>
<option value="11" data-id="11">Armenia</option>
<option value="12" data-id="12">Aruba</option>
<option value="13" data-id="13">Australia</option>
<option value="14" data-id="14">Austria</option>
<option value="15" data-id="15">Azerbaijan</option>
<option value="16" data-id="16">Bahamas The</option>
<option value="17" data-id="17">Bahrain</option>
<option value="18" data-id="18">Bangladesh</option>
<option value="19" data-id="19">Barbados</option>
<option value="20" data-id="20">Belarus</option>
<option value="21" data-id="21">Belgium</option>
<option value="22" data-id="22">Belize</option>
<option value="23" data-id="23">Benin</option>
<option value="24" data-id="24">Bermuda</option>
<option value="25" data-id="25">Bhutan</option>
<option value="26" data-id="26">Bolivia</option>
<option value="27" data-id="27">Bosnia and Herzegovina</option>
<option value="28" data-id="28">Botswana</option>
<option value="29" data-id="29">Bouvet Island</option>
<option value="30" data-id="30">Brazil</option>
<option value="31" data-id="31">British Indian Ocean Territory</option>
<option value="32" data-id="32">Brunei</option>
<option value="33" data-id="33">Bulgaria</option>
<option value="34" data-id="34">Burkina Faso</option>
<option value="35" data-id="35">Burundi</option>
<option value="36" data-id="36">Cambodia</option>
<option value="37" data-id="37">Cameroon</option>
<option value="38" data-id="38">Canada</option>
<option value="39" data-id="39">Cape Verde</option>
<option value="40" data-id="40">Cayman Islands</option>
<option value="41" data-id="41">Central African Republic</option>
<option value="42" data-id="42">Chad</option>
<option value="43" data-id="43">Chile</option>
<option value="44" data-id="44">China</option>
<option value="45" data-id="45">Christmas Island</option>
<option value="46" data-id="46">Cocos (Keeling) Islands</option>
<option value="47" data-id="47">Colombia</option>
<option value="48" data-id="48">Comoros</option>
<option value="49" data-id="49">Congo</option>
<option value="50" data-id="50">Congo The Democratic Republic Of The</option>
<option value="51" data-id="51">Cook Islands</option>
<option value="52" data-id="52">Costa Rica</option>
<option value="53" data-id="53">Cote D Ivoire (Ivory Coast)</option>
<option value="54" data-id="54">Croatia (Hrvatska)</option>
<option value="55" data-id="55">Cuba</option>
<option value="56" data-id="56">Cyprus</option>
<option value="57" data-id="57">Czech Republic</option>
<option value="58" data-id="58">Denmark</option>
<option value="59" data-id="59">Djibouti</option>
<option value="60" data-id="60">Dominica</option>
<option value="61" data-id="61">Dominican Republic</option>
<option value="62" data-id="62">East Timor</option>
<option value="63" data-id="63">Ecuador</option>
<option value="64" data-id="64">Egypt</option>
<option value="65" data-id="65">El Salvador</option>
<option value="66" data-id="66">Equatorial Guinea</option>
<option value="67" data-id="67">Eritrea</option>
<option value="68" data-id="68">Estonia</option>
<option value="69" data-id="69">Ethiopia</option>
<option value="70" data-id="70">External Territories of Australia</option>
<option value="71" data-id="71">Falkland Islands</option>
<option value="72" data-id="72">Faroe Islands</option>
<option value="73" data-id="73">Fiji Islands</option>
<option value="74" data-id="74">Finland</option>
<option value="75" data-id="75">France</option>
<option value="76" data-id="76">French Guiana</option>
<option value="77" data-id="77">French Polynesia</option>
<option value="78" data-id="78">French Southern Territories</option>
<option value="79" data-id="79">Gabon</option>
<option value="80" data-id="80">Gambia The</option>
<option value="81" data-id="81">Georgia</option>
<option value="82" data-id="82">Germany</option>
<option value="83" data-id="83">Ghana</option>
<option value="84" data-id="84">Gibraltar</option>
<option value="85" data-id="85">Greece</option>
<option value="86" data-id="86">Greenland</option>
<option value="87" data-id="87">Grenada</option>
<option value="88" data-id="88">Guadeloupe</option>
<option value="89" data-id="89">Guam</option>
<option value="90" data-id="90">Guatemala</option>
<option value="91" data-id="91">Guernsey and Alderney</option>
<option value="92" data-id="92">Guinea</option>
<option value="93" data-id="93">Guinea-Bissau</option>
<option value="94" data-id="94">Guyana</option>
<option value="95" data-id="95">Haiti</option>
<option value="96" data-id="96">Heard and McDonald Islands</option>
<option value="97" data-id="97">Honduras</option>
<option value="98" data-id="98">Hong Kong S.A.R.</option>
<option value="99" data-id="99">Hungary</option>
<option value="100" data-id="100">Iceland</option>
<option value="101" data-id="101">India</option>
<option value="102" data-id="102">Indonesia</option>
<option value="103" data-id="103">Iran</option>
<option value="104" data-id="104">Iraq</option>
<option value="105" data-id="105">Ireland</option>
<option value="106" data-id="106">Israel</option>
<option value="107" data-id="107">Italy</option>
<option value="108" data-id="108">Jamaica</option>
<option value="109" data-id="109">Japan</option>
<option value="110" data-id="110">Jersey</option>
<option value="111" data-id="111">Jordan</option>
<option value="112" data-id="112">Kazakhstan</option>
<option value="113" data-id="113">Kenya</option>
<option value="114" data-id="114">Kiribati</option>
<option value="115" data-id="115">Korea North</option>
<option value="116" data-id="116">Korea South</option>
<option value="117" data-id="117">Kuwait</option>
<option value="118" data-id="118">Kyrgyzstan</option>
<option value="119" data-id="119">Laos</option>
<option value="120" data-id="120">Latvia</option>
<option value="121" data-id="121">Lebanon</option>
<option value="122" data-id="122">Lesotho</option>
<option value="123" data-id="123">Liberia</option>
<option value="124" data-id="124">Libya</option>
<option value="125" data-id="125">Liechtenstein</option>
<option value="126" data-id="126">Lithuania</option>
<option value="127" data-id="127">Luxembourg</option>
<option value="128" data-id="128">Macau S.A.R.</option>
<option value="129" data-id="129">Macedonia</option>
<option value="130" data-id="130">Madagascar</option>
<option value="131" data-id="131">Malawi</option>
<option value="132" data-id="132">Malaysia</option>
<option value="133" data-id="133">Maldives</option>
<option value="134" data-id="134">Mali</option>
<option value="135" data-id="135">Malta</option>
<option value="136" data-id="136">Man (Isle of)</option>
<option value="137" data-id="137">Marshall Islands</option>
<option value="138" data-id="138">Martinique</option>
<option value="139" data-id="139">Mauritania</option>
<option value="140" data-id="140">Mauritius</option>
<option value="141" data-id="141">Mayotte</option>
<option value="142" data-id="142">Mexico</option>
<option value="143" data-id="143">Micronesia</option>
<option value="144" data-id="144">Moldova</option>
<option value="145" data-id="145">Monaco</option>
<option value="146" data-id="146">Mongolia</option>
<option value="147" data-id="147">Montserrat</option>
<option value="148" data-id="148">Morocco</option>
<option value="149" data-id="149">Mozambique</option>
<option value="150" data-id="150">Myanmar</option>
<option value="151" data-id="151">Namibia</option>
<option value="152" data-id="152">Nauru</option>
<option value="153" data-id="153">Nepal</option>
<option value="154" data-id="154">Netherlands Antilles</option>
<option value="155" data-id="155">Netherlands The</option>
<option value="156" data-id="156">New Caledonia</option>
<option value="157" data-id="157">New Zealand</option>
<option value="158" data-id="158">Nicaragua</option>
<option value="159" data-id="159">Niger</option>
<option value="160" data-id="160">Nigeria</option>
<option value="161" data-id="161">Niue</option>
<option value="162" data-id="162">Norfolk Island</option>
<option value="163" data-id="163">Northern Mariana Islands</option>
<option value="164" data-id="164">Norway</option>
<option value="165" data-id="165">Oman</option>
<option value="166" data-id="166">Pakistan</option>
<option value="167" data-id="167">Palau</option>
<option value="168" data-id="168">Palestinian Territory Occupied</option>
<option value="169" data-id="169">Panama</option>
<option value="170" data-id="170">Papua new Guinea</option>
<option value="171" data-id="171">Paraguay</option>
<option value="172" data-id="172">Peru</option>
<option value="173" data-id="173">Philippines</option>
<option value="174" data-id="174">Pitcairn Island</option>
<option value="175" data-id="175">Poland</option>
<option value="176" data-id="176">Portugal</option>
<option value="177" data-id="177">Puerto Rico</option>
<option value="178" data-id="178">Qatar</option>
<option value="179" data-id="179">Reunion</option>
<option value="180" data-id="180">Romania</option>
<option value="181" data-id="181">Russia</option>
<option value="182" data-id="182">Rwanda</option>
<option value="183" data-id="183">Saint Helena</option>
<option value="184" data-id="184">Saint Kitts And Nevis</option>
<option value="185" data-id="185">Saint Lucia</option>
<option value="186" data-id="186">Saint Pierre and Miquelon</option>
<option value="187" data-id="187">Saint Vincent And The Grenadines</option>
<option value="188" data-id="188">Samoa</option>
<option value="189" data-id="189">San Marino</option>
<option value="190" data-id="190">Sao Tome and Principe</option>
<option value="191" data-id="191">Saudi Arabia</option>
<option value="192" data-id="192">Senegal</option>
<option value="193" data-id="193">Serbia</option>
<option value="194" data-id="194">Seychelles</option>
<option value="195" data-id="195">Sierra Leone</option>
<option value="196" data-id="196">Singapore</option>
<option value="197" data-id="197">Slovakia</option>
<option value="198" data-id="198">Slovenia</option>
<option value="199" data-id="199">Smaller Territories of the UK</option>
<option value="200" data-id="200">Solomon Islands</option>
<option value="201" data-id="201">Somalia</option>
<option value="202" data-id="202">South Africa</option>
<option value="203" data-id="203">South Georgia</option>
<option value="204" data-id="204">South Sudan</option>
<option value="205" data-id="205">Spain</option>
<option value="206" data-id="206">Sri Lanka</option>
<option value="207" data-id="207">Sudan</option>
<option value="208" data-id="208">Suriname</option>
<option value="209" data-id="209">Svalbard And Jan Mayen Islands</option>
<option value="210" data-id="210">Swaziland</option>
<option value="211" data-id="211">Sweden</option>
<option value="212" data-id="212">Switzerland</option>
<option value="213" data-id="213">Syria</option>
<option value="214" data-id="214">Taiwan</option>
<option value="215" data-id="215">Tajikistan</option>
<option value="216" data-id="216">Tanzania</option>
<option value="217" data-id="217">Thailand</option>
<option value="218" data-id="218">Togo</option>
<option value="219" data-id="219">Tokelau</option>
<option value="220" data-id="220">Tonga</option>
<option value="221" data-id="221">Trinidad And Tobago</option>
<option value="222" data-id="222">Tunisia</option>
<option value="223" data-id="223">Turkey</option>
<option value="224" data-id="224">Turkmenistan</option>
<option value="225" data-id="225">Turks And Caicos Islands</option>
<option value="226" data-id="226">Tuvalu</option>
<option value="227" data-id="227">Uganda</option>
<option value="228" data-id="228">Ukraine</option>
<option value="229" data-id="229">United Arab Emirates</option>
<option value="230" data-id="230">United Kingdom</option>
<option value="231" data-id="231">United States</option>
<option value="232" data-id="232">United States Minor Outlying Islands</option>
<option value="233" data-id="233">Uruguay</option>
<option value="234" data-id="234">Uzbekistan</option>
<option value="235" data-id="235">Vanuatu</option>
<option value="236" data-id="236">Vatican City State (Holy See)</option>
<option value="237" data-id="237">Venezuela</option>
<option value="238" data-id="238">Vietnam</option>
<option value="239" data-id="239">Virgin Islands (British)</option>
<option value="240" data-id="240">Virgin Islands (US)</option>
<option value="241" data-id="241">Wallis And Futuna Islands</option>
<option value="242" data-id="242">Western Sahara</option>
<option value="243" data-id="243">Yemen</option>
<option value="244" data-id="244">Yugoslavia</option>
<option value="245" data-id="245">Zambia</option>
<option value="246" data-id="246">Zimbabwe</option>
</select>
</div>
<div class="col-md-2 mar0-select">
<select name="state_id" id="state" class="form-control select2" style="width:100%;" required="">
<option value="" selected="" disabled="">-- No States --</option>
</select>
</div>
<div class="col">
<input type="text" id="search-text" class="form-control" placeholder="search Monetessori">
</div>
<button class="btn btn-submit">Search</button>
</div>
</form>
</div>
What I wanna do is When I Click on any tab, I wanna get the id of data-id.And add the data-categoryid attribute to the #search-form div. When I click any tab I get the id and the data-categoryid attribute is added to #search-form with id. Now What the problem was when i console.log($(this).data('categoryid')) im getting always the same value. When i Inspect into my browser i found that the #search-form div has got data-categoryid value is changing and not showing when i console.log($(this).data('categoryid')) as in the script.

The proper way of changing/updating data() is
$("#search-form").data( 'categoryid',category_id );
Documentation: https://api.jquery.com/data/
The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

Echoing HTML select value not giving same value set

I have this html select value that I used with AngularJS in building. Anytime I print the value selected from html in php, I keep getting a different thing. Eg. I selected Computer from the select group and the value="computer", when I echo in php, I get something like this:
? string: computer ?
I can't figure what the problem is.
HTML code below
<div class="form-group" form-group-sm>
<label>Faculty/School:</label>
<select name="faculty" class="form-control" ng-model="tfaculty">
<option value="Engineering">Faculty of Engineering</option>
<option value="Medicine">Faculty of Medicine</option>
<option value="Agriculture">Faculty of Agriculture</option>
<option value="Bioscience">Faculty of Bioscience</option>
<option value="Physical Science">Faculty of Physical Science</option>
<option value="Law">Faculty of Law</option>
<option value="Mgt Tech">Faculty of Management Sci./Tech.</option>
<option value="Soc. Science">Faculty of Social Science</option>
<option value="Health Sci.">Faculty of Health Sci. and Tech.</option>
<option value="Envt Tech">Faculty of Environmental Sci./Tech.</option>
<option value="Education">Faculty of Education</option>
<option value="Arts">Faculty of Arts</option>
</select>
</div>
<!--this section shows to choose department-->
<div class="form-group" form-group-sm>
<span ng-show="tfaculty == 'Engineering'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Elect Elect Eng">Electrical and Electronics</option>
<option value="Computer Eng">Computer Engineering</option>
<option value="Chemical Eng">Chemical Engineering</option>
<option value="Civil Eng">Civil Engineering</option>
<option value="Petroleum Eng">Petroleum Engineering</option>
<option value="Mechanical Eng">Mechanical Engineering</option>
<option value="Polymer Eng">Polymer and Textile</option>
<option value="Met Mat Eng">Material and Metallurgical</option>
<option value="Agric and Bio">Agric and BioResources</option>
<option value="Mechatronics Eng">Mechatronics Engineering</option>
</select>
</span>
<span ng-show="tfaculty == 'Medicine'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Surgery">Surgery</option>
<option value="Anaesthesiology">Anaesthesiology</option>
<option value="Chemical Pathology">Chemical Pathology</option>
<option value="Haematology">Haematology</option>
<option value="Histopathology">Histopathology</option>
<option value="Medicine">Medicine</option>
<option value="pthamology">Opthamology</option>
<option value="Paediatrics">Paediatrics</option>
<option value="Radiology">Radiology</option>
<option value="Medical Microbiology">Medical Microbiology</option>
<option value="Anatomy">Anatomy</option>
<option value="Physiology">Physiology</option>
</select>
</span>
<span ng-show="tfaculty == 'Agriculture'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Agric Economics">Agric Economics and Extension</option>
<option value="Crop Science">Crop Science and Horticulture</option>
<option value="Animal Science">Animal Science</option>
<option value="Forestry">Forestry and Widelife</option>
<option value="Fisheries">Fisheries and Aquaculture</option>
<option value="Food Science">Food Science and Technology</option>
<option value="Soil Science">Soil Science and Land Resources</option>
</select>
</span>
Php code below:
if (isset($_POST['search'])) { //narrowing d search by department
$department = $_POST['department'];
echo $department;}

How to Link to a Selected Drop-Down Item to Open a Web Page

I am trying to create a form which has city and social networking filter. I want to capture both the city and social networking value as i want to store the value and i want my form to redirect to social networking site on submit button. Suppose if i choose facebook, i want facebook homepage to open on submit button. My page is not getting redirected. here is my code
<script type="text/javascript">
function actionDef() {
var option_selected = $('purposeId').value();
console.log = option_selected;
if( option_selected=="gl" ) {
document.getElementById("search-form").action = "https://www.google.co.in/";
}
else if( option_selected=="y" ) {
document.getElementById("search-form").action = "https://in.yahoo.com/?p=us";
}
else if( option_selected=="fb" ) {
document.getElementById("search-form").action = "http://www.facebook.com/";
}
}
</script>
<form action="/" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical">
<div class="city">
<label for="cityId" class="required">Enter your city</label>
<select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city">
<option value="9">Bangalore</option>
<option value="20">Chennai</option>
<option value="27">Faridabad</option>
<option value="28">Ghaziabad</option>
<option value="32">Gurgaon</option>
<option value="36">Howrah</option>
<option value="38">Hyderabad</option>
<option value="49">Kolkata</option>
<option value="57">Mumbai</option>
<option value="61">Navi Mumbai</option>
<option value="63" selected="selected">New Delhi</option>
<option value="89">Noida</option>
<option value="70">Pune</option>
<option value="76">Secunderabad</option>
<option value="79">Thane</option>
<option value="92">Agra</option>
<option value="1">Ahmedabad</option>
<option value="208">Ahmednagar</option>
<option value="93">Ajmer</option>
<option value="2">Akola</option>
<option value="295">Alappuzha</option>
<option value="209">Aligarh</option>
<option value="3">Allahabad</option>
<option value="140">Alleppey</option>
<option value="294">Aluva</option>
<option value="4">Alwar</option>
<option value="94">Ambala</option>
<option value="141">Amravati</option>
<option value="5">Amritsar</option>
<option value="6">Anand</option>
<option value="112">Anantapur</option>
<option value="255">Anantnag</option>
<option value="7">Ankleshwar</option>
<option value="210">Arakkonam</option>
<option value="256">Asansol</option>
<option value="8">Aurangabad</option>
<option value="297">Avadi</option>
<option value="211">Baddi</option>
<option value="302">Bagalkot</option>
<option value="9">Bangalore</option>
<option value="142">Bardoli</option>
<option value="10">Bareilly</option>
<option value="212">Barkathpura</option>
<option value="11">Baroda</option>
<option value="213">Batala</option>
<option value="214">Beawar</option>
<option value="12">Belgaum</option>
<option value="113">Bellary</option>
<option value="267">Berhampur</option>
<option value="13">Bharuch</option>
<option value="91">Bhatinda</option>
<option value="143">Bhavnagar</option>
<option value="257">Bhilai</option>
<option value="17">Bhilwara</option>
<option value="215">Bhimavaram</option>
<option value="144">Bhiwandi</option>
<option value="14">Bhopal</option>
<option value="15">Bhubaneshwar</option>
<option value="145">Bhuj</option>
<option value="288">Bidar</option>
<option value="301">Bijapur</option>
<option value="16">Bikaner</option>
<option value="216">Bilaspur</option>
<option value="146">Boisar</option>
<option value="258">Bokaro</option>
<option value="18">Calicut</option>
<option value="19">Chandigarh</option>
<option value="217">Chandrapur</option>
<option value="147">Changanacherry</option>
<option value="275">Chankheda</option>
<option value="20">Chennai</option>
<option value="96">Chidambaram</option>
<option value="290">Chitradurga</option>
<option value="300">Chokodi</option>
<option value="21">Cochin</option>
<option value="22">Coimbatore</option>
<option value="148">Cuddalore</option>
<option value="23">Cuttack</option>
<option value="149">Dahanu</option>
<option value="150">Dahej</option>
<option value="151">Daman</option>
<option value="273">Dausa</option>
<option value="152">Davangere</option>
<option value="105">Dehradun</option>
<option value="24">Delhi</option>
<option value="218">Derabassi</option>
<option value="25">Dewas</option>
<option value="95">Dhanbad</option>
<option value="97">Dharwad</option>
<option value="26">Dhule</option>
<option value="219">Dindigul</option>
<option value="220">Durg</option>
<option value="153">Durgapur</option>
<option value="98">Eluru</option>
<option value="106">Ernakulam</option>
<option value="99">Erode</option>
<option value="221">Faizabad</option>
<option value="27">Faridabad</option>
<option value="222">Firozabad</option>
<option value="154">Gandhidham</option>
<option value="253">Gandhinagar</option>
<option value="107">Gangtok</option>
<option value="28">Ghaziabad</option>
<option value="29">Goa</option>
<option value="299">Gokak</option>
<option value="259">Gorakhpur</option>
<option value="30">Gulbarga</option>
<option value="31">Guntur</option>
<option value="32">Gurgaon</option>
<option value="114">Guwahati</option>
<option value="33">Gwalior</option>
<option value="108">Haldwani</option>
<option value="223">Hapur</option>
<option value="155">Haridwar</option>
<option value="289">Harpanahalli</option>
<option value="129">Hassan</option>
<option value="287">Haveri</option>
<option value="264">Hazirabagh</option>
<option value="34">Himmatnagar</option>
<option value="109">Hissar</option>
<option value="156">Hoshiarpur</option>
<option value="157">Hospet</option>
<option value="35">Hosur</option>
<option value="36">Howrah</option>
<option value="37">Hubli</option>
<option value="38">Hyderabad</option>
<option value="293">Idukki</option>
<option value="39">Indore</option>
<option value="40">Jabalpur</option>
<option value="41">Jaipur</option>
<option value="45">Jalandhar</option>
<option value="131">Jalgaon</option>
<option value="224">Jalna</option>
<option value="260">Jammu</option>
<option value="42">Jamnagar</option>
<option value="43">Jamshedpur</option>
<option value="225">Jhansi</option>
<option value="44">Jodhpur</option>
<option value="46">Junagadh</option>
<option value="284">Kadappa</option>
<option value="110">Kakinada</option>
<option value="158">Kalka</option>
<option value="279">Kallakurichi</option>
<option value="159">Kalyan</option>
<option value="160">Kancheepuran</option>
<option value="100">Kankroli</option>
<option value="161">Kannur</option>
<option value="47">Kanpur</option>
<option value="132">Kanyakumari</option>
<option value="162">Kapurthala</option>
<option value="163">Karad</option>
<option value="164">Karaikudi</option>
<option value="226">Karimnagar</option>
<option value="111">Karnal</option>
<option value="165">Karur</option>
<option value="286">Karwar</option>
<option value="283">Kasaragode</option>
<option value="227">Katni</option>
<option value="228">Khammam</option>
<option value="266">Khandwa</option>
<option value="166">Khanna</option>
<option value="265">Khargone</option>
<option value="305">Kolar</option>
<option value="48">Kolhapur</option>
<option value="49">Kolkata</option>
<option value="167">Kollam</option>
<option value="50">Kota</option>
<option value="90">Kottayam</option>
<option value="168">Kovilatti</option>
<option value="115">Kozhikode</option>
<option value="169">Kumbakonam</option>
<option value="116">Kurnool</option>
<option value="170">Kurukshetra</option>
<option value="136">Lathur</option>
<option value="51">Lucknow</option>
<option value="52">Ludhiana</option>
<option value="53">Madurai</option>
<option value="254">Mahabubnagar</option>
<option value="54">Mahad</option>
<option value="278">Malappuram</option>
<option value="282">Mandya</option>
<option value="55">Mangalore</option>
<option value="139">Mangan</option>
<option value="101">Manipal</option>
<option value="171">Manjeri</option>
<option value="130">Mansarovar</option>
<option value="172">Mapusa</option>
<option value="229">Mathura</option>
<option value="292">Mavelikara</option>
<option value="173">Meerut</option>
<option value="56">Mehsana</option>
<option value="174">Moga</option>
<option value="137">Mohali</option>
<option value="175">Morvi</option>
<option value="298">Mudhol</option>
<option value="57">Mumbai</option>
<option value="58">Mysore</option>
<option value="176">Nabha</option>
<option value="177">Nadiad</option>
<option value="117">Nagercoil</option>
<option value="59">Nagpur</option>
<option value="230">Nanded</option>
<option value="231">Nandyal</option>
<option value="277">Narsipatnam</option>
<option value="60">Nashik</option>
<option value="61">Navi Mumbai</option>
<option value="178">Navsari</option>
<option value="304">Neelamangala</option>
<option value="62">Nellore</option>
<option value="63">New Delhi</option>
<option value="232">Nizamabad</option>
<option value="89">Noida</option>
<option value="274">Nokha</option>
<option value="233">Ongole</option>
<option value="179">Palakkad</option>
<option value="261">Palanpur</option>
<option value="268">Palghar</option>
<option value="234">Pali</option>
<option value="138">Panchkulla</option>
<option value="180">Panipat</option>
<option value="181">Panjim</option>
<option value="64">Panvel</option>
<option value="235">Parbhani</option>
<option value="182">Patalganga</option>
<option value="183">Pathanamthitta</option>
<option value="236">Pathankot</option>
<option value="65">Patiala</option>
<option value="66">Patna</option>
<option value="67">Pen</option>
<option value="184">Phagwara</option>
<option value="68">Pithampur</option>
<option value="185">Pollachi</option>
<option value="186">Ponda</option>
<option value="102">Pondichery</option>
<option value="69">Porbunder</option>
<option value="296">Poruru</option>
<option value="187">Porvorim</option>
<option value="188">Pudukottai</option>
<option value="70">Pune</option>
<option value="237">Raichur</option>
<option value="238">Raigarh</option>
<option value="71">Raipur</option>
<option value="72">Rajkot</option>
<option value="73">Rajmundry</option>
<option value="239">Rajnandgaon</option>
<option value="189">Rajpura</option>
<option value="74">Ranchi</option>
<option value="240">Ranipet</option>
<option value="75">Ratlam</option>
<option value="133">Ratnagiri</option>
<option value="190">Rewari</option>
<option value="241">Rohtak</option>
<option value="191">Ropar</option>
<option value="118">Rourkela</option>
<option value="192">Rudrapur</option>
<option value="242">Saharanpur</option>
<option value="103">Salem</option>
<option value="285">Sangareddy</option>
<option value="134">Sangli</option>
<option value="193">Sangrur</option>
<option value="135">Satara</option>
<option value="76">Secunderabad</option>
<option value="119">Shimla</option>
<option value="243">Shimoga</option>
<option value="262">Sikar</option>
<option value="120">Silchar</option>
<option value="121">Siliguri</option>
<option value="77">Silvassa</option>
<option value="244">Sirsa</option>
<option value="245">Sitapur</option>
<option value="194">Sivakasi</option>
<option value="195">Sohana</option>
<option value="246">Solan</option>
<option value="196">Solapur</option>
<option value="197">Sonepat</option>
<option value="247">Sri Ganganagar</option>
<option value="248">Srikakulam</option>
<option value="263">Srinagar</option>
<option value="78">Surat</option>
<option value="269">Swargate</option>
<option value="249">Tadepalligudem</option>
<!--<option value="250">Tamilnadu</option> -->
<option value="122">Tanjore</option>
<option value="79">Thane</option>
<option value="198">Thanjavur</option>
<option value="281">Theni</option>
<option value="123">Thiruvananthapuram</option>
<option value="280">Thiruvannamalai</option>
<option value="291">Thripunithura</option>
<option value="124">Thrissur</option>
<option value="125">Tirunelveli</option>
<option value="126">Tirupathi</option>
<option value="251">Tirupur</option>
<option value="199">Tiruvalla</option>
<option value="272">Tonk</option>
<option value="104">Trichur</option>
<option value="80">Trichy</option>
<option value="81">Trivandrum</option>
<option value="200">Tumkur</option>
<option value="82">Udaipur</option>
<option value="201">Udupi</option>
<option value="83">Ujjain</option>
<option value="202">Unjha</option>
<option value="84">Valsad</option>
<option value="85">Vapi</option>
<option value="86">Varanasi</option>
<option value="276">Vastral</option>
<option value="127">Vellore</option>
<option value="203">Veraval</option>
<option value="87">Vijayawada</option>
<option value="204">Villupuram</option>
<option value="205">Virudhachalam</option>
<option value="206">Virudhunagar</option>
<option value="88">Vizag</option>
<option value="128">Warangal</option>
<option value="271">Wardha</option>
<option value="252">Yamunanagar</option>
<option value="270">Yavatmal</option>
<option value="303">Yelanka</option>
<option value="207">Zirakpur</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="purpose">
<label for="purposeId" class="required">Enter Type</label>
<select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type" onChange="actionDef()">
<option value="select_purpose" selected="selected">Selelct Type</option>
<option value="1" id="gl">Google</option>
<option value="2" id="y">Yahoo</option>
<option value="3" id="fb">Facebook</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span>
</div>
<div class="show-ofr">
<input type="submit" name="button" class="btn btn-primary btn-block">
</div>
</form>

try the below code, the problem is the way you process your value from select field.
JavaScript
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
jQuery(function($) {
// bind change event to select
$('#purposeId').on('change', function() {
var url = $(this).val(); // get selected value
alert(url);
if (url == "1") {
document.getElementById("search-form").action = "https://www.google.co.in/";
} else if (url == "2") {
document.getElementById("search-form").action = "https://in.yahoo.com/?p=us";
} else if (url == "3") {
document.getElementById("search-form").action = "http://www.facebook.com/";
}
});
});
</script>
HTML
<form action="" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical">
<div class="city">
<label for="cityId" class="required">Enter your city</label>
<select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city">
<option value="88">Vizag</option>
<option value="128">Warangal</option>
<option value="271">Wardha</option>
<option value="252">Yamunanagar</option>
<option value="270">Yavatmal</option>
<option value="303">Yelanka</option>
<option value="207">Zirakpur</option>
</select>
<span id="city-not-selected-error" class="help-inline"></span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="purpose">
<label for="purposeId" class="required">Enter Type</label>
<select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type">
<option value="select_purpose" selected="selected">Selelct Type</option>
<option value="1" id="gl">Google</option>
<option value="2" id="y">Yahoo</option>
<option value="3" id="fb">Facebook</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span>
</div>
<div class="show-ofr">
<input type="submit" name="button" class="btn btn-primary btn-block">
</div>
</form>

Categories

Resources