为什么我在用 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

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

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

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

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

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()是否适用于所有，可能只适用于第一个）

Answer 2

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