Jquery\JS - Having troubles creating an array of objects from input fields - javascript

I have two rows, where each row consists of 3 input fields. I'm trying to create an array of objects, where each object has 3 properties (each input field data is saved in the corresponding property. I cant figure out how to create these objects. Right now the output is 6 objects with 1 property, instead of 2 objects with 3 properties each. Please advise.
JSfiddle example is here.
HTML:
<div id="reward-container"><!--rewards container -->
<div id="div1" class="">
<p class="s7-gift-title"><span class="reward-num"></span>first row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div id="div2" class="">
<p class="s7-gift-title"><span class="reward-num"> </span>second row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div><!--end rewards container -->
<button class="btn btn-lg btn-success" id="save">save</button>
JS:
$("#save").click(function(){
var giftsObjs=[];
var rewardContainer = $("#reward-container").children();
var inputPerRow;
for(var i=0;i<rewardContainer.length;i++){
inputPerRow=$(rewardContainer[i]).find("input");
for(var k=0;k<inputPerRow.length;k++){
if($(inputPerRow[k]).val()==""){
alert("Please fill all fields before you proceed.");
return;
}else{
switch (k){
case 0:
giftsObjs.push({
description: $(inputPerRow[k]).val()
});
break;
case 1:
giftsObjs.push({
value: $(inputPerRow[k]).val()
});
break;
case 2:
giftsObjs.push({
quantity: $(inputPerRow[k]).val()
});
break;
}//end of switch
}
}
}
console.log("array of gifts object: "+giftsObjs);
});


