Decimal Separator within input field - javascript

I have added a thousand separator by Javascript keyup to an input field within a standard form. Now my form cannot submit because of the comma "," in the value.
How can I edit my current code or add a new function to remove the comma when submitting the form.
Javascript Event Keyup
<script>
var cal2_txtLoan = document.getElementById('cal2_txtLoan');
cal2_txtLoan.addEventListener('keyup', function() {
var val = this.value;
val = val.replace(/[^0-9\.]/g,'');
if(val != "") {
valArr = val.split('.');
valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
val = valArr.join('.');
}
this.value = val;
});
</script>
Form
<form>
<div class="row mt20">
<div class="col-md-3 col-sm-12 col-xs-12">
</div>
<div>
<input id="cal2_txtLoan" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="text" placeholder="วงเงินกู้(บาท)">
</div>
</div>
<div class="row mt20">
<div class="col-md-6 col-sm-9 col-xs-9">
<input id="cal2_txtTenor" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ระยะเวลากู้ 1-30 ปี">
</div>
</div>
<div class="row mt20">
<div class="col-md-6 col-sm-9 col-xs-9">
<input id="cal2_txtInterestRate" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ดอกเบี้ย(%)">
</div>
</div>
<div class="row mt20">
<div class="col-md-offset-3 col-md-6 col-sm-offset-0 col-sm-9 col-xs-offset-0 col-xs-9">
<div class="row">
<div class="col-xs-6">
<button type="button" id="cal2_btnCalculate" class="button investment-button">คำนวณ</button>
</div>
</div>
</div>
</div>
<div class="row mt20">
<div class="col-md-3 col-sm-12 col-xs-12">
<label class="investment-list">สรุปยอดผ่อนต่อเดือน (บาท)</label> <input id="cal2_txtInstallment" class="wpcf7-form-control wpcf7-text form-control investment-class-form" disabled="disabled" type="text"> <span class="investment-list" style="color:red;">* ผลลัพธ์จากการคำนวณ เป็นเพียงผลการคำนวณเบื้องต้นเท่านั้น โปรดติดต่อธนาคารเพื่อคำนวณยอดที่ถูกต้องอีกครั้งหนึ่ง</span>
</div>
</div>
</form>


Check out: How to convert a locale string (currency) back into a number?
let num = parseFloat(yourString.replace(/[^0-9\.]/g,''));
(You actually have the answer in your own code 😉)
Update: Here's an example.
let myString = "1,250,856.5867";
function convertToFloat(string) {
let num = parseFloat(string.replace(/[^0-9\.]/g,''));
return num;
}
/* Test the function in console */
console.log(convertToFloat(myString));
Output will be: 1250856.5867

Related

Show Thousands Separator within input field only

I have added a thousand separator by Javascript keyup to an input field within a standard form:
Form
<form>
<div class="row mt20">
<div class="col-md-3 col-sm-12 col-xs-12">
</div>
<div>
<input id="cal2_txtLoan" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="text" placeholder="วงเงินกู้(บาท)">
</div>
</div>
<div class="row mt20">
<div class="col-md-6 col-sm-9 col-xs-9">
<input id="cal2_txtTenor" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ระยะเวลากู้ 1-30 ปี">
</div>
</div>
<div class="row mt20">
<div class="col-md-6 col-sm-9 col-xs-9">
<input id="cal2_txtInterestRate" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="ดอกเบี้ย(%)">
</div>
</div>
<div class="row mt20">
<div class="col-md-offset-3 col-md-6 col-sm-offset-0 col-sm-9 col-xs-offset-0 col-xs-9">
<div class="row">
<div class="col-xs-6">
<button type="button" id="cal2_btnCalculate" class="button investment-button">คำนวณ</button>
</div>
</div>
</div>
</div>
<div class="row mt20">
<div class="col-md-3 col-sm-12 col-xs-12">
<label class="investment-list">สรุปยอดผ่อนต่อเดือน (บาท)</label> <input id="cal2_txtInstallment" class="wpcf7-form-control wpcf7-text form-control investment-class-form" disabled="disabled" type="text"> <span class="investment-list" style="color:red;">* ผลลัพธ์จากการคำนวณ เป็นเพียงผลการคำนวณเบื้องต้นเท่านั้น โปรดติดต่อธนาคารเพื่อคำนวณยอดที่ถูกต้องอีกครั้งหนึ่ง</span>
</div>
</div>
</form>
Javascript Event Keyup
<script>
var cal2_txtLoan = document.getElementById('cal2_txtLoan');
cal2_txtLoan.addEventListener('keyup', function() {
var val = this.value;
val = val.replace(/[^0-9\.]/g,'');
if(val != "") {
valArr = val.split('.');
valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
val = valArr.join('.');
}
this.value = val;
});
</script>
It works correctly, but now my form cannot submit because of the comma "," in the value
How can I display my decimal separator in the input field, but only submit the value.
Rest of my calculation for reference:
<script>
function CalculatePMT(pv, rate, years) {
return Math.round(pv * (rate / 100 / 12) / (1 - 1 / Math.pow ((1 + rate / 100 / 12) , ( years * 12))));
}
/************** CALCULATE LOAN *************/
$("#cal2_btnCalculate").click(Calculate2);
function Calculate2(event) {
var years = $("#cal2_txtTenor").val();
var rate = $("#cal2_txtInterestRate").val();
var pv = $("#cal2_txtLoan").val();
if (CheckForDigit(years) && CheckForDigit(rate) && CheckForDigit(pv)) {
var ir = (rate / 100) * 100; // For LH, add 1 more
var installment = CalculatePMT(pv, ir, years);
$("#cal2_txtInstallment").val(FormatNumberToString(installment));
$("#cal2_txtMinimumIncome").val(FormatNumberToString(installment ));
} else
alert("ไม่สามารถคำนวนวงเงินสินเชื่อเพื่อการซื้อบ้านได้");
}
/*****************************************/
});
</script

