jQuery getting data attribute and setting correct selected option - javascript

I am new to jQuery and think I'm close to what I'm needing.
I need to get the value from the data-status and then set the correct select option and selected.
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
// u = updated
// n = new
if (optionStatus == 'u') {
foundStatus = $currentStatus.find('select option');
if ($(foundStatus).val() == 'u') {
$(this).attr('selected', 'selected');
} else if ($(foundStatus).val() == 'n') {
$(this).attr('selected', 'selected');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>

You should simply use .val() method to set the value of element.
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
$currentStatus.find('select').val(optionStatus);
});
// set default status
$('.column.small').each(function() {
var $currentStatus = $(this);
var optionStatus = $currentStatus.data('status');
$currentStatus.find('select').val(optionStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="u" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</div>
<div data-status="n" class="column small grey" selected="selected">
<div class="form-group">
<select id="PC_Row_4_Status" name="PC_Row_4_Status" ccm-passed-value="u" class="form-control">
<option value="u" selected="selected">Updated</option>
<option value="n">New</option>
</select>
</div>
</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>

jQuery class doesn't add on changing the option of a select box

I have attributes (color, size) and their units(black,blue || 32cm,42cm).
I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).children().attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>
You need to target only the selected option and its corresponding data-attr.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).find('option:selected').attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

Bootstrap- Align two <select> horizontally

These two select from the same control-group are getting displayed vertically. I want to display them horizontally. I tried doing inline-block on CSS, but there are some other <div> with the same control-group class, with different width and margin settings. Changing the class name doesn't help either.
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
<select name="Delivery" id="Delivery" disabled="">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select>
<script>
var category = document.getElementById('Delivery');
document.getElementById('week').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'OPEN') {
category.value = 'OPEN';
} else {
category.value = 'CLOSE';
}
} else {
category.value = '';
}
}
</script>
</div>
Flexbox version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div style="display: flex; flex-direction: row;">
<select></select>
<select></select>
</div>
</div>
Bootstrap version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div class="row>
<div class="col-md-6>
<select></select>
</div>
<div class="col-md-6>
<select></select>
</div>
</div>
</div>
CSS version:
<div class="control-group">
<label for="week" style="display: block; width: 100%;">Dispatch schedule:</label>
<select style="display: float: width: 49%;></select>
<select style="display: float: width: 49%;></select>
</div>
you could use multi column grid
and set no of columns or width accordingly.
fiddle - https://jsfiddle.net/nLddvkw6/1
**
<div class="control-group">
<div class="row">
<div class="border col-xs-4"><label for="week">Dispatch schedule:</label></div>
<div class="border col-xs-4"><select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
</div>
<div class="border col-xs-4"> <select class="form-control" name="Delivery" id="Delivery" disabled="" style="width:110px;">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select></div>
</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/

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".

Categories