Using jquery load function in combination with forms

Question

Currently developing a new website and looking to use jQuery's load() function to load content from different html pages into my main page.

load() works fine. Here's my current code. Main.html page in which content is loaded:

<div id="answer"></div>

Javascript with the load() function:

$(document).ready(function() {
    $("#answer").load( "game1content.html #p1Answer");

game1content.html content to load:

<div id="p1Answer">
    <p>Some text</p>
    <form id="answer1Form">
        <select name="answer1" id="answer1">
            <option value=""></option>
            <option value="1">Website 1</option>
            <option value="2">Website 2</option>
            <option value="3">Website 3</option>
            <option value="4">Website 4</option>
        </select>
        <button id="submitButton">SUBMIT</button>
    </form>
</div>

So it loads html correctly into the answer div. Perfect.

Now the challenge is that when I submit the form that's loaded, it refreshes the page. When I have the game1content content in the main.html file, instead of using the load() it doesn't reload and works fine. But if I use the load() function, it does reload and also changes the url.

Here's my function on submit:

$( "#answer1Form" ).submit(function(e) {
    e.preventDefault();
    console.log ("clicked");
});

I've tried Googling this issue, but can't find much. Also, tried changing .submit to onclick etc, but same result. Any ideas?

e.stopPropagation(); return false;

toto
– toto

2020-07-26 16:50:23 +00:00
Commented Jul 26, 2020 at 16:50 — toto
– toto, Commented Jul 26, 2020 at 16:50

Mosh Feu · Accepted Answer · 2020-07-27 07:02:09Z

1

That's because when you call .load, it fetch the page content and adds DOM elements but not bind them to events, so the form behave like it should, refresh the page.

In order to prevent the form from refreshing you should listen to .submit() exactly like you do in game1content.html after the DOM elements are added.

Like this:

$("#answer").load( "game1content.html #p1Answer", function() {
  $( "#answer1Form" ).submit(function(e) {
    e.preventDefault();
    console.log("clicked");
  });
});

edited Jul 27, 2020 at 7:02

answered Jul 26, 2020 at 13:12

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nickpma Over a year ago

Brilliant! Thanks so much for your help, makes my day!

Mosh Feu Over a year ago

Any time :) Good luck.

Collectives™ on Stack Overflow

Using jquery load function in combination with forms

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related