Develop Reference

Jquery Append select onChange function in javascript [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 months ago.
Here Is My HTML Code
<div class="form-group col-md-12">
<label for="inputPassword4">Category</label>
<select name="cat" id="cat" class="form-control">
<option value=" ">Choose Category</option>
#foreach ($cat as $data)
<option value="{{ $data->id }}">{{ $data->cname }}</option>
#endforeach
</select>
</div>
<div id="serv"></div>
<div id="repair"></div>
And Here is my javascript code and in this code first one was working fine that is #serv block but
the second one that is #repair section its not working onChange so please help e with this.
<script>
$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
}
else
$('#serv').empty();
});
This below Block is not working please help me with it.
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
</script>

at the first, when the page is loaded, you don't have an element with id "service" in the DOM. so your event will not be bound.
you should put your second event into the first if condition. like this:
$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
}
else
$('#serv').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-12">
<label for="inputPassword4">Category</label>
<select name="cat" id="cat" class="form-control">
<option value="">Choose Category</option>
<option value="6">value is 6</option>
</select>
</div>
<div id="serv"></div>
<div id="repair"></div>

You're creating the select with id "servic" dynamically, so you have to attach the change handler only after it's appended to #serv.
if (this.value == 6 || this.value == 7) {
$('#serv').append(`...`);
$('#servic').change(function() {
// listener code...
});
}

$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
}
else
$('#serv').empty();
});

How can I fix the following jQuery Validate issue in Umbraco?

