Question

我想要做的是，一旦提交表单，它将把某些值从表单传递到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">&nbsp;</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">&nbsp;</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脚本，朝着正确方向的任何帮助将不胜感激。

Answer 1

输入只能存储字符串，不能存储函数。通过.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>

通过POST传递某些表单值

1 个答案: