我想要做的是,一旦提交表单,它将把某些值从表单传递到PayPal。
这是我的表单代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action="<?php echo whichPPUrl(); ?>" method="post" id="paypal_form" target="_blank">
<div class="form-group">
<label class="control-label col-xs-4" for="text">URL:</label>
<div class="col-xs-8">
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" for="checkbox"> </label>
<div class="col-xs-8">
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_1" value="1.00">
<strong>Moz</strong> - DA/PA/MozRank/Links In/Equity
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_2" value="1.00">
<strong>SEMRush</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_3" value="1.00">
<strong>Majestic</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_4" value="1.00">
<strong>Backlinks</strong> - Get any backlinks found for your domain plus anchor text (250 max.)
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4">Cost ($):</label>
<div class="col-xs-8">
<input id="total" name="cost" type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4"> </label>
<div class="col-xs-8">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="contact@site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="getTheFormValues()">
<input type="hidden" name="amount" value="getAndPassTheCost()">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<input type="image" src="images/purchase.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</div>
</div>
</div>
</form>
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
<script>
$(document).ready(function() {
// updates / adds the checkbox values
function updateSum() {
var total = "0.00";
$(".sum:checked").each(function(i, n) {
let sum = parseFloat(total) + parseFloat($(n).val());
total = sum.toFixed(2);
});
$("#total").val(total);
}
// run the update on every checkbox change and on startup
$("input.sum").change(updateSum);
updateSum();
});
</script>
我对Ajax并不是最好的选择,我已经做了一个基本示例,说明了我认为正确的做法:
此功能:
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
将从输入文本框中获取值,并将其传递到帖子表单。
此功能:
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
只需序列化所有表单数据,然后我就可以在后端对其进行验证和处理。
我是否使流程复杂化了?我的问题是我无法将此数据传递给表单,然后再通过POST将其发送到PayPal脚本,朝着正确方向的任何帮助将不胜感激。
答案 0 :(得分:0)
输入只能存储字符串,不能存储函数。通过.val()
方法为表单控件分配值。函数getAndPassTheCost()
和getTheFormValues()
是无用的。如果您需要序列化表单,请在Submit事件期间进行。至于收集所有表单值,这是在Submit事件中完成的-只需确保要发送的任何值都具有[name]
属性即可。
演示将发送到实时测试服务器-响应将显示在下面的iframe中。
function updateSum() {
var total = 0;
$(".sum:checked").each(function(i) {
let sum = parseFloat($(this).val());
total += sum;
});
$("#total, .total").val(total.toFixed(2));
}
$("input.sum").on('change', updateSum);
$('paypal_form').on('submit', function(e) {
$(this).serialize();
});
.line.line.line {
margin: -5px auto 5px
}
.img.img.img {
margin: -40px auto 0 -70px;
}
.img.img.img:focus {
outline: none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<form class="form-horizontal" action="https://httpbin.org/post" method="post" id="paypal_form" target="response">
<section class='form-row'>
<fieldset class='form-group col'>
<legend>Wraith SEO</legend>
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required pattern='[a-z0-9]+?[.][a-z]{3,}'>
</fieldset>
</section>
<hr class='line'>
<section class='form-row'>
<div class='form-group col'>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_1" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_2" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_3" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_4" value="1.00"> 1.00</label></div>
<label for='total' class="label-control">Total: $
<output id='total' value='0.00'> </output></label>
<input class='total' name='total' type='hidden' value=''>
</div>
</section>
<section class='form-row'>
<fieldset class='form-group mb-4'>
<input type="image" src="https://www.shareicon.net/data/128x128/2017/06/22/887585_logo_512x512.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" class='float-right img'>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="contact@site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<iframe name='response' width='70%' class='float-left'></iframe>
</fieldset>
</section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>