使用jquery表单在div中添加输入字段后输入
我对JavaScript比较陌生，但我有编程经验。我有这个代码，允许用户添加多个费用，如图所示。但是在输入div输入字段（Cost）后输入页面就会被提交。并且选择的css不起作用（类不起作用）。
请帮助我，我不明白为什么页面是在输入字段的输入键上提交的。
我的代码是： -
<%@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" />
1 个答案:
答案 0 :(得分：0)
根据html表单会在输入命中时触发提交，但如果你想用jquery阻止它，你可以通过以下代码来阻止它
$("#frmLogin").on("submit", function(){
return false;
})
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？