在用JS编辑某些值后提交表单时，为什么会得到空值？

Question

我有一个表单，其中包含一些根据AJAX请求的结果填充的输入。 当我提交表单时，我在后端仅得到null 。 我试图提交值而不编辑它，并且可以正常工作

这是我的Java脚本代码

editPayment = function() {
  if ($('#entrytransId').val() != '') {
    if ($('#entryReceiptTypesselect').val() == "1") {
      $.ajax({
        type: "GET",
        url: "@Url.Action("GetInvoiceNumber", "Payment")",
        data: {transId: $('#entrytransId').val()},
        success: function(response) {
          if (response.invNo == 0) {
            window.location.reload();
          } else {
            $('#reciptNo').val(response.invNo);
            $('#enteryAmt').val(response.Amt);
            $('#entrytransId').attr("disabled", "true");
            $('#enteryhide').show(500);
          }
        },
        error: function(reponse) {
          window.location.reload();
        }
      });
    }
  }

这正是我的HTML表单，我尝试了很多次，但失败了，但是当我删除javascript函数并手动填充数据时，它的工作原理

<form action="/Payment/EditPayment" id="MF" method="post">                                    
<div class="row">
<div class="col-md-2">
   <label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect" 
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
    </div>
</div>
<div class="row">
    <div class="col-md-2">
        <label class="form-control">Trans Id</label>
    </div>
    <div class="col-md-3">
        <input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
    </div>
    <div class="col-md-2" hidden="" id="btnHidden">
        <button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
    </div>
</div>
<div class="row">
    <div class="row">
        <div class="col-md-2">
            <label class="form-control" id="lblinvoice">reciptNo</label>
        </div>
        <div class="col-md-4">
            <input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
        </div>
    </div>
    <div class="row" hidden="" id="enteryhide">
        <div class="col-md-2">
            <label class="form-control">enteryAmt</label>
        </div>
        <div class="col-md-4">
            <input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <label class="form-control">E15 userName</label>
        </div>
        <div class="col-md-8">
            <input required="" type="text" class="form-control" id="userName" name="userName">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <label class="form-control">password</label>
        </div>
        <div class="col-md-8">
            <input required="" type="password" class="form-control" id="password" name="password">
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
    </div>
</div>
</form>

Answer 1

问题在$('#entrytransId').attr("disabled", "true"); 我还有另一个功能onselectChange()被禁用所有输入，我尝试$('#entrytransId').attr("disabled", "true"); 而且效果很好

Answer 2

问题不在于通过javascript / jquery设置值，而在于将输入设置为disable 。

$('#entrytransId').attr("disabled", "true");

当输入设置为disabled ，不将其包括在表单的POST中（排除在外），因此在服务器端代码中将显示为null 。

您可以：-不将其设置为禁用（将影响您的用户体验）-在POST之前启用它们（icky）-使用隐藏字段

MVC为复选框执行此操作，因此您可以在此处复制该想法：

<input type='text' name='entryid' />
<input type='hidden' name='entryid' />

POST使用输入的name字段，而不是其id ，因此可以将多个输入使用相同的名称。

POST随后将使用未禁用的第一个输入 （因此，请不要将隐藏的输入放在第一位...）

然后只需更新jquery即可将值应用于两个输入（如果您还希望将其显示在UI中），而不是按id进行，例如：

$("name[entryid]").each(function() { $(this).val(newvalue); });

（设置它的其他方法可能更好，不检查.val()是否适用于所有方法，可能仅适用于第一个方法）