I have a form that I load dynamically via AJAX. I try to bind beforeSubmit on the form, but it seems to fail as the form is submitting and the browser is loading a new page. When the form was static in the page, the beforeSubmit event handler was working and the browser did not change location. I tried to change from $('#emailForm').on('beforeSubmit', function(event) { to below but it didn't work. How do I attach beforeSubmit on the form?

view

        <div id="emailBody"><!-- Placeholder for email form w/CAPTCHA --></div>
        <?#= $this->render('_email_form.php', ['emailModel' => new EmailModel()]) ?>

partial

<?php $form = ActiveForm::begin(['id' => 'emailForm', 'action' => 'send-email', 'method' => 'post', 'enableAjaxValidation' => false, 'options' => ['class' => '']]) ?> 
  <?= $form->field($emailModel, 'fromName') ?>

JavaScript

jQuery(function() {
    $('#emailModal').on('show.bs.modal', function (event) { // load email form w/CAPTCHA
        $('#emailBody').load('email-form');
    });
    $('#emailBody').on('beforeSubmit', '#emailForm', function(event) {
        event.preventDefault();

rendered HTML

<div id="emailBody"><form id="emailForm" class="" action="send-email" method="post">
<input type="hidden" name="_csrf" value="aS1LcTJfeU4tXHkuQG4yCjYbDCMfLTEMLEB4EwY4TygGaAAJdBNMPw=="> 

Not that it's relevant, I'm using PHP, Bootstrap, and Yii framework.

I have a form that I load dynamically via AJAX. I try to bind beforeSubmit on the form, but it seems to fail as the form is submitting and the browser is loading a new page. When the form was static in the page, the beforeSubmit event handler was working and the browser did not change location. I tried to change from $('#emailForm').on('beforeSubmit', function(event) { to below but it didn't work. How do I attach beforeSubmit on the form?

view

        <div id="emailBody"><!-- Placeholder for email form w/CAPTCHA --></div>
        <?#= $this->render('_email_form.php', ['emailModel' => new EmailModel()]) ?>

partial

<?php $form = ActiveForm::begin(['id' => 'emailForm', 'action' => 'send-email', 'method' => 'post', 'enableAjaxValidation' => false, 'options' => ['class' => '']]) ?> 
  <?= $form->field($emailModel, 'fromName') ?>

JavaScript

jQuery(function() {
    $('#emailModal').on('show.bs.modal', function (event) { // load email form w/CAPTCHA
        $('#emailBody').load('email-form');
    });
    $('#emailBody').on('beforeSubmit', '#emailForm', function(event) {
        event.preventDefault();

rendered HTML

<div id="emailBody"><form id="emailForm" class="" action="send-email" method="post">
<input type="hidden" name="_csrf" value="aS1LcTJfeU4tXHkuQG4yCjYbDCMfLTEMLEB4EwY4TygGaAAJdBNMPw=="> 

Not that it's relevant, I'm using PHP, Bootstrap, and Yii framework.

• javascript
• jquery
• ajax
• yii2

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 5, 2016 at 0:08 ChloeChloe 26.3k4545 gold badges207207 silver badges377377 bronze badges 4

• I did some deep searching, and I'm doing almost exactly like this: mushtaqtahir./blog/3/yii2-ajax-form-submission – Chloe Commented Apr 5, 2016 at 0:41
• I have a strong feeling the beforeSubmit event is bound by Yii, and Yii is not firing the event. I changed beforeSubmit to just submit and that does call the function, but now Yii validations are not working and my method doesn't know how to handle the validation errors returned. – Chloe Commented Apr 5, 2016 at 1:26
• Can you show us a jsFiddle of what you're attempting to do? – Greg Borbonus Commented Apr 5, 2016 at 2:27
• @GregBorbonus Sorry that wouldn't be possible because it depends on Yii Framework which isn't a Javascript file like JQuery. – Chloe Commented Apr 5, 2016 at 2:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

ActiveForm generates the javascript needed to initialize it here: https://github./yiisoft/yii2/blob/49aec24ae1f01d51b4f3cec8e44d44387022d06b/framework/widgets/ActiveForm.php#L201-L206

For this Javascript code to be executed on the client side, you have to ensure the following:

1. make sure the registered JS is part of the response, which should be the case if you render the view with renderAjax() in the controller.
2. Javascript contained in the response is executed. According to the JQuery documentation this is the case for an ajax request, if dataType setting is set to html:

   "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

You're executing your beforeSubmit, while the form is not yet present on the dom.

Try this:

jQuery(function() {
    $('#emailModal').on('show.bs.modal', function (event) { // load email form w/CAPTCHA
        $('#emailBody').load('email-form',function(){
            $(this).on('beforeSubmit', function(event) {
             event.preventDefault();
             //The rest of your form code.
            });
         });

    });
});

Use this:

$(document).on('beforeSubmit', 'form', function(e) {
   // code here
 }

instead of:

 $('form').on('beforeSubmit', function(e) {
   // code here
 }