Run validation on Load() content

Question

Hi all this is probably really simple to fix and maybe down to my misunderstanding of jQuery.

Im building a document centre and when users click on different buttons it loads form into the page using load(), this form is then displayed centre of screen with CSS. Once completed the form submits by ajax closing the form.

i have functions wrapped in a $(function(){}); to listen for button clicks and load the relevant for but when a form is loaded the on submit listener doisnt pick up the form. I'm assuming because the form wasn't included when the DOM was generated this is why it cannot be read by my scripts

function window_form(form="") {
  $('#popup_bg').addClass('show').load('/ajax/'+form);
  $('.closeWindow').live('click', function(e){
    $('#popup_bg').removeClass('show');
    $( "section" ).remove( ".windowCard" );
  });
}

$(function(){
  // Submission listener
  $('form').on('submit', function(e) {
    e.preventDefault();
    ajax_submit($(this));
  });
  // check for window form button and load the form
  $(".windowForm").click(function(e) {
    e.preventDefault();
    window_form($(this).data("form"));
  });
});

So any forms on the page this all works great and if submitted sends to the ajax_submit(). So is there a way to initialise the forms once the load completes so they can be picked up buy the submit function. i was looking a .live but isnt this getting removed.

i could include my script in all the form files which works but that seem hacky and loading multiple jquery sessions.

try to use `.on('click', function()...)` instead of `.click(function...)` — Alex Slipknot, Mar 27 '17 at 12:55
_“i was looking a .live but isnt this getting removed”_ - yes; but http://api.jquery.com/on/ explains how to replace it. — CBroe, Mar 27 '17 at 13:01
thanks Alex i replaced it with your suggestion but hasn't made any differnec — John Fieldsend, Mar 27 '17 at 13:13

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

These search results might help you.

How can perform a validation JQuery script after that a div containing the input field of a form is loaded?

https://forum.jquery.com/topic/validate-problem-dealing-with-load-function

https://forum.jquery.com/topic/validating-after-load

edited May 23 '17 at 11:54

Community

1
1

answered Mar 27 '17 at 12:56

Ankit Pandey

1,790
1
19
22

Alex Slipknot · Accepted Answer · 2017-03-27T14:16:56.007

If you have dynamic content you should bind event on content when it's loaded. You can try this code:

function window_form(form = '') {
    $('#popup_bg').addClass('show').load('/ajax/' + form);
    $('.closeWindow').live('click', function(e){
    $('#popup_bg').removeClass('show');
    $('section').remove('.windowCard');
  });
}

$(function(){
  // Submission listener
  $('form').on('submit', function(e) {
    e.preventDefault();
    ajax_submit($(this));
  });
  // check for window form button and load the form
  $('body').on('click', '.windowForm', function(e) {
    e.preventDefault();
    window_form($(this).data("form"));
  });
});

UPDATE: I modified example for better understanding. This is your test.js file:

// ********************************************
// Global Varables
// ********************************************
var Window = $(window);
var TheDoc = $(document);
var ViewWidth = Window.width();
var Body = $("body");

// ********************************************
// SITE FUNCTIONS
// ********************************************
function window_form(form) {
    $('#popup_bg').addClass('show').load('/ajax/' + form, function () {
        $('form').validate();
    });
}

// ********************************************
// SITE INTERACTIONS
// ********************************************
$(function () {
    // Submission listener
    $('body').on('submit', 'form', function (e) {
        e.preventDefault();
        var $form = $(this);
        if ($form.valid()) {
            var ajaxData = new FormData($form.get(0));
            ajaxData.append('action', $form.attr("id"));
            console.log(ajaxData);
        }
    }).on('click', '.windowForm', function (e) {
        e.preventDefault();
        window_form($(this).data("form"));
    });
});

hi alex i tried your solution and its still not work im wandering if im going about doing this the right way — John Fieldsend, Mar 27 '17 at 13:34
Sorry, I can't see full code. Please post some example html content that will load — Alex Slipknot, Mar 27 '17 at 13:37

score 0 · Answer 3 · answered Mar 27 '17 at 13:52

hi Alex so here are the files

test.js

// ********************************************
// Global Varables
// ********************************************
var Window          = $(window);
var TheDoc          = $(document);
var ViewWidth       = Window.width();
var Body          = $("body");

// ********************************************
// SITE FUNCTIONS
// ********************************************
function window_form(form = '') {
  $('#popup_bg').addClass('show').load('/ajax/' + form, function() {
    $('form').validate();
  });
}

function ajax_submit(form) {
  var $form          = form;
  $form.on( 'submit', function(e) {
    e.preventDefault();
    if($form.valid()) {
      var ajaxData  = new FormData($form.get(0));
      ajaxData.append('action', $form.attr("id"));
      console.log(ajaxData);
    }
  });
}


// ********************************************
// SITE INTERACTIONS
// ********************************************
$(function(){
  // Submission listener
  $('form').on('submit', function(e) {
    e.preventDefault();
    ajax_submit($(this));
  });
  // check for window form button and load the form
  $('body').on('click', '.windowForm', function(e) {
    e.preventDefault();
    window_form($(this).data("form"));
  });
});

the form to be loaded first_case.php

<?php require_once( '../../../includes/initialise.php' ); ?>

<section class="card windowCard">
  <header>
    <span class="icon closeWindow">x</span>
  </header>
  <div class="ajaxReply"></div>
  <h2>Enter The IPS Case Code</h2>
  <p>Please enter the IPS case cade as found on your creditors letter. This case will then be added to your account.</p>
    <form name="login" id="attachCase" class="form" action="process/cases.php" method="post" data-type="json" >
        <fieldset>
            <legend>Case Code Format <strong>ABCD01A</strong></legend>
            <p class="formRow">
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="0" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="0" />
        <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
            </p>
            <p class="formRow">
                <button type="submit" name="submit" class="blueBtn iconBtn" data-icons="s">Add Case</button>
            </p>
        </fieldset>
    <div class="working">
      <div class="loader"></div>
    </div>
    </form>
</section>

then in index.php there is a button to load this form

<div class="widget col-3 last">
                    <button class="windowForm blueBtn" data-form="forms/first_case.php">New Proxy Form</button>
                </div>

Run validation on Load() content

3 Answers3