フォーム送信後に動的フォームフィールド値を保持する

Question

選択ドロップダウンメニューでフォームを使用する。ユーザーがオプションを選択すると、Ajax経由でajax.phpに投稿されます。ファイルは動的入力フィールドを返します。

私はAjaxの投稿行うには、このコードを使用し

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

：

を

<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.phpはこの前にオプションが選択されているように見えます

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

ただし、フォーム提出が失敗した場合は、前に選択したオプション/入力した値を再度表示します。再びraws_list_hidden DIVにform.phpが送信されると

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

（「再読み込み」を取得します）raw_ids_array[]からajax.phpにオプションを選択し、そのポスト、そしてダイナミックなフィールドを追加している：これを追加しました。ユーザーが入力した値dynamic_fieldからは機能しない唯一のものはシリアル化されません。したがって、空になります。

コードを変更する必要があるため、動的フィールドの値もajax.phpにポストされますか？

P.S.

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

が、データがシリアル化されるので、それは有用ではないのですform.phpを投稿する前に、そのフォームは、（いくつかの無効な値が提出された場合には）失敗した場合、私は知らない。私は、コードを使用する場合、私はすべてのフィールドをシリアル化することができますか否か。

Answer 1

正しく理解されていれば、気付かずに2回書類を投稿しています。

EDIT：

は、それはあなたの最初の入力タイプは、私が代わりにボタンを使用し、以下のコード例のように、要素の別のタイプのためにあなたの形で提出置き換える必要があります、作業を取得するために追加しますフォームと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"プロパティに関数を宣言できます。私はこれが助けを願っていhttps://en.wikipedia.org/wiki/List_of_HTTP_status_codes

：HTTPステータスコードの詳細についてはhttps://www.w3schools.com/jquery/ajax_ajax.asp ：jQueryのAjaxの詳細については

！ :)

---

EDIT：フォームとajax投稿の適切な関数呼び出しが追加されました。あなたは、別途ポスト応答に対処したい場合は、コールバック関数を送ることができるので、あなたが電話をかけること、またはコードを編集するために、2つの異なる機能を作成することができ、次のいずれか

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