how to display a specific content on selected option

how to display a specific content on selected option | jQuery - javascript

i've this code where i have a specific div i want to show if i selected a specific option
my code is based on this codepen tutorial: https://codepen.io/scanfcode/pen/vZJmQo
however it does not working
$('#select_service').change(function() {
var select = $(this).find('option:selected').val();
console.log(select);
$(".hide").hide();
$('#' + select).show();
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Layanan yang Digunakan</label>
<select class="custom-select" id="select_service" name="service">
<option value="0" disabled>Pilih:</option>
<option value="FIFASTRA">FIFASTRA</option>
<option value="SPEKTRA">SPEKTRA</option>
<option value="DANASTRA">DANASTRA</option>
<option value="AMITRA">AMITRA</option>
<option value="FINATRA">FINATRA</option>
<option value="FLEET">FLEET</option>
</select>
</div>
<br> //content i want to show based on value
<div class="form-group hide" id="SPEKTRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Elektronik">Pembiayaan Elektronik</option>
<option value="Pembiayaan Furniture">Pembiayaan Furniture</option>
<option value="Pembiayaan Gadget">Pembiayaan Gadget</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="DANASTRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Multiguna" selected>Pembiayaan Multiguna</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="FIFASTRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Motor Honda" selected>Pembiayaan Motor Honda</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="FINATRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Produktif Usaha Mikro" selected>Pembiayaan Produktif Usaha Mikro</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="FLEET">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Group Customer">Pembiayaan Group Customer</option>
<option value="Pembiayaan Corporate Operational">Pembiayaan Corporate Operational</option>
<option value="Pembiayaan Employee Benefit">Pembiayaan Employee Benefit</option>
</select>
<span class="message" id="type"></span>
</div>
in the snippet it's showing an error, but on my console in my code it's not returning any error
the form
it should be showing on the right side of this option (image above)

You just have to remove the change() statement at the end of your change event listener. To initially hide the divs you could simply use the following line from your event handler:
$(".hide").hide();
Working example
$('#select_service').change(function() {
var select = $(this).find('option:selected').val();
console.log(select);
$(".hide").hide();
$('#' + select).show();
});
$(".hide").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Layanan yang Digunakan</label>
<select class="custom-select" id="select_service" name="service">
<option value="0" disabled>Pilih:</option>
<option value="FIFASTRA">FIFASTRA</option>
<option value="SPEKTRA">SPEKTRA</option>
<option value="DANASTRA">DANASTRA</option>
<option value="AMITRA">AMITRA</option>
<option value="FINATRA">FINATRA</option>
<option value="FLEET">FLEET</option>
</select>
</div>
<br> //content i want to show based on value
<div class="form-group hide" id="SPEKTRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Elektronik">Pembiayaan Elektronik</option>
<option value="Pembiayaan Furniture">Pembiayaan Furniture</option>
<option value="Pembiayaan Gadget">Pembiayaan Gadget</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="DANASTRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Multiguna" selected>Pembiayaan Multiguna</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="FIFASTRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Motor Honda" selected>Pembiayaan Motor Honda</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="FINATRA">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Produktif Usaha Mikro" selected>Pembiayaan Produktif Usaha Mikro</option>
</select>
<span class="message" id="type"></span>
</div>
<div class="form-group hide" id="FLEET">
<label>Pilih Jenis Pembiayaan</label>
<select class="custom-select" name="type">
<option value="Pembiayaan Group Customer">Pembiayaan Group Customer</option>
<option value="Pembiayaan Corporate Operational">Pembiayaan Corporate Operational</option>
<option value="Pembiayaan Employee Benefit">Pembiayaan Employee Benefit</option>
</select>
<span class="message" id="type"></span>
</div>

Related

Hiding select option based on value that i choose

So i'm having a simple code like this
<div class="form-group form-material floating">
<select class="form-control" name="first" id="first">
<option value="opt1">First Option</option>
<option value="opt2">Second Option</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
and
<div class="form-group form-material floating">
<select class="form-control" name="second" id="second">
<option value="val1">First Value</option>
<option value="val2">Second Value</option>
<option value="val3">Third Value</option>
<option value="val4">Fourth Value</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
What I am trying to do is when i choose 'opt1' i want the other select only show 'val2, val3, val4' and if i choose 'opt2' i want the other select only show 'val1, val2, val4' .. how do i do that ?

$("#first").on('change', function(){
if(this.value == 'opt1')
{
$(".op3").removeClass("hidden");
$(".op1").addClass("hidden");
}
else if(this.value == 'opt2')
{
$(".op1").removeClass("hidden");
$(".op3").addClass("hidden");
}
});
.hidden{display:none !important;}
<div class="form-group form-material floating">
<select class="form-control" name="first" id="first">
<option value="opt1">First Option</option>
<option value="opt2">Second Option</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
<div class="form-group form-material floating">
<select class="form-control" name="second" id="second">
<option class="op1" value="val1">First Value</option>
<option value="val2">Second Value</option>
<option class="op3" value="val3">Third Value</option>
<option value="val4">Fourth Value</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

How to display hidden form field based on select box choice

I want from the first dropdown when i select top to open the c92 dropdown
and when i select low to open the c97 dropdown with bootstrap.
I don't want to have breaks between the hidden lists. Any thoughts?
<div class="form-group c86 required" data-cid="c86">
<label class="control-label" for="c86">Product</label>
<div class="input-group">
<span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
<select class="form-control" id="c86" name="c86" data-rule-required="true">
<option value="">- Select -</option>
<option value="top">top</option>
<option value="low">low</option>
</select>
</div>
</div>
<div class="form-group c92 " data-cid="c92">
<label class="control-label" for="c92" style="display: none">Mattress</label>
<div class="input-group">
<span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
<select class="form-control" id="c92" name="c92" style="display: none">
<option value="">- Select -</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
</div>
<div class="form-group c97 " data-cid="c97">
<label class="control-label" for="c97" style="display: none">Sofa</label>
<div class="input-group">
<span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
<select class="form-control" id="c97" name="c97" style="display: none">
<option value="">- Select -</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
</div>

Put the id on the div wrapper and hide it, use onchange event to call the function displayForm, when the select changes it checks the value and then shows/hides the wrappers elements by id.
function displayForm(elem){
if(elem.value == "top") {
document.getElementById('c97').style.display = "none";
document.getElementById('c92').style.display = "block";
} else {
document.getElementById('c92').style.display = "none";
document.getElementById('c97').style.display = "block";
}
}
<div class="input-group"><span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
<select class="form-control" onchange="displayForm(this)" id="c86" name="c86" data-rule-required="true"
<option value="">- Select -</option>
<option value="top">top</option>
<option value="low">low</option>
</select>
</div>
</div>
<div id="c92" style="display: none" class="form-group c92 " data-cid="c92">
<label class="control-label" for="c92" >Mattress</label>
<div class="input-group"><span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
<select class="form-control" name="c92"
>
<option value="">- Select -</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
</div>
<div id="c97" class="form-group c97 " style="display: none" data-cid="c97">
<label class="control-label" for="c97" >Sofa</label>
<div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
<select class="form-control" name="c97"
>
<option value="">- Select -</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
</div>

Is this something like what your after?.
ps: You can run the code snippet..
var
c86 = $('#c86'),
c92 = $('#c92');
function selChange() {
var
v = c86.find('option:selected').val(),
vtop = c92.find('option:selected').val();
$('[data-cid=c92]').toggleClass('hidden',
v !== 'top');
$('[data-cid=c97]').toggleClass('hidden',
v !== 'low');
console.log(vtop, v);
$('[data-cid=c_one]').toggleClass('hidden',
!(v === 'top' && vtop === 'One'));
}
c86.change(selChange);
c92.change(selChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group c86 required" data-cid="c86">
<label class="control-label" for="c86">Product</label>
<div class="input-group"><span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
<select class="form-control" id="c86" name="c86" data-rule-required="true">
<option value="">- Select -</option>
<option value="top">top</option>
<option value="low">low</option>
</select>
</div>
</div>
<div class="hidden form-group c92 " data-cid="c92">
<label class="control-label" for="c92">Mattress</label>
<div class="input-group"><span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
<select class="form-control" id="c92" name="c92">
<option value="">- Select -</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
</div>
<div class="hidden form-group c97 " data-cid="c97">
<label class="control-label" for="c97">Sofa</label>
<div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
<select class="form-control" id="c97" name="c97">
<option value="">- Select -</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
</div>
<div class="hidden form-group c_one " data-cid="c_one">
<label class="control-label" for="c_one">Test 2</label>
<div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
<select class="form-control" id="c_one" name="c_one">
<option value="">- Select -</option>
<option value="A">Top One</option>
<option value="B">Was</option>
<option value="C">Selected</option>
</select>
</div>
</div>

Reload the bootstrap3 modal with dynamic data

I have a modal which initially has two <div> elements inside. But users can dynamically add additional <div> elements also.
What I want to do is to show only the default two <div>s each time modal is closed and reopened.
I tried the following:
$('#modal').on('show.bs.modal', function () {
$(this).removeData('bs.modal');
});
It did not help.
How can I do this?
Initial modal body:
<div class="modal-body">
<div class="row" id="leg-1">
<div class="col-md-5" id="pickup-info-1">
<div class="row">
<div class="col-md-1">
<p class="split-location__leg-number">1</p>
</div>
<div class="col-md-11">
<p><span id="pickup-name-1"></span> <br/> <span id="pickup-address-1"></span> <br/> <strong><span id="pickup-city-1"></span>, <span id="pickup-state-1"></span> <span id="pickup-zip-1"></span></strong> <br/> Contact: <span id="pickup-contact-1"></span><br/> Phone: <span id="pickup-phone-1"></span></p>
<p id="pickup-date-1"></p>
</div>
</div>
</div>
<div class="col-md-7" id="delivery-info-1">
<div class="row">
<div class="col-md-10">
<form class="split-location-form">
<div class="form-group">
<input type="text" class="form-control" id="delivery-name-1" placeholder="Name" value="BusinessName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-contact-1" placeholder="Contact" value="ContactName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-phone-1" placeholder="Phone" value="+99893497989">
</div>
<div class="form-group">
<input type="text" class="form-control" id="delivery-address-1" placeholder="Address" value="ContactAddress">
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="delivery-city-1" placeholder="City" value="ContactCity">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="form-control split-location__state" id="delivery-state-1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FM">Federated States Of Micronesia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MH">Marshall Islands</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV'">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC'">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="MP">Northern Mariana Islands</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PW">Palau</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VI">Virgin Islands</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="number" class="form-control split-location__zip" id="delivery-zip-1" placeholder="ZIP" value="100189">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="date" class="form-control" id="delivery-date-1" placeholder="Delivery date" value="2016-10-10">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="split-location-form__price">Price:</label>
<input type="number" id="delivery-price-1" class="form-control split-location-form__price" value="600">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-sm split-location__delete-leg-btn" title="Delete this leg" data-id="1" id="delete-btn-1">Delete</button>
</div>
</div>
</div>
</div>
<hr/>
<div class="row" id="leg-2">
<div class="col-md-5" id="pickup-info-2">
<div class="row">
<div class="col-md-1">
<p class="split-location__leg-number">2</p>
</div>
<div class="col-md-11" id="pickup-info-exists-2">
<p><span id="pickup-name-2"></span> <br/> <span id="pickup-address-2"></span> <br/> <strong><span id="pickup-city-2"></span>, <span id="pickup-state-2"></span> <span id="pickup-zip-2"></span></strong> <br/> Contact: <span id="pickup-contact-2"></span><br/> Phone: <span id="pickup-phone-2"></span></p>
<div class="form-group">
<input type="date" id="pickup-date-2" class="form-control split-location__pickup-date">
</div>
</div>
<div class="col-md-11" id="no-pickup-info-2">
<p class="text-muted">Pickup information is <br/> not available yet</p>
<div class="form-group">
<input type="date" id="pickup-date-2" class="form-control split-location__pickup-date">
</div>
</div>
</div>
</div>
<div class="col-md-7" id="delivery-info-2">
<div class="row">
<div class="col-md-10">
<p><span id="delivery-name-2"></span><br/><span id="delivery-address-2"></span> <br/> <span id="delivery-city-2"></span>, <span id="delivery-state-2"></span> <span id="delivery-zip-2"></span><br/> Contact: <span id="delivery-contact-2"></span><br/> Phone: <span id="delivery-phone-2"></span></p>
<div class="form-group">
<p>
<span style="margin-right: 30px" id="delivery-date-2"></span> Price:
<input type="number" class="form-control split-location-form__price" id="delivery-price-2">
</p>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<button type="button" id="add-leg-btn" class="btn btn-success split-location__add-leg-btn">Add New Leg</button>
</div>
</div>
</div>
Basically, it has three main parts:
<div class="row" id="leg-1">
....
</div>
<hr>
<div class="row" id="leg-2">
....
</div>
<button>Add Leg</button>
The first two divs are initial defaults. When a user presses a Add Leg button, another div with id leg-3 (and so on.) is inserted into the template.

Add a class to the added <div>, ie. '.addedDivClass',
Then use jQuery .remove() to remove the elements when you show the modal.
$('#modal').on('show.bs.modal', function () {
// Get the added divs within the modal and remove them
$('.addedDivClass', this).remove();
});
Read more about remove() here.

try the following:
$('#modal').on('show.bs.modal', function () {
// Get the added divs within the modal and remove all except the first 2
$('div[id^="leg"]').not('#leg-1,#leg-2').remove();
});
demo: https://jsfiddle.net/hmf2v4bj/

Dropdownlist using javascript

I have these 3 dropdownlist. I want to show only 1 dropdownlist according to values selected in the first DDL. can someone help me with this :
HTML :
<div class="field">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For" >
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="field1">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type" >
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="field2">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type" >
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="field3">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type" >
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>
Means if i select shops in first DDL then the second DDL should be DIV field2

Basically, the idea is to get the value of message_for select using jquery and show or hide other selects based on its value.
$("#message_for").on("change", function(){
if($(this).val() == "shop"){
$(".field1").show();
}
//here add more cases to show relevant selects
});
I have created this jsfiddle for you - https://jsfiddle.net/guranjanpsingh/h9prdxyy/2/

The easiest way is to add classes to divs with the same name as option values in order to target them.
$('div:not(".general")').hide();
$('#message_for').on('change', function() {
$('div:not(".general")').hide();
$('.' + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="general">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For">
<option value=''>Please Select</option>
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="shop">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type">
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="offers">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type">
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="events">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type">
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>

Set form post data to backbone model to call rest service

I am new be to backbone . I have created a form
<form name="searchForm" method="POST" id="CandidateSearch"
`
enctype="application/json" accept-charset="utf-8">
<br> <br>
<div class="container" style="background-color: #eee;">
<div class="rows" id="row1" style="background-color: #eee;">
<!----Heading section--->
<h2 class="adcase">Advance Candidate Search (Job)</h2>
</div>
<br>
<div class="rows" id="row2" style="background-color: #eee;">
<!----Skill section--->
<div class="rows">
<h3 class="skill2" style="margin-top: 20px;">Skill:</h3>
<br>
<div class="side-by-side clearfix">
<div>
<select data-placeholder="Choose a option..." name="skills"
class="chosen-select" multiple style="width: 350px;"
tabindex="4">
<option value="sonal" class="a3a">asd</option>
<option value="United States" class="a3a">It</option>
<option value="United Kingdom">auto</option>
<option value="Afghanistan">bpo</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
</select>
</div>
</div>
<br> <br>
</div>
</div>
<br>
<div class="rows" id="row3" style="background-color: #eee;">
<!---Location section--->
<h3 class="skill2" style="margin-top: 20px;">Location:</h3>
<br>
<div class="col-md-2">
<select id="mark" name="country" class="btgredse">
<option value="">--</option>
<option value="india">india</option>
<option value="Audi">Audi</option>
</select>
</div>
<div class="col-md-2">
<select id="series" name="state" class="btgredse">
<option value="">--</option>
<option value="raj" class="india">raj</option>
<option value="mah" class="india">mah</option>
<option value="kar" class="india">kar</option>
<option value="A3" class="Audi">A3</option>
<option value="A4" class="Audi">A4</option>
<option value="A5" class="Audi">A5</option>
</select>
</div>
<div class="col-md-2">
<select id="model" name="city" class="btgredse">
<option value="">--</option>
<option value="pune" class="mah">pune</option>
<option value="jaipur" class="raj">jaipur</option>
<option value="hubli" class="kar"cla">hubli</option>
<option value="Sportback" class="a3 a5">Sportback</option>
</select>
</div>
</div>
<br> <br>
<div class="rows" id="row4" style="background-color: #eee;">
<!----------Domain and role section--->
<h3 class="skill2" style="margin-top: 20px;">Domain & Role:</h3>
<div class="col-md-6" id="row4-c1" style="background-color: #eee;">
<h4 class="skill2" style="margin-top: 20px;">Functional Area :
</h4>
<br>
<div class="side-by-side clearfix">
<div>
<select data-placeholder="Choose a option..."
name="functionalArea" class="chosen-select" multiple
style="width: 350px;" tabindex="4">
<option value=""></option>
<option value="United States">It</option>
<option value="United Kingdom">auto</option>
<option value="Afghanistan">bpo</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
</select>
</div>
</div>
<br> <br>
</div>
<div class="col-md-6" id="row4-c2" style="background-color: #eee;">
<h4 class="skill2" style="margin-top: 20px;">Functional Role:
</h4>
<br>
<div class="side-by-side clearfix">
<div>
<select data-placeholder="Choose a option..."
name="functionalRole" class="chosen-select" multiple
style="width: 350px;" tabindex="4">
<option value=""></option>
<option value="United States">testing</option>
<option value="United Kingdom">designing</option>
<option value="Afghanistan">develpment</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
</select>
</div>
</div>
<br> <br>
</div>
</div>
<div class="rows" id="row5" style="background-color: #eee;">
<!-------education section--->
<h3 class="skill2" style="margin-top: 20px;">Education:</h3>
<br>
<div class="col-md-2">
<select id="Highestd" class="btgredse" name="highestDegree">
<option name="name" value="1">Highest Degree</option>
<option name="name" value="2">Be</option>
<option name="name" value="3">MCA</option>
<option name="name" value="4">ME</option>
</select>
</div>
<div class="col-md-2">
<select id="Specialization" class="btgredse" name="specialization">
<option name="name" value="1">Specialization</option>
<option name="name" value="2">jodhpur</option>
<option name="name" value="3">kota</option>
<option name="name" value="4">churu</option>
<option name="name" value="5">siker</option>
</select>
</div>
<div class="col-md-1">
<select id="To1" class="btgredse" name="passingYear"><option
name="name" value="1">Passing year</option></select>
</div>
</div>
<br> <br>
<div class="rows" id="row9" style="background-color: #eee;">
<!-------Institute section--->
<h3 class="skill2" style="margin-top: 20px;">Experience:</h3>
<br>
<div class="col-md-1">
<select id="Min" class="btgredsesmage" name="totalExperienceMin"><option
name="name" value="1">Min</option>
</select>
</div>
<div class="col-md-1">
<select id="Max" class="btgredsesmage" name="totalExperienceMax"><option
name="name" value="1">Max</option>
</select>
</div>
</div>
<br> <br>
<div class="rows" id="row10" style="background-color: #eee;">
<h3 class="" style="margin-top: 20px;">Keyword:</h3>
<br>
<div class="col-md-2">
<input type="text" name="keyWord">
</div>
</div>
<br> <br> <br> <br>
<div class="rows" id="row11" style="background-color: #eee;">
<div class="col-md-12">
<center>
<button type="submit" class="btn btn-default btn-lg" id="submit1">Submit</button>
</center>
</div>
</div>
</div>
</form>
I am trying to get form data in order to call rest service . I gone through Google but doesn't found .
<script type="text/javascript">
var Search = Backbone.Model.extend({
});
var search =new Search();
$('#CandidateSearch').submit(function() {
var $this = $(this)
, viewArr = $this.serializeArray()
, view = {};
for (var i in viewArr) {
view[viewArr[i].name] = viewArr[i].value;
}
});
</script>
I am expecting JSON from form like
{
"skills":["c","java"],
"country":["India"],
"state":["Maharashtra","Gujrat"],
"city":["Mumbai","Pune"],
"highestDegree":["MCA","BE"],
"functionalArea":["IT"],
"functionalRole":["Tester"]
}
But it gives me the output as a object. where i am lacking?

Your submit function looks correct to me, except the fact that it won't produce anything. I would suggest something like:
var Search = Backbone.Model.extend({
url: "/some/url"
});
$('#CandidateSearch').submit(function() {
var $this = $(this),
viewArr = $this.serializeArray()
search = new Search();
for (var i in viewArr) {
search.set(i, viewArr[i]);
}
search.save({
success: function() { ... }
});
return false;
});
To be noted:
Backbone models provide many useful functions like set or save http://backbonejs.org/#Model
Don't forget to return false at the end of your submit! Otherwise, the browser continues a normal POST request.
If I may, I would also recommend to create a Backbone.View for your form, then you can bind the submit event "the backbone way".

We Keep Coding

JavaScript is the programming language of the Web.

how to display a specific content on selected option | jQuery - javascript

Related

Hiding select option based on value that i choose

How to display hidden form field based on select box choice

Reload the bootstrap3 modal with dynamic data

Dropdownlist using javascript

Set form post data to backbone model to call rest service

Categories

Resources