1
我对JavaScript比较陌生，但我有编程经验。我有这个代码，它允许用户添加多个费用，如图所示。但是在追加div输入字段（Cost）之后就进入了页面提交。并选择的CSS不工作（班级不工作）。添加输入字段在div中使用jquery表单提交后输入
请帮我，我不明白，为什么页面被提交输入字段中的输入键。
我的代码是： -
<%@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" />
请更新您的问题用一个** runnable ** [mcve]来演示问题，使用Stack Snippets（'[<>]'工具栏按钮）。 –
_“请帮助我如何避免提交附加div输入字段” - 请在此之前做一些适当的研究。 https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter – CBroe
可能重复的[jquery禁用表单提交输入]（https://stackoverflow.com/问题/ 11235622/jquery-disable-form-submit-on-enter） –