<form onsubmit="return deleteThousandSeparator(event)">
...
</form>
function deleteThousandSeparator(){
const cal2_txtLoan = document.getElementById('cal2_txtLoan');
cal2_txtLoan.value = cal2_txtLoan.value.replace('.','')
}

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 add div container to array js

There is a form consisting of two parts. The first part is basic information on the order. The second part of the form consists of the added div of the container. The user can add the second part of the container by clicking on the button. I can not understand how to add the second part of the form to the array in separate positions.
When you click the submit button, must create to array:
{'user': xxx, 'Phone ': xxx,' voucher': xxx, etc...}
{'user': xxx, 'Phone ': xxx,' voucher': xxx, etc...}
{'user': xxx, 'Phone ': xxx,' voucher': xxx, etc...}
This is form two parts.
User can add another div container
<div data-container="set">
<div data-item="set">
<h3>Участник</h3>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group">
<label>ФИО участника</label>
<input type="text" class="form-control " name="fio" id="fio" value=""> </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group"> <label>Телефон участника</label> <input type="text" class="form-control " name="phone[]" id="phone"> </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group"> <label>E-mail участника</label> <input type="email" class="form-control " name="email[]" id="email"> </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="form-group"> <label>Номер купона</label> <input type="text" class="form-control " name="voucher[]" id="voucher" > </div>
</div>
</div>
<div id="form-messages"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-9"><button type="button" data-action="remove" class="btn btn-danger">× Удалить участника</button></div>
<div class="col-sm-12 col-md-12 col-lg-3"><p name="sum[]"></p></div>
</div>
<input type="text" name="amount[]" value="1">
<input type="text" name="sum[]" readonly>
<input type="text" name="osnovanie[]" id="osnovanie">
<input type="text" name="prinadl[]" id="prinadl"><br>
<hr>
</div>
</div>

Solution which helped me with the problem
.on('click', '#payment', function(event) {
var d = document,
user_fio = d.getElementsByName('fio[]'),
user_phone = d.getElementsByName('phone[]'),
//etc
mas = [];
for(var i = 0; i< user_fio.length; i++){
mas[i] = {
'fio': user_fio[i].value,
'phone': user_phone[i].value,
//etc
}
}
})

Unable to dynamically add name attribute to form element

I wish to dynamically add the name attribute as 'pickup_city2' and 'pickup_address2' to select elements with ids, pickup_cityExtend and pickup_addressExtend.
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityPickExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick);
var city = document.getElementById('pickup_cityExtend');
city.setAttribute('name', 'pickup_city2');
var address = document.getElementById('pickup_addressExtend');
address.setAttribute('name', 'pickup_address2');
}
if (!this.checked) {
$clone.remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cityPick form-horizontal form-label-right" action="" method="POST" novalidate>{% csrf_token %}
<div class="form-group">
<div class="city col-md-4 col-sm-4 col-xs-10">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span>
</label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-7 col-sm-7 col-xs-10">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span>
</label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address">
</div>
</div>
</div>
<div class="multiCheck col-md-4 col-sm-4 col-xs-12">
<input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point?
<br>
</div>
</div>
<div class="form-group hide" id="cityPickExtend">
<div class="city col-md-4 col-sm-4 col-xs-10">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span>
</label>
<div class="">
<select class="form-control" id="pickup_cityExtend" name="">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-7 col-sm-7 col-xs-10">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span>
</label>
<div class="">
<input type="text" class="form-control" id="pickup_addressExtend" name="">
</div>
</div>
</div>
<div class="removeBtn col-md-1 col-sm-1 col-xs-2">
<button type="button" id="removeBtn">Remove</button>
</div>
<div class="addBtn">
<button type="button" id="addBtn">Add another pickup location</button>
</div>
</div>
<div class="item form-group">
<label for="shipment_datetime" class="control-label dateTime">Pickup Date & time
<span class="required">*</span>
</label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" name="shipment_datetime" type="text" value="" readonly style="background-color: #fff;">
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
</div>
</div>
</form>
Below is my jquery code.
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityPickExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick);
var city = document.getElementById('pickup_cityExtend');
city.setAttribute('name', 'pickup_city2');
var address = document.getElementById('pickup_addressExtend');
address.setAttribute('name', 'pickup_address2');
}
if (!this.checked) {
$clone.remove();
}
})

Within the part that you clone, there are four elements that have an id attribute. As id values must be unique, the DOM API will always return the first match when you query for a certain id, such as in these lines:
var city = document.getElementById('pickup_cityExtend');
var address = document.getElementById('pickup_addressExtend');
The results do not match the elements in the part you added to the document.
In order to make it work, you need to replace the id values with something that is unique (by adding a 2 for instance).
As a side note: you are mixing jQuery syntax with native DOM methods to retrieve elements. It would be more consistent if you would not use document.getElementById, but the jQuery $('#...') equivalent.
Here is some adjusted code:
var $clone;
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityPickExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id');
// Add '2' to all ID values, and set name value to the same.
$clone.find('[id]').each(function () {
var id = $(this).attr('id') + '2';
$(this).attr('id', id).attr('name', id);
});
// Now that the id value are unique, it is OK to add the clone:
$clone.insertAfter($pick);
} else if ($clone) { // Check whether we actually have a clone
$clone.remove();
}
});

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

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
}
}
}

Categories

Resources