How do I bind to beforeSubmit event on an AJAX-loaded form in Yii?

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.

Answers 1

Related Articles