I am using the Umbraco CMS to load a jQuery file that uses the jQuery Validate plugin. The code seems to work fine on my local machine but not in Umbraco. The form is not being validated, jQuery itself is loaded and working fine as I have tested this with a window.alert(); call. Although, saying this an if statement is not working in the CMS but is working on my local machine.
So this works fine on my local machine, but doesn't in Umbraco:
var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();
$('#00N25000002TSTd').click(function(){
if($(this).prop("checked") === true){
wheelchairOptions.show();
alert("working");
}
else if($(this).prop("checked") === false){
wheelchairOptions.hide();
}
});
Due to how Umbraco loads in code, it's not a simple copy and paste. This is how the code is laid out in Umbraco:
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8" />
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<script type="text/javascript">
var verifyCallback = function(response) {
//alert(response);
//$('#re_button').show();
$('#re_button').prop("disabled", false);
};
var onloadCallback = function() {
grecaptcha.render('example3', {
'sitekey' : '6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn',
'callback' : verifyCallback,
'theme' : 'light'
});
};
$("#nx-form").validate({
rules: {
name: {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 80,
normalizer: function( value ) {
return $.trim( value );
}
},
email: {
required: true,
email: true,
minlength: 2,
maxlength: 80
},
phone: {
required: true,
phoneUK: true,
minlength: 2,
maxlength: 40
},
subject: {
required: true,
minlength: 2,
maxlength: 40
},
"00N25000002TSEr": {
required: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSFu": {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSGJ": {
required: true,
lettersonly: true,
minlength: 2,
maxlength: 255
},
"00N25000002TSJ3": {
required: true,
time: true
},
"00N25000002TSJD": {
required: true,
dateISO: true
},
"00N25000002TSTd": {
required: true
}
}
});
// Tests to see if name field contains letters only
$.validator.addMethod( "lettersonly", function( value, element ) {
return this.optional( element ) || /^[a-z\s ,.'-]+$/i.test( value ); }, "Letters only please" );
// Tests to see if tel field contains numbers only
$.validator.addMethod( "phoneUK", function( phone_number, element ) {
phone_number = phone_number.replace( /\(|\)|\s+|-/g, "" );
return this.optional( element ) || phone_number.length > 9 &&
phone_number.match( /^(?:(?:(?:00\s?|\+)44\s?)|(?:\(?0))(?:\d{2}\)?\s?\d{4}\s?\d{4}|\d{3}\)?\s?\d{3}\s?\d{3,4}|\d{4}\)?\s?(?:\d{5}|\d{3}\s?\d{3})|\d{5}\)?\s?\d{4,5})$/ );
}, "Please specify a valid phone number" );
// Tests to see if departure fields contain correct time format
$.validator.addMethod( "time", function( value, element ) {
return this.optional( element ) || /^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test( value );
}, "Please enter a valid time in the format HH:MM, between 00:00 and 23:59. For e.g. 16:30" );
var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();
$('#00N25000002TSTd').click(function(){
if($(this).prop("checked") === true){
wheelchairOptions.show();
}
else if($(this).prop("checked") === false){
wheelchairOptions.hide();
}
});
</script>
</head>
<body>
<form action="https://national-express--bgdev.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST" id="nx-form" name="nx-form" class="nx-form">
<input type="hidden" name="orgid" value="00D2500000090xE" />
<input type="hidden" name="retURL" value="http://www.google.com" />
<input type="hidden" id="recordType" name="recordType" value="01225000000En7U" />
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="mikebackhouse#brightgen.com"> -->
<!-- ---------------------------------------------------------------------- -->
<div class="col-sm-12 form_spacing" style="font-weight: bold; font-size: 0.85em">* Required field</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="name">Contact Name</label></div>
<div class="col-sm-8">
<input class="form-control nx-form-control" id="name" maxlength="80" name="name" size="20" type="text" />
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="email">Email</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="email" name="email" type="email" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="phone">Phone</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="phone" name="phone" type="tel" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="subject">Subject</label></div>
<div class="col-sm-8"><input id="subject" class="form-control nx-form-control" maxlength="80" name="subject" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSEr">Ticket Number:</label></div>
<div class="col-sm-8"><input id="00N25000002TSEr" class="form-control nx-form-control" maxlength="255" name="00N25000002TSEr" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSFu">Travelling From:</label></div>
<div class="col-sm-8"><input id="00N25000002TSFu" class="form-control nx-form-control" maxlength="255" name="00N25000002TSFu" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSGJ">Travelling To:</label></div>
<div class="col-sm-8"><input id="00N25000002TSGJ" class="form-control nx-form-control" maxlength="255" name="00N25000002TSGJ" size="20" type="text" /></div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSJ3">Departure Time:</label><span class="timeContainer"></div>
<div class="col-sm-8"><input id="00N25000002TSJ3" class="form-control nx-form-control" name="00N25000002TSJ3" placeholder="HH:MM" size="12" type="text" /></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSJD">Date of Travel:</label><span class="dateInput dateOnlyInput"></div>
<div class="col-sm-8"><input id="00N25000002TSJD" class="form-control nx-form-control" name="00N25000002TSJD" size="12" type="text" placeholder="DD/MM/YY" /></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSTd">Travel with Wheelchair?:</label></div>
<div class="col-sm-8"><input id="00N25000002TSTd" name="00N25000002TSTd" type="checkbox" value="1" /></div>
</span>
</div>
<div id="wheelchair-options">
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSTx">Wheelchair Make</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="00N25000002TSTx" maxlength="255" name="00N25000002TSTx" size="20" type="text"/></div>
</span>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSU7">Wheelchair Model</label></div>
<div class="col-sm-8"><input class="form-control nx-form-control" id="00N25000002TSU7" maxlength="255" name="00N25000002TSU7" size="20" type="text"/></div>
</span>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUM">Age of Child 1:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUM" name="00N25000002TSUM" title="Age of Child 1">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUR">Age of Child 2:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUR" name="00N25000002TSUR" title="Age of Child 2">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUW">Age of Child 3:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUW" name="00N25000002TSUW" title="Age of Child 3">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUb">Age of Child 4:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUb" name="00N25000002TSUb" title="Age of Child 4">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TSUg">Age of Child 5:</label></div>
<div class="col-sm-8">
<select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUg" name="00N25000002TSUg" title="Age of Child 5">
<option value="">--None--</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</div>
</div>
<div class="col-sm-12 form_spacing">
<div class="col-sm-4"><label for="00N25000002TTcp">Customer Entered Summary:</label></div>
<div class="col-sm-8"><textarea class="form-control nx-form-control text_area" id="00N25000002TTcp" name="00N25000002TTcp" rows="3" type="text" wrap="soft"></textarea></div>
</div>
<div class="col-sm-12 form_spacing">
<!--<div class="g-recaptcha" data-sitekey="6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn"></div>-->
<div id="example3"></div>
</div>
<div class="col-sm-12 form_spacing">
<button id="re_button" class="primaryButton primaryButton--blue button_custom" type="submit" disabled="disabled" >Submit Query</button>
</div>
</form>
</body>
</html>
I think the issue may be related to HOW jQuery Validate is being loaded in, I have tried moving the jQuery tags to just before the tag but to no avail.
What should happen is on change and then blur the forms input fields should be tested for validation, with an error message underneath the relevant input field.

Hiding div when selecting default value from select dropdown using javascript

I have made a select dropdown with a default value of "Choose location". Upon selecting any of the location, a hidden div for the Name of school will show up.Now, how would I automatically hide it when selecting again the "Choose location" from the first dropdown select?
page source
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="col-lg-2">
<h3>Primary</h3>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="control-label">School Location:</label>
<select name="location_primary" class="form-control locationDropdown" id="selection"><option>Choose location</option> <option value="4" rel="4">Abra</option> <option value="5" rel="5">Agusan del Norte</option> <option value="6" rel="6">Agusan del Sur</option> <option value="7" rel="7">Aklan</option> <option value="8" rel="8">Albay</option> <option value="9" rel="9">Antique</option> <option value="10" rel="10">Apayao</option> <option value="11" rel="11">Aurora</option> <option value="12" rel="12">Basilan</option> <option value="13" rel="13">Bataan</option> <option value="14" rel="14">Batanes</option> <option value="15" rel="15">Batangas</option> <option value="16" rel="16">Benguet</option> <option value="17" rel="17">Biliran</option> <option value="18" rel="18">Bohol</option> <option value="19" rel="19">Bukidnon</option> <option value="20" rel="20">Bulacan</option> <option value="21" rel="21">Cagayan</option> </select>
</div>
<div class="form-group schools" id="showDiv">
<label class="control-label">Name Of School </label>
<button class=" add_field_button_primary btn-primary">+</button>
<select name="school_primary" class="form-control ">
<option class="0">Choose school</option> <option value="8" class="63">Abada College</option> <option value="9" class="57">ABE International Coll of Business and Economics-Bacolod</option> <option value="10" class="48">Abuyog Community College</option> <option value="11" class="82">Abubakar Computer Learning Center Foundation</option> <option value="12" class="20">Academia de San Lorenzo Dema Ala</option> <option value="13" class="4">Abraham Dumlao Colleges of the Philippines</option> <option value="14" class="5">ACLC College</option> <option value="15" class="6">Agusan Del Sur State College of Agriculture and Technology</option> <option value="16" class="6">Agusan Del Sur College</option> <option value="17" class="7">Aklan Polytechnic Institute</option> <option value="18" class="7">Aklan Catholic College</option> <option value="19" class="8">Albay Institute of Technology</option> <option value="20" class="8">Bicol University-College of Agriculture and Forestry</option> </select>
</div>
****html****
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="col-lg-2">
<h3>Primary</h3>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="control-label">School Location:</label>
<select name="location_primary" class="form-control" id="selection">
<option>Choose location</option>
#foreach($locations as $location)
<option value="{!! $location->location_id!!}" rel="{!! $location->location_id!!}">{!! $location->location_name!!}</option>
#endforeach
</select>
</div>
<div class="form-group" id="showDiv">
<label class="control-label">Name Of School </label>
<button class=" add_field_button_primary btn-primary">+</button>
<select name="school_primary" class="form-control " style="display: none;">
<option class="0">Choose school</option>
#foreach($schol as $school)
<option value="{!! $school->school_id !!}" class="{!! $school->location_id!!}">{!! $school->school_name!!}</option>
#endforeach
</select>
</div>
<div class="input_fields_view_primary">
</div>
</div>
<div class="col-lg-4">
<label class="control-label">SY Graduated:</label>
{!! Form::hidden('sy', '', array('id' => 'sy_hidden')) !!}
<select class="form-control" name="scholar_primary_school_year" id="pri_sy" onchange="educPre(this)">
<?php
$null = 'Null';
$choose = 'Choose A Year';
$Present = 'Present';
echo '<option value='.$null.'>' .$choose.'</option>';
echo '<option value='.$Present.'>' .$Present.'</option>';
for($i=date('Y'); $i > date('Y')-27; $i--){
$x = $i +1;
$y = $i;
echo '<option value='.$y.'-'.$x.'>'.$y.'-'.$x.'</option>';
}?>
</select>
<div class="form-group" id="hidden_div_Pre" style="display: none;" >
<div class="form-group"><br>
<label class="control-label">Select Grade Level:</label>
{!! Form::select('scholar_primary_grade', [
''=>'Choose a Year Level',
'1' => 'Grade-1',
'2' => 'Grade-2',
'3' => 'Grade-3',
'4' => 'Grade-4',
'5' => 'Grade-5',
'6' => 'Grade-6'
],NULL,['class'=>'form-control']) !!}
</div>
<div class="form-group">
<label class="control-label">Grade Point Average (GPA):</label>
{!! Form::text('scholar_primary_gpa',NULL,['class'=>'form-control','placeholder'=>'Enter Your Last Grade Point Average'])!!}
</div>
<div class="form-group">
<label class="control-label">Grade Picture:</label>
{!! Form::file('scholar_primary_grade_proof',['class'=>'form‐control','id'=>'scholar_primary_grade_proof' ]) !!}
</div>
<div class="form-group">
<img id="certificate" src="#" name="scholar_primary_grade_proof" class="img-responsive well" alt="Image" />
</div>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="control-label">Award and Recognition:</label>
{!! Form::text('scholar_primary_awards',NULL,['class'=>'form-control','placeholder'=>'Enter Your Award and Recognition','data-role'=>'tagsinput'])!!}
</div>
</div>
</div>
</div>
</div>
</div>
******Script******
$(document).ready(function(){
var $cat = $('select[name=location_primary]'),
$school = $('select[name=school_primary]');
var thisSelect = document.getElementById('selection');
var selection = thisSelect.options[thisSelect.selectedIndex].innerHTML;
if(selection == 'Choose location'){
$('#showDiv').hide();
}
$cat.change(function(){
if(selection == 'Choose location') {
$('#showDiv').show();
}
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $school.find('option.' + rel);
if ($set.size() < 0) {
$school.hide();
return;
}
$school.show().find('option').hide();
$set = $school.find('option.0, option.' + rel);
$set.show().first().prop('selected', true);
});
});

Inside your $cat.change use this to get the current selected value, and hide and show div based on the current value.
$(document).ready(function(){
var $cat = $('select[name=location_primary]'),
$school = $('select[name=school_primary]');
var thisSelect = document.getElementById('selection');
var selection = thisSelect.options[thisSelect.selectedIndex].innerHTML;
if(selection == 'Choose location'){
$('#showDiv').hide();
}
$cat.change(function(){
if($(this).find(":selected").text() == 'Choose location') {
$('#showDiv').hide();
}else {
$('#showDiv').show();
}
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $school.find('option.' + rel);
if ($set.size() < 0) {
$school.hide();
return;
}
$school.show().find('option').hide();
$set = $school.find('option.0, option.' + rel);
$set.show().first().prop('selected', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="location_primary" class="form-control" id="selection">
<option>Choose location</option>
<option value="la">LA</option>
<option value="some">some</option>
</select>
<div class="form-group" id="showDiv">
<label class="control-label">Name Of School </label>
<button class=" add_field_button_primary btn-primary">+</button>
<select name="school_primary" class="form-control " style="display: none;">
<option class="0">Choose school</option>
<option value="schoool">School</option>
<option value="anotherschoool">Another School</option>
</select>
</div>

Is this what you are looking for? It was hard to decipher your code (mixed with PHP) but I think this should work if you change some names around.
$(document).on("change", ".locationDropdown", function(e) {
//Value of the select
var selectValue = $(this).val();
//If Choose Location is chosen, hide div
if (selectValue == 'Choose location') {
$(".location").hide();
} else {
$(".location").html(selectValue);
$(".location").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='locationDropdown'>
<option value="Choose location" selected>Choose location</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class='location'></div>

Submit Button Javascript Causing Form To Not Submit

I have a Signup Form that I've used JS to divide into three separate fieldsets. I've also written a JS function for the actual handling of the form data. The form itself looks great, and the Previous and Next buttons work fine, but the Submit Button just presses and is not Submitting. Is the problem in the signup() function?
The Form is as follows:
<body>
<!-- multistep form -->
<form id="signupform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Personal Profile</li>
<li>Second Profile</li>
<li>Additional Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" id="username" onblur="checkusername()" onkeyup="restrict('username')" maxlength="100" placeholder="Username" />
<span id="unamestatus"></span>
<input type="text" id="email" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88" placeholder="Email" />
<input type="password" id="pass1" onfocus="emptyElement('status')" maxlength="100" placeholder="Password" />
<input type="password" id="pass2" onfocus="emptyElement('status')" maxlength="100" placeholder="Confirm Password" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Second Profile</h2>
<h3 class="fs-subtitle">The Second You</h3>
<select id="favorite genre" onfocus="emptyElement('status')" placeholder="Favorite Genre" />
<?php include("template_genre_list.php"); ?>
</select>
<select id="second favorite genre" onfocus="emptyElement('status')" placeholder="Second Favorite Genre" />
<?php include("template_genre_list.php"); ?>
</select>
<select id="tfg" onfocus="emptyElement('status')" placeholder="Third Favorite Genre" />
<?php include("template_genre_list.php"); ?>
</select>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Additional Details</h2>
<h3 class="fs-subtitle">The Additional Things</h3>
<select id="gender" onfocus="emptyElement('status')" placeholder="Gender" />
<option value=""></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<select id="state" onfocus="emptyElement('status')" placeholder="State" />
<option value=""></option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
<input type="text" id="city" onfocus="emptyElement('status')" onkeyup="restrict('city')" maxlength="200" placeholder="City (or General Location)">
<input id="biography" type="text" onfocus="emptyElement('status')" onkeyup="restrict('biography')" maxlength="200" placeholder="A Short But Awesome Bio" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<button id="signupbtn" onclick="signup()">Create Account</button>
<span id="status"></span>
</fieldset>
</form>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<script src="signupjs/signup.js"></script>
</body>
and the signup() function is as follows:
function signup(){
var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var sta = _("state").value;
var cit = _("city").value;
var g = _("gender").value;
var bio = _("biography").value;
var status = _("status");
if(u == "" || e == "" || p1 == "" || p2 == "" || sta == "" || cit == "" || g == "" || bio == ""){
status.innerHTML = "Please fill out all the fields! ";
} else if(p1 != p2){
status.innerHTML = "Your password fields do not match";
} else {
_("signupbtn").style.display = "none";
status.innerHTML = 'Please Wait ...';
var ajax = ajaxObj("POST", "signup.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != "signup_success"){
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
} else {
window.scrollTo(0,0);
_("signupform").innerHTML = "OK "+u+", check your email inbox and junk mail box at <u>"+e+"</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
}
}
}
ajax.send("u="+u+"&e="+e+"&p="+p1+"&sta="+sta+"&cit="+cit+"&c="+c+"&g="+g+"&pi="+pi+"&si="+si+"&ai="+ai+"&fg="+fg+"&sfg="+sfg+"&tfg="+tfg+"&fa="+fa+"&hi="+hi+"&av="+av+"&bio="+bio);
}
}

Have you tried using event.preventDefault(); in your signup() function?
This would prevent the default handling of buttons, which may solve your problem.

Cant toggle forms using JavaScript

I have this html
<body>
<section id="content" class="m-t-lg wrapper-md animated fadeInDown">
<a class="nav-brand" href="index.html"></a>
<div class="row m-n">
<div class="col-md-4 col-md-offset-4 m-t-lg">
<section class="panel">
<header class="panel-heading bg bg-primary text-center">
<div class="m-b-sm">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio1"> <i class="icon-ok text-active"></i>Credit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio2"> <i class="icon-ok text-active"></i>Debit card
</label>
<label class="btn btn-sm btn-success">
<input type="radio" name="radios" id="radio3"> <i class="icon-ok text-active"></i>Internet Banking
</label>
</div>
</div>
</header>
<form method="post" action="http://www.bjhhbhjh.com/webapp/TokenProcess.php" class="panel-body" id="cardpayment">
<div class="form-group">
<input type='hidden' id='ccType' name='ccType'/>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="form-group">
<label class="control-label">Card Number</label>
<input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control">
</div>
<div class="form-group">
<label class="control-label" style="display:inline">Expiry</label>
<select class="form-control" id="expiry_month" name="expiry_month">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="form-control" id="expiry_year" name="expiry_year">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option> <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
<div class="form-group">
<label class="control-label">CVV</label>
<input type="password" id="cvv" name="cvv" placeholder="123" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Name on card</label>
<input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
<div class="line line-dashed"></div>
<p class="text-muted text-center"><small>Already have an account?</small></p>
</form>
<form method="post" action="http://www.bmbmnbmnb.com/webapp/IB.php" id="internetpayment" class="panel-body">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<label class="control-label" style="display:inline">Bank</label>
<select class="form-control" id="BankId" name="BankId">
<option selected>Select Bank</option>
<option value="CORP">CORPORATION </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">
<button type="submit" class="btn btn-info">Pay Now</button>
</form>
</section>
</div>
</div>
</section>
<!-- footer -->
<footer id="footer">
<div class="text-center padder clearfix">
<p>
<small>Mobile first web app framework base on Bootstrap<br>© 2013</small>
</p>
</div>
</footer>
</body>
this primarly has 2 forms with ids "cardpayment" and "internetbanking".
I have a 3 radio buttons in which when i select "creditcard" form with id "card payment" is shown.When I click on "debit card",again the same form.And when I click on "internet banking" form with id"internetbanking" is shown and "cardpayment" form is hidden.
I have tried the following javascript
var radios = document.getElementsByName("radios");
var cardpayment = document.getElementById("cardpayment");
var internetpayment = document.getElementById("internetpayment");
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' || val == 'radio2'){
cardpayment.style.display = 'block';
internetpayment.style.display = 'none';
}
else if(val == 'radio3'){
cardpayment.style.display = 'none';
internetpayment.style.display = 'block';
}
}
}
I have a fiddle demo with all the details here
http://jsfiddle.net/7DCY8/

Your code seems fine except you should change
var val = this.value;
to
var val = this.id;
Here's the working fiddle.