javascript - 提交表单前调用javascript函数
问题描述
我需要在提交表单之前调用一个 Javascript 函数,这个函数会生成 2 个值(1 个令牌和 1 个哈希),所以我需要在 2 个隐藏字段中传递这些值。
JS 功能:完整/更新
<script type="text/javascript">
//Generates the necessary content
$('#submitForm').click(function() {
PagSeguroBuscaHashCliente(); //Create Hash
PagSeguroBuscaBandeira(); //By field "pagseguro_cartao_numero" return flag card
PagSeguroBuscaToken(); //By 4 digits "pagseguro_cartao_numero" gen token card
setTimeout(function() {
enviarPedido();
}, 3000);
});
function enviarPedido() {
/** TEST GENERATED VALUES **/
alert($('#pagseguro_cliente_hash').val())
alert($('#pagseguro_cartao_token').val())
// var data = {
// hash: $('#pagseguro_cliente_hash').val(),
// token: $('#pagseguro_cartao_token').val()
// };
$('#pagseguro_cliente_hash').val(pagseguro_cliente_hash);
$('#pagseguro_cartao_token').val(pagseguro_cartao_token);
$('#sampleForm').submit();
}
</script>
查看表格:
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\models\Assinatura;
use CWG\PagSeguro\PagSeguroAssinaturas;
$this->title = 'Assinatura';
$this->params['breadcrumbs'][] = $this->title;
$email = "xxxxxx@hotmail.com";
$token = "xxxxxxx";
// token gerado em 23/04/2020
$sandbox = false;
$pagseguro = new PagSeguroAssinaturas($email, $token, $sandbox);
//Sete apenas TRUE caso queira importa o Jquery também. Caso já possua, não precisa
$js = $pagseguro->preparaCheckoutTransparente(true);
echo $js['completo']; //Importa todos os javascripts necessários
?>
<div class="site-minhaconta">
<h1><?= Html::encode($this->title) ?></h1>
<!-- INICIO FORM -->
<?php $form = ActiveForm::begin([
'method' => 'post',
'id' =>'sampleForm'
])
?>
<div class="panel-body">
<?= $form->field($model, 'pagseguro_cartao_numero')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cartao_mes')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cartao_ano')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cartao_cvv')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'form_nome')->textInput(['maxlength' => true]) ?>
<hr>
<?= $form->field($model, 'form_email')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'form_cpf')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cliente_hash')->hiddenInput(['id' => 'pagseguro_cliente_hash'])->label(false)?>
<?= $form->field($model, 'pagseguro_cartao_token')->hiddenInput(['id' => 'pagseguro_cartao_token'])->label(false)?>
<div class="form-group">
<?= Html::button('Confirmar Assinatura', ['name'=>'submitForm',
'id' => 'submitForm', 'value'=>'submitForm', 'class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
<!-- FINAL FORM -->
<script type="text/javascript">
//Generates the necessary content
$('#submitForm').click(function() {
PagSeguroBuscaHashCliente(); //Create Hash
PagSeguroBuscaBandeira(); //By field "pagseguro_cartao_numero" return flag card
PagSeguroBuscaToken(); //By 4 digits "pagseguro_cartao_numero" gen token card
setTimeout(function() {
enviarPedido();
}, 3000);
});
function enviarPedido() {
/** TEST GENERATED VALUES **/
alert($('#pagseguro_cliente_hash').val())
alert($('#pagseguro_cartao_token').val())
// var data = {
// hash: $('#pagseguro_cliente_hash').val(),
// token: $('#pagseguro_cartao_token').val()
// };
$('#pagseguro_cliente_hash').val(pagseguro_cliente_hash);
$('#pagseguro_cartao_token').val(pagseguro_cartao_token);
$('#sampleForm').submit();
}
</script>
</div>
控制器动作:
public function actionAssinatura()
{
$model = new \app\models\Assinatura();
if ($model->load(Yii::$app->request->post()) && $model->validate()) {
$model->form_email = $_POST['Assinatura']['form_email'];
$model->form_cpf = $_POST['Assinatura']['form_cpf'];
$model->pagseguro_cliente_hash = $_POST['Assinatura']['pagseguro_cliente_hash'];
$model->pagseguro_cartao_token = $_POST['Assinatura']['pagseguro_cartao_token'];
return $this->render('plano_assinatura_process', [
'form_email' => $model->form_email,
'form_cpf' => $model->form_cpf,
'pagseguro_cliente_hash' => $model->pagseguro_cliente_hash,
'pagseguro_cartao_token' => $model->pagseguro_cartao_token,
]);
} else {
return $this->render('plano_assinatura_form', [
'model' => $model,
]);
}
}
模型文件
public $pagseguro_cartao_numero;
public $pagseguro_cartao_mes;
public $pagseguro_cartao_ano;
public $pagseguro_cartao_cvv;
public $form_nome;
public $form_email;
public $form_cpf;
public $form_plano;
public $form_codplano;
public $pagseguro_cartao_token;
public $pagseguro_cliente_hash;
public function rules()
{
return [
[[
'pagseguro_cartao_numero',
'pagseguro_cartao_mes',
'pagseguro_cartao_ano',
'pagseguro_cartao_cvv',
'form_nome',
'form_email',
'form_cpf',
'form_plano',
//'form_codplano',
], 'required'],
[['pagseguro_cartao_token', 'pagseguro_cliente_hash'], 'safe'],
];
}
隐藏字段“pagseguro_cliente_hash”和“pagseguro_cliente_token”需要分别接收变量js$ ('# pagseguro_cliente_hash'). Val ()
和$ ('# pagseguro_cartao_token'). Val ()
。
你是怎样做的?
支付网关生成的 JS(更新 2020-05-09)
<script type="text/javascript" src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script><script type="text/javascript">PagSeguroDirectPayment.setSessionId("336d21fd502c41c982c55faf90e1eba9")</script>
<input type='hidden' id='pagseguro_cliente_hash'/>
<script type='text/javascript'>
function PagSeguroBuscaHashCliente() {
PagSeguroDirectPayment.onSenderHashReady(function(response){
if(response.status == 'error') {
console.log(response.message);
return false;
}
$('#pagseguro_cliente_hash').val(response.senderHash); //Hash estará disponível nesta variável.
console.log('Hash Cliente: ' + $('#pagseguro_cliente_hash').val());
});
}
</script>
<input type='hidden' id='pagseguro_cartao_token' />
<script type='text/javascript'>
function PagSeguroBuscaToken() {
PagSeguroDirectPayment.createCardToken({
cardNumber: $('#pagseguro_cartao_numero').val(),
brand: $('#pagseguro_cartao_bandeira').val(),
cvv: $('#pagseguro_cartao_cvv').val(),
expirationMonth: $('#pagseguro_cartao_mes').val(),
expirationYear: $('#pagseguro_cartao_ano').val(),
success: function(response) { console.log('Token: ' + response.card.token); $('#pagseguro_cartao_token').val(response.card.token)},
error: function(response) { console.log(response); },
});
}
</script>
支付网关示例表单页面:
<h2> Campos Obrigatórios </h2>
<p>Número do Cartão</p>
<!-- OBRIGATÓRIO UM CAMPO COM O ID pagseguro_cartao_numero-->
<input type="text" id="pagseguro_cartao_numero" value="4111111111111111"/>
<p>CVV do cartão</p>
<!-- OBRIGATÓRIO UM CAMPO COM O ID pagseguro_cartao_cvv-->
<input type="text" id="pagseguro_cartao_cvv" value="123"/>
<p>Mês de expiração do Cartao</p>
<!-- OBRIGATÓRIO UM CAMPO COM O ID pagseguro_cartao_mes-->
<input type="text" id="pagseguro_cartao_mes" value="12"/>
<p>Ano de Expiração do Cartão</p>
<!-- OBRIGATÓRIO UM CAMPO COM O ID pagseguro_cartao_ano-->
<input type="text" id="pagseguro_cartao_ano" value="2030"/>
<br/>
<button id="botao_comprar">Comprar</button>
<script type="text/javascript">
//Gera os conteúdos necessários
$('#botao_comprar').click(function() {
PagSeguroBuscaHashCliente(); //Cria o Hash identificador do Cliente usado na transição
PagSeguroBuscaBandeira(); //Através do pagseguro_cartao_numero do cartão busca a bandeira
PagSeguroBuscaToken(); //Através dos 4 campos acima gera o Token do cartão
setTimeout(function() {
enviarPedido();
}, 3000);
});
function enviarPedido() {
/** FAÇA O QUE QUISER DAQUI PARA BAIXO **/
alert($('#pagseguro_cliente_hash').val())
alert($('#pagseguro_cartao_token').val())
var data = {
hash: $('#pagseguro_cliente_hash').val(),
token: $('#pagseguro_cartao_token').val()
};
$.post('http://localhost/pagseguro/examples/assinando2.php', data, function(response) {
alert(response);
});
}
</script>
解决方案
plano_assinatura_form:
<?php $form = ActiveForm::begin([
'method' => 'post',
'id' =>'sampleForm'
])
?>
<div class="panel-body">
<?= $form->field($model, 'pagseguro_cartao_numero')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cartao_mes')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cartao_ano')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cartao_cvv')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'form_nome')->textInput(['maxlength' => true]) ?>
<hr>
<?= $form->field($model, 'form_email')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'form_cpf')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cliente_hash')->hiddenInput(['id' => 'pagseguro_cliente_hash'])->label(false)?>
<?= $form->field($model, 'pagseguro_cartao_token')->hiddenInput(['id' => 'pagseguro_cartao_token'])->label(false)?>
<div class="form-group">
<?= Html::button('Confirmar Assinatura', ['name'=>'submitForm',
'id' => 'submitForm', 'value'=>'submitForm', 'class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
<!-- FINAL FORM -->
<?php $this->registerJsFile(Yii::$app->request->baseUrl.'/test.js',['depends' => [\yii\web\JqueryAsset::className()]]); ?>
测试.js:
$('#submitForm').click(function() {
// PagSeguroBuscaHashCliente(); //Create Hash
// PagSeguroBuscaBandeira(); //By field "pagseguro_cartao_numero"
return flag card
// PagSeguroBuscaToken(); //By 4 digits
"pagseguro_cartao_numero" gen token card
setTimeout(function() {
enviarPedido();
}, 3000);
});
function enviarPedido() {
/** TEST GENERATED VALUES **/
pagseguro_cliente_hash = 'testHash';
pagseguro_cartao_token = 'testToken';
// var data = {
// hash: $('#pagseguro_cliente_hash').val(),
// token: $('#pagseguro_cartao_token').val()
// };
$('#pagseguro_cliente_hash').val(pagseguro_cliente_hash);
$('#pagseguro_cartao_token').val(pagseguro_cartao_token);
alert($('#pagseguro_cliente_hash').val())
alert($('#pagseguro_cartao_token').val())
$('#sampleForm').submit();
}
动作Assinatura:
public function actionAssinatura()
{
$model = new \app\models\Assinatura();
if ($model->load(Yii::$app->request->post()) && $model->validate()) {
$model->form_email = $_POST['Assinatura']['form_email'];
$model->form_cpf = $_POST['Assinatura']['form_cpf'];
$model->pagseguro_cliente_hash = $_POST['Assinatura']['pagseguro_cliente_hash'];
$model->pagseguro_cartao_token = $_POST['Assinatura']['pagseguro_cartao_token'];
return $this->render('plano_assinatura_process', [
'form_email' => $model->form_email,
'form_cpf' => $model->form_cpf,
'pagseguro_cliente_hash' => $model->pagseguro_cliente_hash,
'pagseguro_cartao_token' => $model->pagseguro_cartao_token,
]);
} else {
return $this->render('plano_assinatura_form', [
'model' => $model,
]);
}
}
在 assinatura 操作中获取发布的数据:
C:\wamp64\www\basic\controllers\SiteController.php:139:
array (size=2)
'_csrf' => string 'C1spbi8HWaBqAO0w5ozFK6KOyKb20j0cRGR_j5t6vEg-FBE-
bXRs8gFZqVSOwp9xyOrl8sHleHUCMQv89CXxeQ==' (length=88)
'Assinatura' =>
array (size=9)
'pagseguro_cartao_numero' => string 'asdfasdf' (length=8)
'pagseguro_cartao_mes' => string 'asdfasdf' (length=8)
'pagseguro_cartao_ano' => string 'asdfasdf' (length=8)
'pagseguro_cartao_cvv' => string 'asdfasdf' (length=8)
'form_nome' => string 'asdfasdf' (length=8)
'form_email' => string 'asdfasdf' (length=8)
'form_cpf' => string 'asdfasdf' (length=8)
'pagseguro_cliente_hash' => string 'testHash' (length=8)
'pagseguro_cartao_token' => string 'testToken' (length=9)
推荐阅读
- c - 发送一个二维数组来计算总数并在函数中显示结果
- javascript - Head Meta Tag MusicKit JS 中的 Apple Developer Token
- firebase - 使用 httpsCallable() 调用 Firebase 云函数时出现 CORS 错误
- python - 如何创建新的唯一数据框
- sql - 在 Tableau 上创建 7 天实时仪表板
- python - 在列表中查找确切的单词
- c++ - 如何解决双向链表中的这些内存泄漏?
- google-sheets - 计算列中非空白单元格之间的连续空白单元格
- html - 如何在css中更改网格
- android - 在 AudioFlinger 中捕获音频数据并保存到原始 PCM 文件