2017-12-28 11 views
0

モーダルウィンドウでフォームを表示したいが、私は自分のjavascriptにボタンがあるので、フォームの "送信ボタン"にしたい。Railsを使ったモーダルウィンドウでフォームを表示

これは私のコードです:

私は2つのボタンで、このjavascript関数とのモーダルを開く:

modal.js

window.newModal = function(path, title){ 
    ShopifyApp.Modal.open({ 
    src: path, 
    title: title, 
    height: 400, 
    width: 'large', 
    buttons: { 
     primary: { 
     label: "OK", 
     message: 'modal_ok', 
     callback: function(message){ 
      ShopifyApp.Modal.close("ok"); 
     } 
     }, 
     secondary: { 
     label: "Cancel", 
     callback: function(message){ 
      ShopifyApp.Modal.close("cancel"); 
     } 
     } 
    }, 
    }, function(result){ 
    if (result == "ok") 
     ShopifyApp.flashNotice("'Ok' button pressed") 
    else if (result == "cancel") 
     ShopifyApp.flashNotice("'Cancel' button pressed") 
    }); 
} 

そして、これは私のフォームです:

form_page.html.erb

<section> 
<section class="full-width" align="center"> 
    <article> 
    <div class="card" style="margin-bottom:0px;"> 
     <form method="POST" action="form_page"> 
     <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden"> 
     <div class="row"> 
      <label>Dirección:</label> 
      <input type="text" name="address"/> 
     </div> 
     <div class="row"> 
      <label>Apt, suite, etc. (opcional):</label> 
      <input type="text" name="addressopt"/> 
     </div> 
     <div class="row"> 
      <label>Código Postal:</label> 
      <input type="text" name="postal" pattern="[0-9]{5}"/> 
     </div> 
     <div class="row"> 
      <label>Phone (opcional):</label> 
      <input type="text" pattern="[0-9]{9}" name="phone"/> 
     </div> 

     <div class="row"> 
     <label>City:</label> 
      <select name="city"> 
       <option>Madrid</option> 
       <option>Barcelona</option> 
       <option>Málaga</option> 
      </select> 
     </div> 
    </form> 
    </div> 
    </article> 

どのように私は、その機能ボタンを通じてそのフォームを提出することができますか?

答えて

0

私はまだShopifyAppを使用していませんが、一般的にjavacriptでフォームを送信する場合は、要素のsubmit()を呼び出してください。簡単に見つけるために、フォームにIDを付けることをお勧めします。

https://www.w3schools.com/jsref/met_form_submit.asp

関連する問題