You can make use of .map().get() something like this:
$(function() {
$('#save').click(function(e) {
var arr = $('#reward-container > div').map(function(i, v) {
return {
description: $('input', this).eq(0).val(),
value: $('input', this).eq(1).val(),
quantity: $('input', this).eq(2).val()
};
}).get();
$('#logger').html('<pre>' + JSON.stringify(arr) + '</pre>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reward-container">
<!--rewards container -->
<div id="div1" class="">
<p class="s7-gift-title"><span class="reward-num"></span>first row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div id="div2" class="">
<p class="s7-gift-title"><span class="reward-num"> </span>second row</p>
<div class="text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label class="to-uppercase">label1</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4">
<div class="form-group form-group-default">
<label class="to-uppercase">label2</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg- col-md-3 col-sm-3">
<div class="form-group form-group-default">
<label class="to-uppercase">label3</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<!--end rewards container -->
<button class="btn btn-lg btn-success" id="save">save</button>
<div id='logger'></div>


You were almost there but for some changes in the logic:
Updated the JavaScript:
$("#save").click(function(){
var giftsObjs=[];
var rewardContainer = $("#reward-container").children();
var inputPerRow;
for(var i=0;i<rewardContainer.length;i++){
var obj = {};
inputPerRow=$(rewardContainer[i]).find("input");
for(var k=0;k<inputPerRow.length;k++){
if($(inputPerRow[k]).val()==""){
alert("Please fill all fields before you proceed.");
return;
}else{
// Do not push the property to the array directly here. Instead add the property to an object.
switch (k){
case 0:
obj.description= $(inputPerRow[k]).val()
break;
case 1:
obj.value= $(inputPerRow[k]).val()
break;
case 2:
obj.quantity= $(inputPerRow[k]).val()
break;
}//end of switch
}
}
giftsObjs.push(obj);
}
console.log("array of gifts object: "+giftsObjs);
console.log(giftsObjs);
});
Working fiddle: http://jsfiddle.net/sandenay/cu6nebx2/3/


Updated your fiddle, checkout.
Istead of adding an item on each loop, I changed giftsObjs.push({...}) to
giftsObjs[i].property=value where giftsObjs[i] is an object in one line.
for(var i=0;i<rewardContainer.length;i++){
inputPerRow=$(rewardContainer[i]).find("input");
giftsObjs[i] = {};
for(var k=0;k<inputPerRow.length;k++){
if($(inputPerRow[k]).val()==""){
alert("Please fill all fields before you proceed.");
return;
}else{
switch (k){
case 0:
giftsObjs[i].description = $(inputPerRow[k]).val()
break;
case 1:
giftsObjs[i].value = $(inputPerRow[k]).val()
break;
case 2:
giftsObjs[i].quantity = $(inputPerRow[k]).val()
break;
}//end of switch
}
}
}

Related

How to implement radio button check in JSP JavaScript?

I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>

How to get Underscore in textbox content in MVC in Print preview mode

I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification

How do I clear or reset data in a form in angularjs?

Been finding how to clear form data with the use of angular and $setPristine Function but still no results always gives me an error saying $setPristine is not a function. Can anyone kindly help me for a solution?
here's my angular.controller
$scope.AddCustomer = function () {
var CustDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
CustService.Customer(CustDetails, function (res) {
console.log(res);
$.extend($.gritter.options, {
position: 'bottom-right',
});
if (res.data == 'success') {
$.gritter.add({
title: 'Success!',
text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustDetails.cname + '</span></h4>',
time: '5000',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-ok-circle',
class_name: 'success-notice'
});
//CustDetails = {};
customerForm.$setPristine(true);
}
else {
$.gritter.add({
title: 'Failed!',
text: 'Failed to add a new customer',
time: '5000',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-remove-circle',
class_name: 'error-notice'
});
}
});
}
Here's the Html code
<div ng-controller="AddCustomerController">
<div class="page-content-wrapper">
<div class="page-content-inner">
<div id="page-header" class="clearfix">
<div class="page-header">
<h2>Add Customer</h2>
<span class="txt">Create and add new customer.</span>
</div>
</div>
<!--Start .row-->
<div class="row">
<div class="col-md-1">
</div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<!--col-lg-9 starts here-->
<div class="panel panel-default toggle panelMove panelClose panelRefresh">
<div class="panel-heading">
<h4 class="panel-title">Customer Details</h4>
</div>
<div class="panel-body pt0 pb0">
<form class="form-horizontal group-border stripped" id="customerForm">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Customer Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" required id="cname" ng-model="CusDetails.cname" class="form-control" name="cname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Company Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" required id="comname" ng-model="CusDetails.comname" class="form-control" name="comname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
<div class="col-lg-10 col-md-9">
<div class="input-group input-icon">
<span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
<input ng-model="CusDetails.tel" class="form-control" id="ctel" type="text" placeholder="(999) 999-9999">
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
<div class="col-lg-10 col-md-9">
<input id="email" ng-model="CusDetails.email" type="text" class="form-control" name="placeholder" placeholder="someone#example.com">
</div>
</div>
<!-- End .form-group -->
</form>
</div>
</div>
<!--End .panel-->
</div>
<!--.col-9 ends here-->
</div>
<!--End .row-->
<!--Start .row-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<button id="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
<button type="submit" class="btn btn-default pad">Cancel</button>
</div>
</div>
</diV>
</div>
</div>

You can remove form field value by removing value of ng-model like
Your code
var CustDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
Replace with this
$scope.CustDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
Your code
customerForm.$setPristine(true);
Replace with this
$scope.CustDetails={};

use:
$scope.$destroy
as it removes all the children associated to the parent scope and will clear all the data associated with it.

Use
$scope.customerForm.$setPristine(true);
Give the form a name like
name= "CusDetails"
Then It will solve the problem.

Use name attr instead of id. name="forName"
The form reference inside Controller will be $scope.formName

You can set the form with the code below:
$scope.customerForm.$setPristine();
$scope.customerForm.$setUntouched();
$scope.CustDetails={};

Javascript onClick() doesn't work for my button to calculate form inputs?

I want to take input values from HTML input and then I want to show the value by clicking result button.
Here is my code:
HTML:
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<button class="mortgage-button" id="mortgage-calculate" onClick="result()">CALCULATE</button>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript:
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("#purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
Actually what I want:
I want to take inputs from HTML input, then I want to calculate those results and finally clicking the result/calculate button I want to reveal the calculation.
Here is the jsfiddle

Corrected your code
HTML
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">Down Payment</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="down-payment">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="moartgage-term">Mortgage Term</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="mortgage-term">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="interest-rate">Interest Rate</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="interest-rate">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Property Tax</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="property-tax">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">P.Insurance</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="p-insurance">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<input class="mortgage-button" type="button" value="CALCULATE" id="mortgage-calculate" onClick="result()"/>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
JSFIDDLE Here
Changes : 1] Removed # from getElementById function. 2] Changed
button element to input tag with type button. This prevents form
submission when clicked on it.

Bootstrap Grid Form

I'm trying to modify a Form which has field and value into another with two columns, something like this.
Now I have:
HEADER 1
FIELD 1: VALUE
FIELD 2: VALUE
FIELD 3: VALUE
HEADER 2
FIELD 4: VALUE
FIELD 5: VALUE
FIELD 6: VALUE
And I tried to do this:
HEADER 1 HEADER 2
FIELD 1: VALUE FIELD 4: VALUE
FIELD 2: VALUE FIELD 5: VALUE
FIELD 3: VALUE FIELD 6: VALUE
Here is my code:
<div class="row">
<div class="col-lg-6 col-md-6">
<div> <h3> Datos Personales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">DNI</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->usi_dni?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Apellido y Nombre</label>
<div class="col-md-8"><input class="form-control input-sm" name="apynom" value='<?=$beca->usi_nombre?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Legajo</label>
<div class="col-md-8"><input class="form-control input-sm" name="legajo" value='<?=$beca->usi_legajo?>'></div>
</div>
<div> <h3> Datos Laborales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">Fecha Ingreso PJCABA</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->f_ingreso_caba?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Fuero</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['fuero'] as $key=>$fuero)
<?php if( $fuero->fuero_id == $beca->fuero_id ){?>
<option value="{{$fuero->fuero_id}}" selected>{{$fuero->fuero_nombre}}</option>
<?php }else{?>
<option value="{{$fuero->fuero_id}}">{{$fuero->fuero_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Dependencia</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['cargos'] as $key=>$cargo)
<?php if( $cargo->car_id == $beca->cargo_id ){?>
<option value="{{$cargo->car_id}}" selected>{{$cargo->car_nombre}}</option>
<?php }else{?>
<option value="{{$cargo->car_id}}">{{$cargo->car_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Aceptar</button>
Cancel
</div>
</div>
</form>
</div>
Hope someone can help me.
Thanks!

If you're trying to set your form to have two sides you can nest your columns/rows to split it into parts. Docs
See working example (full page).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form id="theForm">
<div class="container">
<div class="row">
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Personales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">DNI</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Apellido y Nombre</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="apynom">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Legajo</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="legajo">
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Laborales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fecha Ingreso PJCABA</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fuero</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Dependencia</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-default">Aceptar</button> Cancel
</div>
</div>
</div>
</div>
</form>
<hr>

Categories

Resources