Question

我正在使用bootstrap contact_form与contact_me.js和contact_me.php进行联系表单提交。我遇到的问题是我有一个单页网站，页面上方是paypal按钮。当我点击paypal按钮时，它正在提交联系表格。

我试图做一个＆＃39;返回false＆＃39;在paypal按钮上停止这个，然后有一个jquery函数为paypal按钮点击提交paypal表单

Heres my paypal form

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

继承我点击功能的jquery（我把警报放进来检查它的被叫）

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

如果我没有＆＃39;返回false＆＃39;那么就是调用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（以及如何）或者我可以从$（＆＃39;＃paypalButton＆＃39;）中进行更改。click（）？

Answer 1

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

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

而不是

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

现在一切正常

Answer 2

好的，所以我试了一下。我必须承认，我对js完全不熟悉并且不知道以下解决方案是否是防弹的，但我的PayPal按钮和contactform现在都在工作。这就是我所做的：

我浏览了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);
      }

所以基本上现在这个班级＆＃34; contactform＆＃34;在html文件中需要设置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" />

[...]等。

e.g。表单包含类＆＃34; contactform＆＃34;。

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

e.g。表单不包含类＆＃34; contactform＆＃34;。 jqBootstrapValidation.js文件不会设置var $输入，因此它不会触发阻止PayPal按钮工作的内容。

我希望它有所帮助。

bootstrap contact_me是从另一个按钮提交的

2 个答案: