堆栈内存溢出
  繁体   English   中英

提交表格前致电 javascript function

[英]Call javascript function before submitting form

 原文  2020-05-04 19:55:57  1   2    javascript/ yii2

问题描述

我需要在提交表单之前调用 Javascript function，这个 function 生成 2 个值（1 个令牌和 2 个隐藏字段），所以我需要传递这些值。

JS Function：完整/更新

<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>

Controller 动作：

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

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_cliente_hash'). Val ()和$ ('# pagseguro_cartao_token'). 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>

2 个解决方案

解决方案1
 1 已采纳  2020-05-04 20:35:32

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)

解决方案2
 0  2020-05-05 08:34:50

在 Yii 的情况下，您应该使用ActiveForm添加以下表单结构

<?php $form = ActiveForm::begin([
    'id'=>'YourFormId'
]) ?>

    //input fields and buttons 

<?php ActiveForm::end() ?>

只需在表单提交之前添加以下代码即可执行您的JS

$('body').on('beforeSubmit',"#YourFormId",function() {
    //javascript code here
});

返回假； 停止表单提交

更多详情请 点击这里

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 ASP.NET-在提交表单之前调用javascript验证功能 在提交表单之前执行Javascript函数 在提交表单之前处理javascript函数 提交用于JavaScript验证的表单时，函数调用之前的返回结果是什么？ 在提交表单之前调用Ajax jQuery-在使用js或jQuery提交表单之前调用函数/方法 提交前检查表单-JavaScript 在提交表单之前执行 javascript 调用JavaScript函数同时提交表单和单击按钮 在表单提交调用函数javascript之前
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM