CODEWITHSUNDEEP
javascriptjqueryevents
Zaaryk
Zaaryk

Reputation: 23

event.preventDefault not working for form created with JQuery

I am trying to build a popup chat client, similar to the one used by Facebook, using JQuery. In an attempt to maximize efficiency, each chat window is built with JQuery and appended into a container div whenever a link is clicked and is destroyed whenever the "x" Icon is clicked. All of that is working beautifully.

My issue comes from trying to use event.preventDefault() to stop the form from reloading the page.

demoPage.html:

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Form Demo</title>
    </head>
  <body>
  <a href="javascript:void(0);" id="startButton"><p>Click</p></a>
  <div id="m"></div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
        $(function () {
  $('#formID form').submit(function(event){
    event.preventDefault(); // prevent page reloading
     //do chat stuff
    return false;
});
});
        $(document).on('click', '#startButton', function(e) {
            var $form = $("<form/>", { id: "formID" });
            $input = $("<input/>", { class: "c4" });
            $button = $("<button/>", { class: "btn", type: "button", text: "button" });
            $form.append($input, $button).appendTo("#m");
            
        });
        </script>
  </body>
  </html>

When I add the form using JQuery, as above, the page reloads. However, if the form is coded into the HTML, like this:

demoPage2.html

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Form Demo</title>
    </head>
  <body>
  <a href="javascript:void(0);" id="startButton"><p>Click</p></a>
  <div id="m">
  <form id="formID"></form>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
        $(function () {
  $('#formID').submit(function(event){
    event.preventDefault(); // prevent page reloading
     //do chat stuff
    return false;
});
});
        $(document).on('click', '#startButton', function(e) {
            var $input = $("<input/>", { class: "c4" });
            $button = $("<button/>", { class: "btn", type: "button", text: "button" });
            $input.appendTo("#formID");
            $button.appendTo("#formID");
            
        });
        </script>
  </body>
  </html>

the form doesn't reload the page when the enter key is pressed, which is the desired result. This is an issue, as it means I would have to add an empty form for every possible chat window.

I have been working on this problem for 4 days now. I have tried putting preventDefault() in the form's onsubmit attribute, and then calling a myFormSubmit(), like this:

var $form = $("<form/>", { id: "formID", onsubmit: "event.preventDefault(); myFormSubmit();" });

and putting my actions in the myFormSubmit() function, but that also doesn't work. Googling my issue also revealed no helpful information.

Any explanations or suggestions would be extremely appreciated.

Upvotes: 1

Views: 1809

Answers (1)

Alwaysa Learner
Alwaysa Learner

Reputation: 496

Try this way:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="jquerylib/jquery-ui.css" />
    <script src="jquerylib/jquery.js"></script>
    <script src="jquerylib/jquery-ui.js"></script>

</head>
<body>
    <a id="startButton"><p>Click</p></a>
    <div id="m">
        <div id="m"></div>
        <!-- <form id="formID"></form>-->
    </div>
    <script>
        $(function () {

            $(document).on('click', '#startButton', function (e) {
                var $form = $("<form/>", { id: "formID" });
                $input = $("<input/>", { class: "c4" });
                $button = $("<button/>", { class: "btn", type: "button", text: "button" });
                $form.append($input, $button).appendTo("#m");

                $('#formID').submit(function (event) {
                    event.preventDefault(); // prevent page reloading
                    //do chat stuff
                    return false;
                });

            });

        });

    </script>
</body>
</html>

In your code, e.preventDefault is compiled by the browser before it can find an element with ID "formID". Hence the command will be not be attached to any item.

Upvotes: 1

Related Questions