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

Question

使用带有选择下拉菜单的表单。当用户选择选项时，它会通过 Ajax 发布到ajax.php。然后该文件返回动态输入字段。 form.php 看起来像这个 before 选项被选中：

<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.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"><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>

但是，如果表单提交失败，我需要重新显示之前选择的所有选项/输入的值。所以添加了这个：

$(document).ready(function() {
  parameters=$("#myform").serialize();
  ajax_post_data(parameters);
  });

当form.php 被提交（“重新加载”）时，它会将选定的选项从raw_ids_array[] 发布到ajax.php，然后将动态字段再次添加到raws_list_hidden div 中。唯一不起作用的 - 用户从 dynamic_field 输入的值未序列化；因此，它变成了空的。

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

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

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

但它没有用，因为数据在发布form.php之前被序列化了，所以我不知道表单是否会失败（以防提交了一些无效值）。

Answer 1

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

要使其正常工作，您首先需要将表单中的输入类型 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>

这将阻止您的表单在按下按钮时自动提交：我们会将按钮的操作限制为我们在 JS 中编写的内容。

如您所见，表单元素也没有方法或操作属性。

使用 ajax 的想法正是在提交内容时不必重新加载页面。 Ajax 将发布数据并在 curtins 后面处理结果，因此用户永远不会被重定向到另一个页面，也不会自动重新加载任何内容。

我相信如果你保持你的 JS 为：

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');
});

它会起作用的。

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

有关 JQuery Ajax 的更多信息：https://www.w3schools.com/jquery/ajax_ajax.asp 有关 http 状态码的更多信息：https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

我希望这会有所帮助！ :)

---

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

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);
    }
});