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/
Related
I am trying to get this button tag on the same line and connected to my input field. For the input field I am using a library called select2. It builds on top of the already used select tag. I have the button in a <span> tag however, it still doesn't go apply the button to the same line. Not sure where I went wrong, but I can't seem to figure out a solution.
HTML:
<div class="col-md-9 right-pane">
<form>
<div class="row">
<div class="col col-md-12 text-left">
<h4>General Information</h4>
</div>
<div class="col col-lg-9 search-bar">
<div class="form-group tt">
<label>Tier:</label>
<select class="js-example-basic-single" name="state" id="mySelect2">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<span><button class="btn btn-primary">Search</button></span>
</div>
</div>
<div class="col col-lg-9 search-bar">
<div class="form-group">
<label>Type:</label>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<span><button class="btn btn-primary">Search</button></span>
</div>
</div>
<div class="col col-lg-9 search-bar">
<div class="form-group">
<label>Selector Name:</label>
<input class="form-control form-control-sm" type="text">
</div>
</div>
<div class="col col-lg-9 search-bar">
<div class="form-group">
<label>Computer Path:</label>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<span><button class="btn btn-primary">Search</button></span>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-9">
<h6>Selection Rule Preview</h6>
<span class="label">Taddm Query</span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">Random Textarea</textarea>
<br>
</div>
</div>
</div>
</form>
It is happening because ".select2-container" generated by select2 plugin has css attribute display:inline-block.
Which left some space between two inline or inline-block element. If you want to remove you can use float or flex.
The sample provided below.
$(function(){
$('.js-example-basic-single').select2();
})
.groupleft > span{float:left}
.groupflex{display:flex}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<div class="col-md-9 right-pane">
<form>
<!--######## Use of Float CSS ###########-->
<div class="row">
<div class="col col-md-12 text-left">
<h4>General Information</h4>
</div>
<div class="col col-lg-9 search-bar">
<div class="form-group">
<div class="col-sm-3"><div class="row">Computer Path:</div></div>
<div class="col-sm-9 groupleft">
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<span><button class="btn btn-primary">Search</button></span>
</div>
</div>
</div>
</div>
<!--######## Use of Flex CSS ###########-->
<div class="row">
<div class="col col-md-12 text-left">
<h4>General Information</h4>
</div>
<div class="col col-lg-9 search-bar">
<div class="form-group">
<div class="col-sm-3"><div class="row">Computer Path:</div></div>
<div class="col-sm-9 groupflex">
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<span><button class="btn btn-primary">Search</button></span>
</div>
</div>
</div>
</div>
</form>
</div>
I think........
Just keep your button inside of div..
$('.select2').select2();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<div class="col-md-9 right-pane">
<form>
<div class="row">
<div class="col col-md-12 text-left">
<h4>General Information</h4>
</div>
<div class="col col-lg-9 search-bar">
<div class="form-group tt">
<div class="row col-lg-12">
<label>Tier:</label>
<select class="js-example-basic-single select2" name="state" id="mySelect2">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<span><button class="btn btn-primary">Search</button></span>
</div>
</div>
</div>
<div class="row">
<div class="col col-lg-9 search-bar">
<div class="form-group">
<div class="row col-lg-12">
<label>Type:</label>
<select class="js-example-basic-single select2" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<span><button class="btn btn-primary">Search</button></span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Fiddle
This is it:
<div class="container-fluid">
<div class="row" style="display: flex; flex-direction: row;">
<div class="col-xs-4 col-sm-2 col-md-4">
<h5> General<br> Information
</h5>
</div>
<div class="col-xs-4 col-sm-5 col-md-4" style="display: inline-block;">
<label>Tier:</label>
<select>
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<button class="btn btn-primary">Search</button>
</div>
<div class="col-xs-4 col-sm-5 col-md-4" style="display: inline-block;">
<label>Tier:</label>
<select>
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<button class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6" ;>
<div class=" form-group ">
<label>Selector Name:</label>
<input class="form-control form-control-sm " type="text ">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 " ;>
<div class="form-group">
<label>Computer Path:</label>
<label>Tier:</label>
<select>
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
</select>
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h6>Selection Rule Preview</h6>
<span class="label">Taddm Query</span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">Random Textarea</textarea>
<br>
</div>
</div>
</div>
check https://jsfiddle.net/sugandhnikhil/cq1mu06e/
thanks!!!!
I intend on using firebase firestore as a backend service to store data, authenticate users and hide content from users that aren't signed in.
From tutorials I was watching and using, I was able to connect my site to firebase, and after the codes I had written, the form on the page supposed to submit to firestore but then I get no response and no error message also, I don't know what to do.
I've checked for solutions to my particular issue but I haven't seen any so far.
This is the form
<form id="signup-form" class="form form-horizontal">
<!-- Investment Plan Info Modal -->
<div class="modal fade" id="planInfoModal_starter" tabindex="-1" role="dialog" aria-labelledby="planInfoModal_starterLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="planInfoModal_starterLabel">
<font color=""> STARTER ACCOUNT </font>
</h4>
</div>
<!-- modal body -->
<div class="modal-body" style="font-size:15px; line-height:20px;">
<div class="" style="margin-bottom:;">
<div class=" ">
<div class=" ">
<div style="min-height:;" class="">
<div class="plan_item">
<i class="fa fa-circle-o"></i>
Minimum Investment: $500 </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
Maximum Investment: $9999 </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
On Weekly ROI Model: 200% weekly </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
On Compounding ROI Model: 400% weekly </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
Referral Commission: 5% on referred users' first deposits and 1.5% on subsequents. </div>
</div>
<br>
</div>
</div>
</div>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div>
<!-- /. this modal ends-->
<div class="modal fade" id="planInfoModal_basic" tabindex="-1" role="dialog" aria-labelledby="planInfoModal_basicLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="planInfoModal_basicLabel">
<font color=""> BASIC ACCOUNT </font>
</h4>
</div>
<!-- modal body -->
<div class="modal-body" style="font-size:15px; line-height:20px;">
<div class="" style="margin-bottom:;">
<div class=" ">
<div class=" ">
<div style="min-height:;" class="">
<div class="plan_item">
<i class="fa fa-circle-o"></i>
Minimum Investment: $10,000 </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
Maximum Investment: $99,999 </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
On Weekly ROI Model: 300% weekly </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
On Compounding ROI Model: 500% weekly </div>
<div class="plan_item">
<i class="fa fa-circle-o"></i>
Referral Commission:5% on referred users' first deposits and 1.5% on subsequents</div>
</div>
<br>
</div>
</div>
</div>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div>
<!-- /. this modal ends-->
<input type="hidden" name="investment_plan" value="basic">
<input type="hidden" name="investment_planID" value="2">
<input type="hidden" name="min_capital" value="10000">
<input type="hidden" name="max_capital" value="72000">
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<h4>
Chosen Investment Plan:
<a href="javascript:void(0)" class="btn btn-warning" style="text-align: center; background:; color: #fff; padding: 10px; font-size:120%; margin-bottom:20px;" data-toggle="modal" data-target="#planInfoModal_basic">
BASIC ACCOUNT
</a>
Change Plan?
</h4>
</div>
</div>
<br>
<div class="form-group"><div class="col-sm-2"></div>
<div class="col-sm-6">
<div class="form-group">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="tel" class="form-control my_input" name="investment_capital" id="invest-capital" value="" placeholder="Investment Capital (min: $10,000 - max: $72,000.00)" >
</div>
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-12">
<h4>Choose ROI Model</h4>
<select id="ROI-modl" name="Choose_ROI_Model">
<option value="">-ROI Model-</option>
<option value="1">
Weekly Interest
</option>
<option value="2">
Compounding (Monthly) Interest
</option>
</select>
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-12">
<select id="depost-id" name="deposit_typeID" class="form-control my_input">
<option value="">-Investment Funding Medium- </option>
<option value="1">
BITCOIN (BTC)
</option>
<option value="2">
ETHERIUM (ETH)
</option>
</select>
<div class="alert-danger"></div>
</div>
</div>
</div>
<div class="col-sm-4 pull-right">
<div class="text-center"><b>Current Rates</b></div>
<!--Currency Converter widget by FreeCurrencyRates.com -->
<div id='gcw_mainFjLs3vMJc' class='gcw_mainFjLs3vMJc'></div>
<a id='gcw_siteFjLs3vMJc' href='https://freecurrencyrates.com/en/'><!-- FreeCurrencyRates.com --></a>
<script>function reloadFjLs3vMJc(){ var sc = document.getElementById('scFjLs3vMJc');if (sc) sc.parentNode.removeChild(sc);sc = document.createElement('script');sc.type = 'text/javascript';sc.charset = 'UTF-8';sc.async = true;sc.id='scFjLs3vMJc';sc.src = 'https://freecurrencyrates.com/en/widget-vertical-editable?iso=USDBTCETHLTCXRP&df=1&p=FjLs3vMJc&v=fits&source=fcr&width=270&width_title=0&firstrowvalue=1&thm=A6C9E2,FCFDFD,4297D7,5C9CCC,FFFFFF,C5DBEC,FCFDFD,2E6E9E,000000&title=Currency%20Converter&tzo=-60';var div = document.getElementById('gcw_mainFjLs3vMJc');div.parentNode.insertBefore(sc, div);} reloadFjLs3vMJc(); </script>
<!-- put custom styles here: .gcw_mainFjLs3vMJc{}, .gcw_headerFjLs3vMJc{}, .gcw_ratesFjLs3vMJc{}, .gcw_sourceFjLs3vMJc{} -->
<!--End of Currency Converter widget by FreeCurrencyRates.com --></div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="text" class="form-control my_input" id="first-name" name="firstname" value="" placeholder="First Name">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="text" class="form-control my_input" id="other-names" name="othernames" value="" placeholder="Other Names">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<select name="country" class='form-control my_input populate' id='country' style='min-height:35px; color:#000;' >
<option value="" selected="selected">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="BQ">British Antarctic Territory</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="VG">British Virgin Islands</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CT">Canton and Enderbury Islands</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos [Keeling] Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo - Brazzaville</option>
<option value="CD">Congo - Kinshasa</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="CI">Côte d’Ivoire</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="NQ">Dronning Maud Land</option>
<option value="DD">East Germany</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="FQ">French Southern and Antarctic Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong SAR China</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JT">Johnston Island</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau SAR China</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="FX">Metropolitan France</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MI">Midway Islands</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar [Burma]</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</option>
<option value="NT">Neutral Zone</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="KP">North Korea</option>
<option value="VD">North Vietnam</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PC">Pacific Islands Trust Territory</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territories</option>
<option value="PA">Panama</option>
<option value="PZ">Panama Canal Zone</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="YD">People's Democratic Republic of Yemen</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn Islands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="RE">Réunion</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="CS">Serbia and Montenegro</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="KR">South Korea</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="ST">São Tomé and Príncipe</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UM">U.S. Minor Outlying Islands</option>
<option value="PU">U.S. Miscellaneous Pacific Islands</option>
<option value="VI">U.S. Virgin Islands</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="SU">Union of Soviet Socialist Republics</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="ZZ">Unknown or Invalid Region</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="WK">Wake Island</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="text" class="form-control my_input" id="city" name="city" value="" placeholder="City">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="email" class="form-control my_input" id="email" name="email" value="" placeholder="Email">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="tel" maxlength="" class="form-control my_input" id="phone" name="phone" value="" placeholder="Phone">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="password" class="form-control my_input" id="password" name="password" value="" placeholder="New Password">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="password" class="form-control my_input" id="retypepassword" name="retype_password" value="" placeholder="Repeat Password">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type="text" class="form-control my_input" id="referreremail" name="referrer_email" value="" placeholder="Ref. (optional)">
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<input type='checkbox' name='terms' id="terms" value='accept'>
<label for="terms" style="font-weight:normal;">I agree with the </label> Terms of Service.
<div class="alert-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-xs-2"></div>
<div class="col-xs-8">
<button type="submit" name="regbtn" class="btn btn-warning btn-lg pull-right">proceed</button>
</div>
</div>
</form>
I then connected firebase to my web app using the firebase SDK and stored some consts also.
This is the Javascript part.
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "the-joint-ffb4a.firebaseapp.com",
databaseURL: "https://the-joint-ffb4a.firebaseio.com",
projectId: "the-joint-ffb4a",
storageBucket: "the-joint-ffb4a.appspot.com",
messagingSenderId: "360288748444",
appId: "APP_ID",
measurementId: "G-W8P4JVFG7X"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//make auth and firestore references
const auth = firebase.auth();
const db = firebase.firestore();
//Signup
const signupForm = document.querySelector("#signup-form");
signupForm.addEventListener("submit", e => {
e.preventDefault();
});
//Get Values
const investment_capital = signupForm["invest-capital"].value;
const ROI_Model = signupForm["ROI-modl"].value;
const Investment_Funding_Medium = signupForm["depost-id"].value;
const firstname = signupForm["first-name"].value;
const othernames = signupForm["other-names"].value;
const country = signupForm["country"].value;
const city = signupForm["city"].value;
const email = signupForm["email"].value;
const phone = signupForm["phone"].value;
const password = signupForm["password"].value;
const retypepassword = signupForm["retypepassword"].value;
const referreremail = signupForm["referreremail"].value;
console.log(
investment_capital,
ROI_Model,
Investment_Funding_Medium,
firstname,
othernames,
country,
city,
email,
phone,
password,
retypepassword,
referreremail
);
You're on the right path, you just need to call firestore's .add() method and pass an object representing your form data as a parameter
Update your event listener with the following:
//Signup
const signupForm = document.querySelector("#signup-form");
signupForm.addEventListener("submit", e => {
e.preventDefault();
// feel free to change the object keys to match your data model
db.add({
investment_capital: signupForm["invest-capital"].value,
roi_model: signupForm["ROI-modl"].value,
investment_funding_medium: signupForm["depost-id"].value,
firstname: signupForm["first-name"].value,
othernames: signupForm["other-names"].value,
country: signupForm["country"].value,
city: signupForm["city"].value,
email: signupForm["email"].value,
phone: signupForm["phone"].value,
password: signupForm["password"].value,
retypepassword: signupForm["retypepassword"].value,
referreremail: signupForm["referreremail"].value
})
.then(function(docRef) {
// data was added successfully
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
// an error occurred when adding the data
console.error("Error adding document: ", error);
});
});
See the docs for additional detail
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>
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".
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