javascript - Jquery 生成的输入值未发布在表单提交上

Question

我正在使用 Braintree 处理我正在创建的网站的付款。该 API 要求我通过 JavaScript 生成支付方法随机数才能处理支付。我能够在表单提交时生成随机数并将其放置在输入字段中，但是该值并未发布。

jquery:

  $( document ).ready(function() {
  $('#checkout').on("submit", function() {
      var client = new braintree.api.Client({clientToken: "<?php echo $clientToken ?>"});
      client.tokenizeCard({
      number: $('#number').val(),
      cardholderName: $('#first_name').val() + ' ' + $('#last_name').val(),
      expirationMonth: $('#expiration_month').val(),   
      expirationYear: $('#expiration_year').val(),   
      cvv: $('#cvv').val(),
      }, function (err, nonce) {
      $("#checkout input[name=nonce]").val(nonce);
      $('#checkout input[name=random]').val('randomtext');
  });

      });
  });

PHP:

<?php
echo $_POST['first_name'];
echo '<br/>';
echo $_POST['last_name'];
echo '<br/>';
echo $_POST['phone_number'];
echo '<br/>';
echo $_POST['expiration_month'];
echo '<br/>';
echo $_POST['expiration_year'];
echo '<br/>';
echo $_POST['nonce'];
echo '<br/>';
echo $_POST['random'];
echo '<br/>';
$result = Braintree_Transaction::sale(array(
'amount' => '113.00',
  'paymentMethodNonce' => $_POST['nonce'],
  'orderId' => 'order id',
  'customer' => array(
'firstName' => $_POST['first_name'],
'lastName' => $_POST['last_name'],
'phone' => $_POST['phone_number'],

  )

));

if ($result->success) {
print_r("success!: " . $result->transaction->id);
} else if ($result->transaction) {
print_r("Error processing transaction:");
print_r("\n  code: " . $result->transaction->processorResponseCode);
print_r("\n  text: " . $result->transaction->processorResponseText);
} else {
print_r("Validation errors: \n");
print_r($result->errors->deepAll());
}
?>

HTML:

<form id="checkout" name="checkout" action="checkout_result.php" method="post" style="width:20em;font-size:1.5em;margin-left:auto;margin-right:auto;">
<table style="margin-top:0.5em;">
<tr>
<td style="padding-left:0.75em;">First Name:</td>
<td><input style="font-size:0.75em;"data-braintree-name="first_name" name="first_name"     id="first_name" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Last Name:</td>
<td><input style="font-size:0.75em;"data-braintree-name="last_name" name="last_name"    id="last_name" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Email Address:</td>
<td><input  style="font-size:0.75em;" name="email_address" id="email_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Phone Number:</td>
<td><input style="font-size:0.75em;" name="phone_number" id="phone_number" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Street Address:</td>
<td><input style="font-size:0.75em;" data-braintree-name="street_address" name="street_address"     id="street_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Apt #:</td>
<td><input style="font-size:0.75em;" data-braintree-name="extended_address" name="extended_address" id="extended_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Postal Code:</td>
<td><input style="font-size:0.75em;" data-braintree-name="postal_code" name="postal_code"     id="postal_code" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Card Number:</td>
<td><input style="font-size:0.75em;" data-braintree-name="number" name="number" id="number"     value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Expiration Month:</td>
<td><input style="font-size:0.75em;" data-braintree-name="expiration_month" name="expiration_month" id="expiration_month" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Expiration Year:</td>
<td><input style="font-size:0.75em;" data-braintree-name="expiration_year" name="expiration_year" id="expiration_year" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">CVV:</td>
<td><input style="font-size:0.75em;" data-braintree-name="cvv" name="cvv" id="cvv" value=""/>             </td>
</tr>
<tr>
<td style="padding-left:0.75em;">Random:</td>
<td><input style="font-size:0.75em;" name="random" id="random" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Nonce:</td>
<td><input type="text" style="font-size:0.75em;" name="nonce" id="nonce" value=""/></td>
</tr>
</table>
<div style="padding-top:0.25em;padding-bottom:0.25em;text-align:center;"><span><input     style="font-size:0.5em;" type="submit"
 id="submit" value="SUBMIT"/></span></div>
</div>

</form>

如何获取要发布的随机数输入字段。随机文本输入字段也不会发布。

Answer 1

问题可能在于，tokenizeCard 进行异步调用来获取随机数。事件流程如下:

submit form begins -> tokenizing begins -> submit form ends ->
(somewhere here the promise is resolved - the result comes back from the server)
-> tokenizing ends

您可以做的是将 return false 添加到提交监听器的末尾(以随机数字段为空为条件)，然后再次调用提交(无需再次从服务器获取随机数)客户端回调。它看起来像这样:

$('#checkout').on("submit", function() {
  //I could be wrong in the condition below - it may be undefined
  if($("#checkout input[name=nonce]").val() === ''){ 
    var client = new braintree.api.Client({clientToken: "<?php echo $clientToken ?>"});
    client.tokenizeCard({
      number: $('#number').val(),
      cardholderName: $('#first_name').val() + ' ' + $('#last_name').val(),
      expirationMonth: $('#expiration_month').val(),   
      expirationYear: $('#expiration_year').val(),   
      cvv: $('#cvv').val(),
    }, function (err, nonce) {
      $("#checkout input[name=nonce]").val(nonce);
      $('#checkout input[name=random]').val('randomtext');
      $('#checkout').submit();
    });
    return false; //stops form submitting
  } else {
    return true; //continues form submitting
  }
});

编辑:这个 fiddle 完全代表了您的问题

$("#form").submit(function(){
    alert("submit invoked!");
    if($("#writeMe").val() === ''){
        writeValue();
        alert("submit not done - writeValue invoked");
    } else {
        alert("submit actually done");
    }
    return false;
}); 

function writeValue(){
    setTimeout(function() {
       alert("result's back -> gonna submit again");
       $("#writeMe").val("written");
       $("#form").submit(); 
    }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id="form">
    <input type="text" readonly id="writeMe" />
    <input type="submit" value="Submit me!" />
</form>