I have the following html
<form action="/customer/images/1/upload_xray" method="post" id="xrayform" enctype="multipart/form-data">
<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="2">
<input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0">
<input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000">
<input type="hidden" name="csrfmiddlewaretoken" value="LI1L39J1C7P4tQeqfJhL5CBuW283FmOI">
<div class="form-group">
<label for="date">Date</label>
<input id="date" type="text" name="date" class="form-control input-sm datepicker input-append date" readonly="">
</div>
<div class="form-group">
<label for="id_title">Title</label>
<select class="form-control input-sm" id="id_title" name="title">
<option value="" selected="selected">---------</option>
<option value="Observation">Observation</option>
<option value="Initial">Initial</option>
<option value="Progress">Progress</option>
<option value="Final">Final</option>
<option value="Post Treatment">Post Treatment</option>
</select>
</div>
<hr class="divider">
<div class="form-wrapper">
<div class="form-group">
<label for="id_form-0-image">Image</label>
<input id="id_form-0-image" name="form-0-image" type="file">
</div>
<div class="form-group">
<label for="id_form-0-type">Type</label>
<select class="form-control input-sm" id="id_form-0-type" name="type">
<option value="" selected="selected">---------</option>
<option value="xray">X-ray Image</option>
<option value="internal">Intraoral Image</option>
<option value="external">Extra-oral Image</option>
<option value="model">Model</option>
</select>
</div>
<div class="form-group">
<label for="id_form-0-desc">Desc</label>
<select class="form-control input-sm" id="id_form-0-desc" name="form-0-desc">
<option value="" selected="selected">---------</option>
<optgroup label="Xray">
<option value="PA Ceph">PA Ceph</option>
<option value="Lateral Ceph">Lateral Ceph</option>
<option value="Panoramic">Panoramic</option>
</optgroup><optgroup label="Interior oral">
<option value="Anterior Occlution">Anterior Occlution</option>
<option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option>
<option value="Overjet Right">Overjet Right</option>
<option value="Overjet Left">Overjet Left</option>
<option value="Right Occlusion">Right Occlusion</option>
<option value="Left Occlusion">Left Occlusion</option>
<option value="Upper Occlusal">Upper Occlusal</option>
<option value="Lower Occlusal">Lower Occlusal</option>
<optgroup label="External oral">
<option value="Frontal">Frontal</option>
<option value="Lateral Right">Lateral Right</option>
<option value="Lateral Left">Lateral Left</option>
<option value="Oblique smile Right">Oblique smile Right</option>
<option value="Oblique smile Left">Oblique smile Left</option>
<option value="Frontal smile">Frontal smile</option>
<option value="Oblique Right">Oblique Right</option>
<option value="Oblique Left">Oblique Left</option>
<optgroup label="Model">
<option value="Model Upper Occlusal">Model Upper Occlusal</option>
<option value="Model Lower Occlusal">Model Lower Occlusal</option>
<option value="Model Right Buccal">Model Right Buccal</option>
<option value="Model Left Buccal">Model Left Buccal</option>
<option value="Model Anterior Dental">Model Anterior Dental</option>
</select>
</div>
</div>
<div class="form-wrapper">
<div class="form-group">
<label for="id_form-2-image">Image</label>
<input id="id_form-2-image" name="form-2-image" type="file">
</div>
<div class="form-group">
<label for="id_form-2-type">Type</label>
<select class="form-control input-sm" id="id_form-2-type" name="form=2-type">
<option value="" selected="selected">---------</option>
<option value="xray">X-ray Image</option>\
<option value="internal">Intraoral Image</option>
<option value="external">Extra-oral Image</option>
<option value="model">Model</option>
</select>
</div>
<div class="form-group">
<label for="id_form-2-desc">Desc</label>
<select class="form-control input-sm" id="id_form-2-desc" name="form-2-desc">
<option value="" selected="selected">---------</option>
<optgroup label="Xray">
<option value="PA Ceph">PA Ceph</option>
<option value="Lateral Ceph">Lateral Ceph</option>
<option value="Panoramic">Panoramic</option>
<optgroup label="Interior oral">
<option value="Anterior Occlution">Anterior Occlution</option>
<option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option>
<option value="Overjet Right">Overjet Right</option>
<option value="Overjet Left">Overjet Left</option>
<option value="Right Occlusion">Right Occlusion</option>
<option value="Left Occlusion">Left Occlusion</option>
<option value="Upper Occlusal">Upper Occlusal</option>
<option value="Lower Occlusal">Lower Occlusal</option>
<optgroup label="External oral">
<option value="Frontal">Frontal</option>
<option value="Lateral Right">Lateral Right</option>
<option value="Lateral Left">Lateral Left</option>
<option value="Oblique smile Right">Oblique smile Right</option>
<option value="Oblique smile Left">Oblique smile Left</option>
<option value="Frontal smile">Frontal smile</option>
<option value="Oblique Right">Oblique Right</option>
<option value="Oblique Left">Oblique Left</option>
<optgroup label="Model">
<option value="Model Upper Occlusal">Model Upper Occlusal</option>
<option value="Model Lower Occlusal">Model Lower Occlusal</option>
<option value="Model Right Buccal">Model Right Buccal</option>
<option value="Model Left Buccal">Model Left Buccal</option>
<option value="Model Anterior Dental">Model Anterior Dental</option>
</select>
</div>
<button class="btn btn-danger btn-sm pull-right" id="2">-</button>
</div>
</form>
<div class="row">
<button class="btn btn-success btn-sm pull-right">+</button>
</div>
The + button adds another one of div.form-wrapper elements with the new form fields dynamically using javascript. It also generates the - button to remove the form dynamically. The problem is that - and + because they both are pulled right they appear on the same row. Which I don't want that. doesn't row class in bootstrap clear both? Here is a bootply example of the above
you could add another row element to the - button
<div class="row">
<button class="btn btn-danger btn-sm pull-right" id="2">-</button>
</div>
You can use
<div class="clearfix" /> after your pull-right elements. That should do it.
In following bootstrap syntax : You need to have a col in a row.
It's not your case for the + button :
Add a col-xs-12 div :
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success btn-sm pull-right">+</button>
</div>
</div>
Bootply : http://www.bootply.com/116837
Related
I have 3 drop-downs: Product, Batch and Storage
HTML:
<div class="row div-1">
<div class="form-group">
<select class="form-control product-id">
<option value="" disabled selected>Select Product</option>
<option value="1">Product One</option>
<option value="2">Product Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-batch">
<option value="" disabled selected>Select Batch</option>
<option value="1">Batch One</option>
<option value="2">Batch Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-storage">
<option value="" disabled selected>Select Storage</option>
<option value="1">Storage One</option>
<option value="2">Storage Two</option>
</select>
</div>
</div>
<div class="row div-2">
<div class="form-group">
<select class="form-control product-id">
<option value="" disabled selected>Select Product</option>
<option value="1">Product One</option>
<option value="2">Product Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-batch">
<option value="" disabled selected>Select Batch</option>
<option value="1">Batch One</option>
<option value="2">Batch Two</option>
</select>
</div>
<div class="form-group">
<select class="form-control product-storage">
<option value="" disabled selected>Select Storage</option>
<option value="1">Storage One</option>
<option value="2">Storage Two</option>
</select>
</div>
</div>
How to check if options are already selected based on 3 select options?
What I mean is if "Product One", "Batch One" and "Storage One" from div-1 is already selected and if I try to select same drop-down options in div-2, it should not allow to select again already selected options.
But can allow if I select "Product One", "Batch Two" and "Storage Two".
In short same selected options cannot be repeated.
I got one more doubt I'm close to the answer but not getting it to worked. Actually I have the a default input text & default drop-down(drop-down which consist of west Bengal & others). Now if someone click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.
Below is the code what I have tried. Can any one please guideme I'm a bit new to jQuery.
$(document).ready(function() {
$("#state").on("select", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>
'select' is not the jQuery event you are expecting. It is related to text selectiongs in text inputs and text areas.
You should use 'change' instead for when the value of the select field changes.
$(document).ready(function() {
$("#state").on("change", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>
$(document).ready(function() {
$(document).on("change","#state", function() {
if ($(this).val() ===
"WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}else{
$(".westbengaldistrict").hide();
$(".otherdistricts").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group
otherdistricts">
<input class="form-
control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-
control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>
I am trying to add some improvements to a site that I haven't developed, and I currently have a navigation panel on the page. The HTML for this is below
<div id="calendar-nav-container">
<span class="calendar-nav" style="float: left"> <<< </span>
<span class="calendar-nav" style="float: left"> < </span>
<span class="calendar-nav" style="float: right"> >>> </span>
<span class="calendar-nav" style="float: right"> > </span>
<form action="/Calendar" id="calendarForm" method="get"> <label for="CalendarType">
<select name="calendarType">
<option value="Courses" selected="selected">By Course</option>
<option value="Venues">By Venue</option>
<option value="Trainers">By Trainer</option>
</select></label>
<label for="LocationId"><select id="locationId" name="locationId">
<option value="">All Locations</option>
<option value="1">Brighton</option>
<option value="2">London</option>
<option value="3">Leeds</option>
<option value="4">New York</option>
<option value="5">Frankfurt</option>
<option value="6">Hong Kong</option>
<option value="7">Toronto</option>
<option value="8">Dublin</option>
<option value="9">Cape Town</option>
<option value="10">Glasgow</option>
<option value="11">Newcastle</option>
<option value="16">Singapore</option>
<option value="17">Birmingham</option>
</select></label>
<label for="DaysToShow"><select id="daysToShow" name="daysToShow">
<option value="5">1 week</option>
<option value="19">3 weeks</option>
</select></label>
<label for="StartDate"><input id="startDate" name="startDate" type="text" value="06/07/2015" class="hasDatepicker"></label>
<label for="IncludePond" style="color: white"><input checked="checked" data-val="true" data-val-required="The Boolean field is required." id="includePond" name="includePond" type="checkbox" value="true"><input name="includePond" type="hidden" value="false">Include Pond Courses </label>
</form></div>
I want to maintain page scrolling when these options or links are clicked or chosen. I have limited HTML knowledge.
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>
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".