Javascript 组合表单提交按钮和对话框提交按钮

谢谢你在这里看我的问题

我有一个对话框，我打开了，我在那里的形式工作，并获得我想要的递归键。但是我想用jQueryUI对话框按钮中的按钮替换表单按钮

目前我不得不使用两个按钮。。。表单按钮黑色箭头以获取Recurly键黄色箭头，然后提交付款按钮绿色箭头以实际将表单提交到服务器

我有两套javascript用于此操作。。。我想知道如何将它们合并到提交付款按钮绿色按钮中，而不必有两个单独的按钮

代码如下图所示：

---

我相信我在jQuery1.11.1上

宝石

application.js中的对话框脚本

表单的html中的表单脚本

表单HTML编码

---

这是什么对话？有无数的jQuery对话框插件我相信我是在jQuery 1.11.1 gem“jQuery rails”gem“jQuery ui主题”gem“jQuery-ui-rails”上，所以它使用的是jQuery ui对话框：

gem 'jquery-rails' 
gem 'jquery-ui-themes' 
gem 'jquery-ui-rails'

$(document).ready(function() {
    $(function() {
        $("#pay_window").dialog({
           autoOpen: false,
           width: 600,
            buttons: {
                "Submit Payment": function() {
                    $(this).dialog("close");
                    $.ajax({
                        url: "/payment",
                        data: $("#PaymentForm").find([company_id, billing_email, first_name, last_name, recurly_token, plan]).serialize(),
                        type: "POST",
                        success: function (data) {
                            alert('Payment Completed')
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert('error: ' + textStatus + ': ' + errorThrown);
                        }
                    });
                    return false;
                }
            }
        //$(this).dialog("close");
        });
        $("#pay_button").on("click", function() {
            $("#pay_window").dialog("open");
        });
    });
});

  <script>
    // Configure recurly.js
    recurly.configure('<%= @recurly_public_key %>');

    $('form').on('submit', function (event) {

        javascript: $.each($('#postal_code, #year, #month, #number, #first_name, #last_name, #billing_email'), function(i, field) {
            $(field).css({ "border": '#FFFFFF 1px solid'});
        });


        var form = this;
        event.preventDefault();
        recurly.token(form, function (err, token) {
            if (err) {
              if (err.fields) {
                for (var i = 0, field; field = err.fields[i++];) {
                  $("#" + field).css({ "border": '#FF0000 2px solid'});
                }
              }

            } else {

                // recurly.js has filled in the 'token' field, so now we can submit the
                // form to your server; alternatively, you can access token.id and do
                // any processing you wish
                // form.submit();
            }
        });
    });

    recurly.token(document.querySelector('form'), tokenHandler);

    function tokenHandler (err, token) {
        if (err) {
            // handle error using err.code and err.fields
        } else {
            // handle success using token.id
        }
    }

    var pricing = recurly.Pricing();

    pricing.attach(document.querySelector('#pricing'));
</script>

<div id="pay_window" title="Payment Details">
<%= javascript_include_tag 'https://js.recurly.com/v3/recurly.js' %>
<%= stylesheet_link_tag "creditcard" %>
<form id="PaymentForm">
<div class="payment">
  <section class="credit-card visa gr-visa">
    <ul class="inputs">
      <.. removed most of the form fields...>

      <input type="text" id="recurly_token" data-recurly="token" name="recurly_token" />
      <div align="center"><button>Get Token</button> </div>
    </ul>
  </section>

<div>
</form>
</div>