Javascript 表单提交后保留动态表单字段值

使用带有选择下拉列表的表单。当用户选择该选项时，它将通过ajax发布到

ajax.php

。然后，该文件返回动态输入字段。在选择选项之前，

form.php

看起来像这样：

<form action="form.php" method="post" id="myform">
    <select name="raw_ids_array[]" class="select2" multiple="multiple" id="raw_ids_array"><option></option><option value="1">first</option><option value="2">second</option></select>
    <div id="raws_list_hidden"></div>
<input type="submit" id="submit_me" name="submit_me" value="go">
</form>

<form action="form.php" method="post" id="myform">
    <select name="raw_ids_array[]" class="select2" multiple="multiple" id="raw_ids_array"><option></option><option value="1">first</option><option value="2">second</option></select>
    <div id="raws_list_hidden"><input type="text" name="dynamic_field"></div>
<input type="submit" id="submit_me" name="submit_me" value="go">
</form>

我使用以下代码进行Ajax发布：

<script>
  $(function () {
  function ajax_post_data(parameters) {
    $.ajax({
      method: "POST",
      url: "ajax.php",
      cache: false,
      data: parameters,
      success: function(data) {
        $("#raws_list_hidden").html(data);
      }
    });
  }

  $('#raw_ids_array').on("change", function(e) {
  parameters=$("#myform").serialize();
  ajax_post_data(parameters);
  });
});
</script>

当提交

form.php

时（获取“重新加载”），它将从

raw\u ids\u array[]

中选择的选项发布到

ajax.php

，然后将动态字段再次添加到

raws\u list\u hidden

div中。唯一不起作用的事情是，

dynamic\u字段

中用户输入的值没有序列化；因此，它变成空的

我应该如何修改代码，以便动态字段中的值也可以发布到

ajax.php

注意：如果我使用代码，我可以序列化所有字段：

$('#submit_me').click(function() {
    parameters=$("#myform").serialize();
  ajax_post_data(parameters);
});

---

但是它没有用，因为在发布

form.php

之前，数据是序列化的，所以我不知道表单是否会失败（如果提交了一些无效值）。

如果理解正确，您会在没有注意到的情况下发布两次表单

要使其正常工作，首先需要将表单中的输入类型submit替换为另一种类型的元素，如下面的代码示例，其中我使用了button：

编辑：为表单和ajax帖子添加了适当的函数调用

<form id="myform">
    <select name="raw_ids_array[]" class="select2" multiple="multiple" id="raw_ids_array">
        <option></option>
        <option value="1">first</option>
        <option value="2">second</option>
    </select>
    <div id="raws_list_hidden"></div>

    <button id="submit_me" name="submit_me">go</button>

</form>

它会起作用的

在ajax请求声明的“success”属性中，我们将处理肯定响应（http代码200到299）。要处理错误（http代码400到599），可以在“error”属性上声明一个函数，如上面的示例所示

有关JQuery Ajax的更多信息： 有关http状态代码的详细信息：

我希望这有帮助！：）

---

编辑：为表单和ajax帖子添加了适当的函数调用。如果要单独处理post响应，可以创建两个不同的函数进行调用，也可以编辑代码以便发送回调函数：

function postData(params, dest, successCallback, errorCallback) {
    $.ajax({
        method: 'POST',
        url: dest+'.php',
        cache: false,
        data: params,
        success: successCallback,
        error: errorCallback
    });
}

$('#raw_ids_array').on('change', function(e) {
    postData($('#myform').serialize(), 'ajax', ajaxSuccess, ajaxError);

    function ajaxSuccess(response) {
         $('#raws_list_hidden').html(response);
    }

    function ajaxError(response) {
         console.log('something went wrong with ajax post - ', response);
    }
});

$('#submit_me').on('click', function() {
    postData($('#myform').serialize(), 'form', formSuccess, formError);

    function formSuccess(response) {
         console.log('form submit worked successfully - ', response);
    }

    function formError(response) {
         console.log('something went wrong with form post - ', response);
    }
});

---

ajax的要点是它不需要重新加载页面。为什么不让表单也使用ajax提交呢？这样，您就可以提供成功/失败，并且不会丢失提交的数据，因为它不会重新加载页面。这是一个很好的观点，但我更喜欢只使用ajax向表单添加动态字段，然后使用标准HTML/PHP POST提交表单。不幸的是，它不起作用。单击submit按钮时，我需要将数据提交到form.php，而不是ajax.php。然后您可以通过ajax发出这两个请求！；）我已经根据你的需要编辑了我的答案，但是我会考虑重构它！避免通过html表单上的“提交”按钮直接提交数据，这将允许您以不同的方式对待响应，允许您使用html模板，而不是在后端处理html，允许在提交数据之前验证数据。。。试一下，你会发现像那样工作有很多好处

function post_data(params, dest) {
    $.ajax({
        method: 'POST',
        url: dest+'.php',
        cache: false,
        data: params,
        success: function(data) {
            $('#raws_list_hidden').html(data);
        },
        error: function(data) {
            console.log('something went wrong - ', data);
        }
    });
}

$('#raw_ids_array').on("change", function(e) {
    parameters = $("#myform").serialize();
    post_data(parameters, 'ajax');
});

$('#submit_me').click(function() {
    parameters=$("#myform").serialize();
    post_data(parameters, 'form');
});

function postData(params, dest, successCallback, errorCallback) {
    $.ajax({
        method: 'POST',
        url: dest+'.php',
        cache: false,
        data: params,
        success: successCallback,
        error: errorCallback
    });
}

$('#raw_ids_array').on('change', function(e) {
    postData($('#myform').serialize(), 'ajax', ajaxSuccess, ajaxError);

    function ajaxSuccess(response) {
         $('#raws_list_hidden').html(response);
    }

    function ajaxError(response) {
         console.log('something went wrong with ajax post - ', response);
    }
});

$('#submit_me').on('click', function() {
    postData($('#myform').serialize(), 'form', formSuccess, formError);

    function formSuccess(response) {
         console.log('form submit worked successfully - ', response);
    }

    function formError(response) {
         console.log('something went wrong with form post - ', response);
    }
});