Call javascript function before submitting form

Question

I need to call a Javascript function before submitting a form, this function generates 2 values (1 token and 1 hash), so I need to pass these values in 2 hidden fields.

JS Function: FULL/UPDATED

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

View form:

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 = "[email protected]";
$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 Action:

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 file

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

The hidden fields "pagseguro_cliente_hash" and "pagseguro_cliente_token" need to receive the variables js $ ('# pagseguro_cliente_hash'). Val () and $ ('# pagseguro_cartao_token'). Val () respectively.

How do you do that?

Generated JS by Payment gateway (UPDATE 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>

Payment Gateway example form page:

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

Mohsen · Accepted Answer · 2020-05-06 07:57:45Z

1

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()]]); ?>

test.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();
}

actionAssinatura:

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

fetch posted data in assinatura action :

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)

edited May 6, 2020 at 7:57

answered May 4, 2020 at 20:35

Mohsen

1,4221 gold badge17 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

gugoan Over a year ago

The values I need are coming empty in the POST. But if I give an ALERT () on the page, it shows me the value

Mohsen Over a year ago

Put the hidden inputs with empty value in form in html and try that

gugoan Over a year ago

only the variables "pagseguro_cliente_hash" and "pagseguro_cliente_token" keep coming empty

gugoan Over a year ago

i updated de JS script... Alert() show the correct hash and token vars

Mohsen Over a year ago

@gugoan you should set id for those input hidden that you can set the value to them

|

Shringiraj Dewangan · Accepted Answer · 2020-05-05 08:34:50Z

0

In case of Yii You should add below form structure using ActiveForm

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

    //input fields and buttons 

<?php ActiveForm::end() ?>

Simply add below code to execute your JS before form submitting

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

return false; to stop form submitting

for more details Click Here

answered May 5, 2020 at 8:34

Shringiraj Dewangan

78410 silver badges27 bronze badges

Collectives™ on Stack Overflow

Call javascript function before submitting form

2 Answers 2

18 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

18 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related