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 
 
    } 
 
});

編輯：這撥弄代表你的問題正是

$("#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>