添加輸入字段在div中使用jquery表單提交後輸入

我對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" />

來源

2017-08-14 Ravindra

請更新您的問題用一個** 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） –

按HTML表單將觸發提交進入的打擊，但如果你想阻止它使用jQuery就可以防止它通過以下代碼

$("#frmLogin").on("submit", function(){ 
     return false; 
})

來源

2017-08-14 14:36:53

我想知道爲什麼我的表單是在回車中提交的。而我在輸入密鑰上調用其他功能。 – Ravindra

，因爲如果您將任何輸入封裝在表單中，則enter是默認的瀏覽器行爲。 –

添加輸入字段在div中使用jquery表單提交後輸入

回答

相關問題