单击按钮时输入框值消失

Question

我刚开始使用JQuery for asp.net core mvc。

我有一个页面的一部分，其中包含链接到主要主题的项目列表。 当在列表项之一上单击“编辑”按钮时，将显示一个隐藏部分（字段集），并用该列表项的值填充。 页面上的其他输入被禁用，用户可以编辑该项目。 一切正常。

但是，完成编辑后，用户单击“提交”按钮（在先前隐藏的字段集中），其想法是通过ajax提交已编辑的数据，如果被接受，则更新列表。 Ajax等还不是问题。

当用户单击“提交”按钮（编码为type =“ button”）时，已编辑部分中的值似乎已清除，并以空格或null返回。 它似乎仅适用于此字段集，因为可以检索文档其余部分中的（禁用）值（仅出于测试目的）。

谁能告诉我这是怎么回事，以及如何保存这些编辑后的值？

    @**** Drop-down section for editing Admissions ****@
<fieldset id="AdmissionsEditFieldset" class="app-edit-main-fieldset" hidden>
    <legend id="AdmissionsEditLegend" class="app-edit-fieldset-legend">Editing Admission</legend>

    <div class="row">
        <div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">
            <div class="form-group">
                <strong><label>Institution:</label></strong>
                <span class="app-label-to-input-sep">
                    <input id="admId" name="aId" type="text" class="form-input app-can-disable" asp-for="Admission.Id" hidden />
                    <select id="admPlace" name="aPlace" type="text" class="app-can-disable" asp-items="Model.PlaceOfDetentionDd" asp-for="Admission.PlaceId"></select>
                </span>
                <strong><label class="app-input-fld-sep">Date Admitted:</label></strong>
                <span class="app-label-to-input-sep">
                    <input id="admDate" name="aDate" type="text" class="form-input app-can-disable" asp-for="Admission.DateAdmitted" style="width: 5%" />
                </span>
                <strong><label class="app-input-fld-sep">Sequence:</label></strong>
                <span class="app-label-to-input-sep app-can-disable">
                    <input id="admSeq" name="aSeq" type="text" class="form-input" asp-for="Admission.Seq" style="width: 5%" />
                </span>
                <span>
                    <button id="admSubmitBtn" class="btn btn-sm btn-primary app-adm-edit-btn" type="button">Submit</button>
                    <button id="admCancelBtn" type="button" class="btn btn-sm btn-danger app-button-to-button-sep">Cancel</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">

        </div>
    </div>

这是JavaScript / JQuery

$(document).ready(function () {

 $('.app-adm-edit-btn').click(function (event) {
   //*** Prevent default button actions
   event.preventDefault();
  // btn has format 'editN[N...]'

  var btn = event.target.id;
  var sid = btn.substring(4);

  //*** Un-hide the editing drop-down
  $('#AdmissionsEditFieldset').removeAttr('hidden');

  //*** Copy values from the relevent line in the  table to the editing drop-down
  $('#admId').val($('#ident' + sid).text());
  $('#admPlace').val($('#placeN' + sid).text());
  $('#admDate').val($('#dateAdm' + sid).text());
  $('#admSeq').val($('#seq' + sid).text());

  //*** Set the section legend
  $('#AdmissionsEditLegend').text('Editing an Admission');

  //*** Disable other sections
  DisableFieldsets();  // Works OK - makes no difference if commented out

  //*** Focus the first input box
  $('#admPlace').focus();

 });  // $('.app-adm-edit-btn').click

 /*----------------------------------------------------------------------------------
 Admissions Submit button click handler
 ----------------------------------------------------------------------------------*/
 $('#admSubmitBtn').click(function (event) {
  //*** Prevent default button actions
  event.preventDefault();

  // Just to verify nothing wrong with JSON.stringify
  var id = $('#admId').val();
  var placeId = $('#admPlace').val();
  var seq = $('#admSeq').val();
  var dateAdmitted = $('#admDate').val();
  var court = $('#Court').val();

  // Not integrated, so that I can display the values
  var jsn = JSON.stringify({
   Id: $('#admId').val(),
   PlaceId: $('#admPlace').val(),
   Seq: $('#admSeq').val(),
   DateAdmitted: $('#admDate').val()
  });

  $.ajax({
   url: "api/EditAdmissionApi",
   method: "POST",
   contentType: "application/json",
   data: jsn,
   success: function (data) {
    alert("Ajax Success");  //TODO
   }
  });
  alert(jsn);
  //TODO
 });

  /*------------------------------------------------------------------------
  Admissions Cancel button click handler
  --------------------------------------------------------------------------*/
 $('#admCancelBtn').click(function (event) {
   //*** Prevent default button actions
   event.preventDefault();
 });

 });  // $(document).ready

 /*===========================================================================
   Helper Functions
  ===========================================================================*/
 /*---------------------------------------------------------------------------
  DisableFieldsets Helper function to disable fieldsets while input of linked
  items takes place 
 ---------------------------------------------------------------------------*/
   function DisableFieldsets() {
    DoDisableFieldsets('#MainFieldset');
    DoDisableFieldsets('#AdmissionsFieldset');
    DoDisableFieldsets('#ChildrenFieldset');
    DoDisableFieldsets('#SubmitButtonsNonFieldset');
   }

   function DoDisableFieldsets(id) {
    var xId = $(id);
    $('.app-can-disable', xId).attr('disabled', 'disabled');
    $(xId).addClass('app-disabled-background');
   }

Answer 1

是的，确实如此，非常感谢您的建议，mj。

然而，试图找出原因并测试替代方法使我陷入了真正的问题。 我不得不承认，这是你几个小时都看不到的愚蠢现象之一。 我仍然承认，以防万一。

我为列表中的“编辑”按钮指定了“虚拟”类名称，以使选择更加容易。 然后，我在不删除类的情况下无意中将html按钮html复制并改编为Submit按钮。 因此，似乎同时调用了Edit和Submit按钮处理程序，这造成了严重破坏（我尚未弄清楚为什么这不仅会在第二个处理程序中产生未编辑的文本，而且寿命太短了）。 我的问题很愚蠢-很抱歉浪费大家的时间。

构造$（'＃admId'）。val（$（'＃ident'+ sid）.text（））; 现在工作正常。