Ajaxを使ってフォーム内容を保持

Question

[やりたいこと]
・Ajaxを使って送信ボタンを押した時にフォームの値が消えないようにしたい。

[ながれ]
index画面で検索に必要なフォーム入力(未入力可)
検索ボタン押下。
同画面に検索結果表示。

index画面ではindexアクションのみ行われます。
アクション内容はフォーム入力値を使った複合検索。

Ajaxを使うことで画面遷移がないため、フォームの値は残る。
ボタンクリックでアクションを走らせ、フォーム内容はPOSTで送信、検索結果を表示。という流れを目指してます。

自己解決しました。
お世話様です。

Answer 1

$('#search').on('click', function(){
    var sendData = $('#form_search').serialize();
      $.ajax({
      data: sendData,
      url:'user/search',
      type:'post'
    }).done(function (returnData){
      console.log('OK');
    });
  });

[html.erb]

<form id="form_search">
  <input type="text" id="id" name="id">
  <input type="text" id="name" name="name">
  <select name="human" id="human">
    <option value="0">大人</option>
    <option value="1">子供</option>
  </select>
  <button type="button" id="search">検索</button>
</form>

上記のコードにしたことで
controller側から、paramsでフォームの値を受け取ることができました。
本来の質問である「フォーム内容の保持」はAjaxを使用する段階で解決しているようなので
このまま解決ということにさせていただきます。

Answer 2

Ajaxを使って送信ボタンを押した時にフォームの値が消えないようにしたい。

「Ajaxを使わないで」ならできますか? 質問に書かれている内容であればAjaxを使わなくてもできそうです。

Ajaxを使わない方が難易度は低めなので

「Ajaxを使って」というのがどういうことなのかイマイチぴんときません。

という状態であれば、まずは「Ajaxを使わないで」やってみましょう。

それで何かの要件が満せないのであればAjaxを使えば満せるのかを考え、Ajaxを使えば満せるようであれば使えばいいと思います。

Comments

[maonmyo]

いつもありがとうございます。

内容を修正しましたので、よろしくおねがいします。

[hana-da]

今夜時間があればみてみます(_ _