从另一个按钮提交的引导contact_me答案

【问题标题】：bootstrap contact_me being submitted from another button从另一个按钮提交的引导contact_me
【发布时间】：2014-12-26 08:11:08
【问题描述】：

我正在使用带有contact_me.js 和contact_me.php 的引导程序contact_form 来提交我的联系表单。我遇到的问题是我有一个单页网站，并且页面上方是一个贝宝按钮。当我点击 paypal 按钮时，它正在提交联系表单。

我尝试在 paypal 按钮上执行“return false”来停止此操作，然后为 paypal 按钮单击提供一个 jquery 函数来提交 paypal 表单

这是我的贝宝表格

<form action="https://www.paypal.com/cgi-bin/webscr" name='paypalForm' method="post">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="G8FJ3NGXWAE6G">
  <input type="hidden" name="on0" value="Reservations">Reservations:<br />

  <select name="os0">
    <option value="One Bike">One Bike &euro;300.00</option>
    <option value="Two Bikes">Two Bikes &euro;600.00</option>
    <option value="Three Bikes">Three Bikes &euro;900.00</option>
  </select> 
  <input type="hidden" name="currency_code" value="EUR"><br />
  <input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110429-1/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="button"  onclick="return false;"id='paypalButton' alt="PayPal - The safer, easier way to pay online.">
  <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110429-1/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

Heres my jquery on click function（我将警报放入以检查其是否被调用）

$( "#paypalButton" ).click(function() {     
            alert('here');
            $( "#paypalForm" ).submit();
        });

如果我在 paypal 按钮上没有“return false”，则会调用contact_me.js 的开头

$("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // something to have when submit produces an error ?
        // Not decided if I need it yet
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var name = $("input#name").val();
        var phone = $("input#phone").val();
        var email = $("input#email").val();
        var message = $("textarea#message").val();
        var firstName = name; // For Success/Failure Message
        // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
            firstName = name.split(' ').slice(0, -1).join(' ');
        }......... etc

如何在不提交联系表的情况下让 paypal 按钮提交？

我是否必须更改 contact_me.js（以及如何更改）或者我可以从 $('#paypalButton').click() 中进行更改吗？

【问题讨论】：

标签： jquery twitter-bootstrap paypal contact-form

【解决方案1】：

我通过将表单的名称添加到 contactme.js 文件来解决此问题，以便提交调用是这样的

$('form[name="sentMessage"]').find("input,textarea").jqBootstrapValidation({

而不是

$("input,textarea").jqBootstrapValidation({

现在可以正常使用了

【讨论】：

【解决方案2】：

好的，所以我尝试了一些方法。我必须承认我对 js 完全陌生，不知道以下解决方案是否是防弹的，但我的 PayPal 按钮和联系表现在都可以使用。这是我所做的：

我浏览了 jqBootstrapValidation.js 文件并逐步禁用其中的部分内容，直到找到使我的 PayPal 按钮再次起作用的位置。我发现如果js文件的第49行：

var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);

已禁用，PayPal 按钮工作正常。

接下来我将 var 包装到一个 if 语句中，如下所示：

if (
     $form.hasClass("contactform")
   ) {
     var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);
      }

所以基本上现在 html 文件中需要“contactform”类来设置 var $inputs。

我的 Contactform HTML 现在看起来像这样：

<div class="col-sm-offset-3 col-lg-6">
    <form name="sentMessage" id="contactForm" class="contactform" novalidate>
        <legend class="content-legend">Kontakt</legend>
        <div class="control-group">
            <div class="controls">
                <input type="text" class="form-control content-form" placeholder="Name" id="name" required data-validation-required-message="Bitte geben sie Ihren Namen ein" />
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <input type="email" class="form-control content-form" placeholder="Mail" id="email" required data-validation-required-message="Bitte geben Sie eine Mailadresse ein" />

[...] 等等。

例如该表单包含“contactform”类。

我的 PayPal 按钮 HTML 如下所示：

<form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypalbutton" target="_top" style="float:right;">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="xxx">
    <input type="submit" value="Jetzt zahlungspflichtig Bestellen" border="0" name="submit" title="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal." class="btn btn-primary">
    <img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>

例如该表单不包含“contactform”类。 var $inputs 不会由 jqBootstrapValidation.js 文件设置，因此它不会触发阻止 PayPal 按钮工作的因素。

希望对你有帮助。

【讨论】：