找到你要的答案

Q:Javascript button which submits Contact Form 7 form, then redirects to URL

Q:JavaScript按钮提交联系表7的形式,然后重定向到URL

I'm trying to make a 'Choose Your E-mail Plan' page on my website - https://godesignweb.co.uk/e-mail-services/monthly-email/ & I'm having trouble submitting the form, and then redirecting to a specific paypal page depending on what package they've chosen.

As you can see from the website it's almost there, and depending on which package you choose, it displays a different at the bottom of the page.(which I want to contain a submit button which redirects the user).

I currently have

<input type="submit" form="email" value="send">

which is outside of the contact form 7 form, and works (it's on the Pro plan) if you click it, it submits the form.

Is there anyway I can call 3 different functions for the 3 buttons which;

1) submit the form (including checking the validation that it normally does_ 2) redirect the user to a paypal page

Cheers

我想做一个“选择你的邮件计划”页面在我的网站https://godesignweb.co.uk/e-mail-services/monthly-email/ &;我无法提交表单,然后重定向到一个特定的贝宝页面根据他们选择什么包。

你可以从网站上看到它的几乎没有,而这取决于你选择的包,它会显示在页面底部的不同。(我想有一个提交按钮,将用户重定向)。

我目前有

<input type="submit" form="email" value="send">

这是联系形式7以外的形式,工程(它的亲计划),如果你点击它,它提交的形式。

无论如何,我可以调用3个不同的功能,这3个按钮;

1) submit the form (including checking the validation that it normally does_ 2) redirect the user to a paypal page

干杯

answer1: 回答1:

Updated answer:

As taken from your comment to my answer, here's what you could try if you use three different submit buttons:

1.) assign each SUBMIT button a unique name:

<!-- button in starter form -->
<input type="submit" name="submit-starter" form="email" value="Send"/>

<!-- button in pro form -->
<input type="submit" name="submit-pro" form="email" value="Send"/>

<!-- button in advanced form -->
<input type="submit" name="submit-advanced" form="email" value="Send"/>

2.) On PHP side:

if (isset($_POST['submit-starter'])) {
  $plan= 'starter';
  $priceMonthly= 3.99;
} elseif (isset($_POST['submit-pro'])) {
  $plan= 'pro';
  $priceMonthly= 5.99;
} elseif (isset($_POST['submit-advanced'])) {
  $plan= 'advanced';
  $priceMonthly= 7.99;
}

// create the Paypal form
?>
<form name="_xclick" action="https://www.paypal.com/de/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="me@mybusiness.com">
  <input type="hidden" name="currency_code" value="GBP">
  <input type="hidden" name="item_name" value="<?php print $plan; ?>">
  <input type="hidden" name="amount" value="<?php print $price; ?>">
  <input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but01.gif" border="0" name="submit" alt="Pay with PayPal">
</form>

-- previous answer --

I am not sure if I got you right because I somehow just see one (submit) button instead of three buttons so I hope my answer is not misleading or doesn't make sense in your scenario:

I assume that:

  1. the three buttons refer to the three plans you offer
  2. you only want to have one validation function
  3. based on the plan selection you want to have different prices on the Paypal checkout form

The below code will only deal with the frontend control, you should definitely add a second server-based verification to make sure nobody injected/manipulated your frontend form code.

Instead of using a standard submit button, change it to:

<input type="button" onclick="formInspectAndSubmit()" value="send"/>

and add a form variable for your plan

<input type="hidden" id="input-plan" name="input-plan"/> 

Your FRONTEND validation function should look like this:

function formInspectAndSubmit() {
  // validation stuff ...

  // retrieve the chosen plan
  var plan= $('.active').prop('id');

  switch (plan) {
    case 'starter':
      // set hidden parameters for starters
      $('#input-plan').val('starter');
      break;
    case 'pro':
      // set hidden parameters for pro
      break;
    case 'advanced':
      // set hidden parameters for starters
      break;
  }
  // set POST variables based on above plan and redirect to validation page; this should then forward to Paypal checkout page with price defined by chosen plan
  $('#email').submit();
}

更新的答案:

从你的评论我的答案,这里是什么,你可以尝试,如果你使用三个不同的提交按钮:

1)分配每个提交按钮的唯一名称:

<!-- button in starter form -->
<input type="submit" name="submit-starter" form="email" value="Send"/>

<!-- button in pro form -->
<input type="submit" name="submit-pro" form="email" value="Send"/>

<!-- button in advanced form -->
<input type="submit" name="submit-advanced" form="email" value="Send"/>

2)基于PHP的一面:

if (isset($_POST['submit-starter'])) {
  $plan= 'starter';
  $priceMonthly= 3.99;
} elseif (isset($_POST['submit-pro'])) {
  $plan= 'pro';
  $priceMonthly= 5.99;
} elseif (isset($_POST['submit-advanced'])) {
  $plan= 'advanced';
  $priceMonthly= 7.99;
}

// create the Paypal form
?>
<form name="_xclick" action="https://www.paypal.com/de/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="me@mybusiness.com">
  <input type="hidden" name="currency_code" value="GBP">
  <input type="hidden" name="item_name" value="<?php print $plan; ?>">
  <input type="hidden" name="amount" value="<?php print $price; ?>">
  <input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but01.gif" border="0" name="submit" alt="Pay with PayPal">
</form>

——以前的答案

我不知道我是否得到了你的权利,因为我不知何故只看到一个(提交)按钮,而不是三个按钮,所以我希望我的答案是不误导或没有意义,在您的方案:

我认为:

  1. the three buttons refer to the three plans you offer
  2. you only want to have one validation function
  3. based on the plan selection you want to have different prices on the Paypal checkout form

下面的代码将只处理与控制的前端,你绝对应该再添加一个基于服务器的验证来确保没有注射/操纵你的前端代码形式。

而不是使用标准提交按钮,将其更改为:

<input type="button" onclick="formInspectAndSubmit()" value="send"/>

并为您的计划添加窗体变量

<input type="hidden" id="input-plan" name="input-plan"/> 

你的前端验证功能看起来应该像这样:

function formInspectAndSubmit() {
  // validation stuff ...

  // retrieve the chosen plan
  var plan= $('.active').prop('id');

  switch (plan) {
    case 'starter':
      // set hidden parameters for starters
      $('#input-plan').val('starter');
      break;
    case 'pro':
      // set hidden parameters for pro
      break;
    case 'advanced':
      // set hidden parameters for starters
      break;
  }
  // set POST variables based on above plan and redirect to validation page; this should then forward to Paypal checkout page with price defined by chosen plan
  $('#email').submit();
}
javascript  php  contact-form-7