Set form post data to backbone model to call rest service - javascript

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

Related

how to display a specific content on selected option | jQuery

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

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

My form is not being submitted to firebase firestore

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

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/

jQuery getting data attribute and setting correct selected option

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>

bootstrap pull-right class and row class

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

Categories