提交表單後保留動態表單域值

Question

使用帶有選擇下拉的表單。當用戶選擇選項時，它將通過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.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> 

我用這個代碼做阿賈克斯發帖：

<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格設置一次。唯一不起作用的是用戶從dynamic_field輸入的值不被序列化;因此，它變成空的。

我應該如何修改代碼，以便動態字段中的值也可以發佈到ajax.php？

P.S.我可以序列的所有字段，如果我使用代碼：

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

但由於數據是序列化它不是有用發佈form.php之前，所以我不知道，如果形式將失敗（如果提交一些無效的值）或不。

Answer 1

如果你正確地理解了你，你會發布你的表單兩次而不會注意到它。

得到它的工作，你首先需要更換輸入型表單提交另一種類型的元素，如下面的代碼示例中，我曾經按鈕代替：

編輯：添加適當的函數調用form和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將發佈數據並處理結果後面的結果，因此用戶不會被重定向到另一個頁面，也不會自動重新加載任何內容。

我相信，如果你把你的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); 
    } 
});