单击按钮时输入框值消失 - javascript

我刚开始使用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');
   }

javascript参考方案

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

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

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

构造$('#admId')。val($('#ident'+ sid).text());现在工作正常。

将简单的javascript代码转换为c# - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意,将javascript代码重写为c#这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…

如果复选框切换复选框已选中,则在切换div中输入必填字段 - javascript

我使用脚本用JavaScript切换了一些div。如果要选中复选框以显示toogle div,我想在toogle div中设置一些“必填”输入字段。有人能弄清楚吗?那是工作吗?function show(id) { if(document.getElementById) { var mydiv = document.getElementById(id); m…

从其他文件夹访问母版页 - javascript

我认为这应该很容易但不确定如何解决。我在主文件夹中有一个名为01.aspx的页面01.aspx页应该继承products.master项目根目录存在于products.master中像下面的照片:我使用波纹管代码,但没有任何工作的JavaScript,图像和...01.aspx<%@ Page Title="" Language=&…

PHP stringID无法从回显中读入onclick - javascript

我有一个音频播放器,可以在HTML中正常工作,但是当我从PHP回显调用时,似乎没有得到div ID的名称,因此它无法播放我的音频。这是我的代码:// Show audio if ($sObj->get('audio') != null) { $sAudio = $sObj->get('audio'); $a…

在php中单击按钮添加表行并设置字段值 - javascript

我有一个表单,必须在单击按钮时添加表行。这是我必须动态添加的表行:(addProdToGroup.php)<tr style="text-align: center;" id="products"> <td><?php $j ?></td> <td><s…