1

I'm using jQuery's load() function to change content on a page dynamically. It's a application with different 'levels' but the URL never changes.

It's working fine except for the final screen I'm using. I've got a form with text inputs etc that I need to create some form validations for but I can't get on('submit') to work after the page load. I am using a callback function on the load function and I do run some simple jQuery CSS, etc. to content that is on the final_page.php so I know that it's successfully running the function AFTER the content is loaded.

I'm trying to simply just apply a preventDefault() to the form for now to confirm that it's working correctly but the form submits every time I get to that final page so it looks like the on() function doesn't get bound to the form selector.

Is there some sort of conflicting with submit and load?

$('#main_content').load('final_page.php', function(){
    $('#main_content').css({'height':'auto','padding-bottom':'25px','background':'#086c8c'});
    $('#hidden_input').attr('value', 'complete');

    //GOOD UP TO THIS POINT

    $('#final_form').on('submit',function(e){               
        e.preventDefault();
    });
});
MillerMedia
  • 3,651
  • 17
  • 71
  • 150
  • That code looks fine, which tells us that either your form doesn't have `id="final_form"` or you have more than one element with that `id` (which is invalid). – T.J. Crowder Apr 02 '14 at 06:13
  • I guess this post has your answer http://stackoverflow.com/questions/18545941/jquery-on-submit-event#answer-18545981 – Savaratkar Apr 02 '14 at 06:14
  • @theinsaneone: Delegation is a useful approach, but the OP code would work if the form had that `id` (and the `id` is unique, as required). Delegation isn't required, and may or may not be useful depending on what the actual problem is. – T.J. Crowder Apr 02 '14 at 06:15
  • can you log the value of `$('#final_form').length` to see whether the element is present using `console.log('testing', $('#final_form').length, $('[id=final_form']).length)` inside the load callback – Arun P Johny Apr 02 '14 at 06:17
  • Good call @ArunPJohny, I'll try that now. – MillerMedia Apr 02 '14 at 06:38
  • @ArunPJohny, length is 1 so it's recognizing it in the code... – MillerMedia Apr 02 '14 at 06:41
  • both the counts are returning 1? can you also try `console.log('test2', $('[id=final_form']).get())` – Arun P Johny Apr 02 '14 at 06:47
  • So for the first one `console.log('testing', $('#final_form').length, $('[id=final_form]').length)`, I get `testing 1 2`. The second one, `console.log('test2', $('[id=final_form]').get())` gives me `test2 []`. Does that shed any light on it for you? I'm not following exactly what you're doing with the [id=final_form]. It did help me notice that the form is being loaded twice on the page. I'm assuming that wouldn't be a problem though because the `on()` function would apply to both of them anyway? – MillerMedia Apr 03 '14 at 07:03
  • That helped! I deleted the first one and it worked. You can submit an answer so I can accept if you'd like. Thanks so much. – MillerMedia Apr 03 '14 at 07:05

0 Answers0