LoginSignup
0
0

More than 3 years have passed since last update.

form外からpost、form内から複数のpostを送る方法

Posted at

記事を書いた経緯

とある申し込み画面を作成していた際、内容確認画面で「戻る」「登録」ボタンと、
さらにパンくずリスト(前画面に戻る)動作が必要な場面に遭遇したため、備忘録用に。

form外からpost送信

上記の私の経験でいうと、パンくずリスト(前画面遷移の際に値を持っていく必要がある場合)でこの方法を使いました。jQueryで実現してます。

早速ソースコードです。

jQuery
    $('#listback').click(function() {
      var form = document.forms["form"];
      var url = $('#listback').attr('name');
      form.action = url;
      form.submit();
      return false;
    });

下はviewの抜粋です。
Laravelを使っているため、遷移先urlをrouteで指定してあります。

view
    <li class="breadcrumb-item"><a href="" name="{{ route('Back')}}" id="listback">新規登録</a></li>

まぁ、上記見ればおわかりかと思いますが、簡単に説明します。
aタグのname属性に、遷移先urlを指定してしまいます。ついでにユニークのidも振っておきます。
そのidでjQueryを呼び出し、name属性で指定したurlを取得しform.actionに指定します。

form内から複数のpost送信

私の経験だと内容確認画面の「戻る」「登録」ボタンに当たります。

jQuery
    //戻るボタン押下
    $("#back").click(function(){
      var url = $('#back').attr('name');
      $('form').attr('action', url);
      $('form').submit();
    });

    //登録ボタン押下
    $("#signup").click(function(){
      var url = $('#signup').attr('name');
      $('form').attr('action', url);
      $('form').submit();
    });

view
<input id='back' type="submit" class="btn btn-primary" name="{{ route('Back')}}" style="margin-right: 10px" value="戻る">
<input id='signup' type="submit" class="btn btn-primary" name="{{ route('Insert')}}" value="登録">

上記はすでにform内に入っているボタンです。
このときinput要素のtype属性をsubmitに設定します。
あとはform外postと同じようにname属性に遷移先urlを指定し、idを振ります。
jQueryでは、attr()で既存のformを調整し、送信先を設定します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0