将表单提交按钮与对话框提交按钮组合在一起

Question

感谢您在这里查看我的问题..

我有一个对话框，我打开了，我在那里的形式工作，并获得我想要的重复键。但我想用带有Jquery UI对话框按钮的按钮替换表单按钮

目前我必须使用两个按钮...表单按钮（黑色箭头）获取Recurly Key（黄色箭头），然后提交付款按钮（绿色箭头）以实际将表单提交给服务器..

我有2套用于此操作的JavaScript ...我想弄清楚如何将它们组合到提交付款按钮（绿色按钮）而不必有2个单独的按钮

代码如下图：

我相信我在jquery 1.11.1

宝石

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

对话框脚本（在application.js中）

$(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");
        });
    });
});

表单脚本（在表单的html中）

  <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>

表单HTML编码

<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>