提交表单前先调用javascript函数

Question

我在提交表单之前需要调用Javascript函数，此函数生成2个值（1个令牌和1个哈希值，因此我需要在2个隐藏字段中传递这些值。

JS功能：

<script type="text/javascript">

$('#botao_comprar').click(function() {
    PagSeguroBuscaHashCliente(); 
    PagSeguroBuscaBandeira(); 
    PagSeguroBuscaToken();  
    setTimeout(function() {
        enviarPedido();
    }, 3000);
});

    //pagseguro_cliente_hash = $('#pagseguro_cliente_hash').val()
    //pagseguro_cartao_token = $('#pagseguro_cartao_token').val()

</script>

查看表格：

use app\models\Assinatura;
use CWG\PagSeguro\PagSeguroAssinaturas;
<?= $form->field($model, 'form_email')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'form_cpf')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'pagseguro_cliente_hash')->hiddenInput()->label(false)?>
<?= $form->field($model, 'pagseguro_cartao_token')->hiddenInput()->label(false)?>

<div class="form-group">
<?= Html::submitButton('Confirmar Assinatura', ['name'=>'botao_comprar', 'value'=>'botao_comprar', 'class' => 'btn btn-primary _addNew']) ?>
</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,
            ]);
        }
    }

隐藏字段“ pagseguro_cliente_hash”和“ pagseguro_cliente_token”需要分别接收变量js $ ('# pagseguro_cliente_hash'). Val ()和$ ('# pagseguro_cartao_token'). Val ()。

你怎么做到的？

Answer 1

您要做的就是：创建表单ID将提交按钮更改为普通按钮设置按钮的ID使用javascript提交表单

 <?php $form = ActiveForm::begin(['options' => ['method' => 'post', 'id' 
   =>'sampleForm']]) ?>
 <?= $form->field($model, 'form_email')->textInput(['maxlength' => true]) ?>
 <?= $form->field($model, 'form_cpf')->textInput(['maxlength' => true]) ?>
 <?= $form->field($model, 'pagseguro_cliente_hash')->hiddenInput()->label(false)?>
 <?= $form->field($model, 'pagseguro_cartao_token')->hiddenInput()->label(false)?
 <div class="form-group">
      <?= Html::button('Confirmar Assinatura', ['name'=>'botao_comprar', 
       'id' => 'submitForm', 'value'=>'botao_comprar', 'class' => 'btn btn-primary _addNew']) ?>
</div>
<?php ActiveForm::end() ?>

<script type="text/javascript">

$('#submitForm').click(function() {
   $('#pagseguro_cliente_hash').val(pagseguro_cliente_hash);
   $('#pagseguro_cartao_token').val(pagseguro_cartao_token);

   $('#sampleForm').submit();

});

Answer 2

[如果是Yii您应该使用ActiveForm

添加以下表单结构

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

    //input fields and buttons 

<?php ActiveForm::end() ?>

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

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

return false;停止提交表单

有关更多详细信息Click Here