Question

我想在模态窗口中显示一个表单，但我的javascript上有我的按钮，所以我想让它们成为表单的“提交按钮”。

这是我的代码：

我用这个javascript函数打开模态，有2个按钮：

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>

如何通过该功能按钮提交该表格？

Answer 1

我还没有使用过ShopifyApp，但一般来说如果你想在javascript中提交一个表单，你可以在元素上调用submit()。你想给表单一个id来轻松找到它。

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

使用Rails在模态窗口中显示表单

1 个答案: