I am relatively new to JavaScript but I have experience with programming. I have this code which allows the user to add multiple expenses as shown in picture. But after appending the div input field (Cost) on enter the page is submitted. and the chosen css is not working (class is not working).
Please help me i dont understand that why the page is submitted on enter key in input field.
my code is:-
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="../template.document.head.jsp" />
<script>
$(function() {
$("#expenses").addClass('menu_item_active');
var groupId = $("#id").val();
if (groupId != '') {
$("#heading").text("Edit Expense Details");
} else {
$("#heading").text("Add New Expense");
}
});
$(document).ready(function() {
$("#expense_id").change(function() {
var expense_id = $("#expense_id").val();
populateSubExpenses(expense_id);
});
});
var subgroups;
function populateSubExpenses(expense_id){
var url = "http://" + window.location.host + "/transport/getexpensesbygroup?exp_grp_id="+expense_id;
$.get(url, function(data) {
subgroups = data;
populateSubExp(data, 0);
}, "json");
}
function populateSubExp(data, id){
var selectedDeviceModel = $('#name');
if(id != 0)
selectedDeviceModel = $('#name_' + id);
selectedDeviceModel.empty();
selectedDeviceModel.append(' <option value=""> Select Expense Name</option>');
$.each(data, function(key, value) {
selectedDeviceModel.append('<option value="'+key+'">'+value+'</option>');
selectedDeviceModel.trigger("chosen:updated");
});
}
var row = 1;
function removeStops(row) {
calTotalCost(row);
$("#row"+row).remove();
}
function addExpense(){
var htm = "<div class='row' id='row"+row+"'>"
+ "<div style='width:215px; height: 24px;float:left;padding-right:10px;margin-top: 0px;'>"
+ "<select name='name' id='name_" + row + "' style='height: 24px; margin-top: 10px;width:150px !important' class='chosen-select-width' tabindex='1'>"
+ "<option value='' label='Select Expense Name' />"
+ "</select>"
+ "</div>"
+ "<div style='width:55px; height: 24px;float:left;padding-right:10px;margin-top: 10px;'>"
+ "<input type='text' name='payment' id='payment_" + row + "' class='txt-field number-field' maxlength='6' style='width:50px;' onfocusout='calTotalCost(" + row + ")' onKeyDown='if(event.keyCode==13) calTotalCost(" + row + ")'/>"
+ "</div>"
+ "<div style='width:305px; height: 24px;float:left;margin-top: 10px;'>"
+ "<textarea name='remark' id='remark_" + row + "' class='txt-field' style='width:300px;'></textarea>"
+ "</div>"
+ "<div style='width:50px; height: 24px;float:left;margin-top: 10px;'>"
+ "<input type='button' value='Remove' class='btn-login' style='font-size: 10px; margin-top: 1px; margin-left: 20px;' onclick='removeStops(" + row + ");'/>"
+ "</div>"
+ "</div>";
$("#expenseDiv").append(htm);
populateSubExp(subgroups, row);
row++;
}
function calTotalCost(row) {
var i = 0;
var final_payment = 0;
for(i; i <= row ; i++){
if(i == 0)
payment = $('#payment').val();
else
payment = $('#payment' + '_' + i).val();
if (payment != undefined)
final_payment = parseFloat(final_payment) + parseFloat(payment);
}
$('#final_payment').val(final_payment);
}
</script>
<div class="frm-block-outer" style="width:70%;">
<div class="headinginner">
<h3 id="heading" style="margin: 0px;"></h3>
</div>
<div class="frm-wrapper" style="width: 980px;">
<form:form action="${pageContext.request.contextPath}/transport/addexpense" modelAttribute="expenseSubGroup" id="frmLogin" method="post" commandName="expenseSubGroup">
<div style="float: left;">
<fieldset class="mem-field-set">
<legend>Account Group Details</legend>
<form:input path="id" id="id" type="hidden" class="txt-field" />
<div class="nmem-input-pair mandatory">
<label>Date: <span class="req_field">*</span></label>
<div class="row-field">
<form:input path="expense.expense_date" id="expense_date" class="txt-field date-field-fy"/>
<form:errors path="expense.expense_date" class="field-error"></form:errors>
</div>
</div>
<div class="nmem-input-pair mandatory">
<label>Expense Group:<span class="req_field">*</span></label>
<div class="row-field">
<form:select path="expense.id" id="expense_id" style="height: 24px;width:150px !important" class="chosen-select-width" tabindex="1">
<form:option value="" label="Select Account Name" />
<form:options items="${groupName}"/>
</form:select>
<form:errors path="expense.name" class="field-error"></form:errors>
</div>
</div>
<div class="nmem-input-pair mandatory">
<label>Through:<span class="req_field">*</span></label>
<div class="row-field">
<form:select path="expense.partner_id" style="height: 24px;width:150px !important" id="partner_id" class="chosen-select-width" tabindex="1">
<form:option value="" label="Select" />
<form:options items="${partners}"/>
</form:select>
<form:errors path="expense.partner_id" class="field-error"></form:errors>
</div>
</div>
<fieldset>
<hr>
<div style="margin-left: 100px;" id="expenseDiv">
<div style="float: left;width: 685px;margin-top: 10px;margin-bottom: 10px;">
<div style="float: left; width: 200px; text-align: center;">
<label>Expense</label>
</div>
<div style="float: left; width: 100px; text-align: center;">
<label>Cost</label>
</div>
<div style="float: left; width: 300px; text-align: center;">
<label>Description</label>
</div>
</div>
<div style="width:215px; height: 24px;float:left;padding-right:10px;">
<form:select path="name" style="height: 24px;width:150px !important" class="chosen-select-width" tabindex="1">
<form:option value="" label="Select Expense Name" />
</form:select>
</div>
<div style="width:55px; height: 24px;float:left;padding-right:10px;">
<form:input path="payment" id="payment" class="txt-field number-field" maxlength="6" style="width:50px;" onfocusout="calTotalCost(0)" onKeyDown="if(event.keyCode==13) calTotalCost(0)"/>
</div>
<div style="width:305px; height: 24px;float:left;">
<form:textarea path="remark" class="txt-field" style="width:300px;"></form:textarea>
</div>
<div style="width:50px; height: 24px;float:left;">
<a onclick="addExpense();"><input title="Add" class="jqueryaddrow" type="button" style="font-size: 10px; margin-top: -1px; margin-left: 20px;"></a>
</div>
</div>
</fieldset>
<fieldset>
<hr>
<div class="nmem-input-pair mandatory">
<label>Total Payment:<span class="req_field">*</span></label>
<div class="row-field">
<form:input path="expense.final_payment" id="final_payment" class="txt-field number-field" maxlength="6" style="width:50px;"/>
<form:errors path="expense.final_payment" class="field-error"></form:errors>
</div>
</div>
<div class="nmem-input-pair">
<label>Remark:<span class="req_field"></span></label>
<div class="row-field">
<form:textarea path="expense.remark" class="txt-field"></form:textarea>
</div>
</div>
</fieldset>
</fieldset>
</div>
<div class="mem-input-pair" style="margin-left: 184px;">
<div class="login-btn gapl-110">
<a href="${pageContext.request.contextPath}/transport/expense">
<input type="button" value="Cancel" class="btn-grey" style="width:105px;" />
</a>
</div>
<div class="login-btn">
<input name="updatebtn" id="updatebtn" type="submit" value="Save" class="btn-login" style="width:105px;" />
</div>
</div>
</form:form>
</div>
</div>
<jsp:include page="../template.document.tail.jsp" />
