Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery form.submit() refreshing page instead of submitting

I'm using .submit() to detect when a form is submitted, but instead of performing its attached function, it's refreshing the page.

I'm building a tool for drawing family tree diagrams (using nested lists) at http://chris-armstrong.com/familytree .

To add a descendent, you turn controls on, and it adds <li class="add_member">+</li> to each <ul> (or generation).

When you click on an <li class="add_member">+</li> element, it replaces the + with an <form class="add_member> consisting of an <input> and a <submit> button. I've then used $("form.add_member").submit() to detect when the submit button is clicked, and it should then replace the form with the contents of the <input>, however at this point it just refreshes the page (and adds a ? to the URL).

Any ideas what I'm doing wrong? I've attached the whole function below.

function addAddListeners() {
            $('li.add_member').click(function(){

            //create input form
            $(this).html("<form class='add_member'><input id='fn_' placeholder='Name' required autofocus /><button type='submit'>Add</button></form>")

            //listen for input form submission
            $("form.add_member").submit(function(){

            //if input form isn't blank, create new li element with content of form, else go back to the add_member li
            if($('form.add_member').val()) {
                        $(this).replaceWith('<li><span class="vcard" title="Click to edit this members details"><span class="edit fn">'+$('input#fn_').val()+'</span></span><ul><li class="add_member">+</li></ul></li><li class="add_member">+</li>'); 
                        addEditListeners();
                        addAddListeners();  
                    } else {
                        alert("no change");
                    $(this).html("+");
                    }
                });

            });
        }

EDIT: Adding return false; stops the page refreshing, but the function attached to .submit() doesn't seem to be firing off, any ideas why?

like image 669
Chris Armstrong Avatar asked Dec 06 '10 22:12

Chris Armstrong


People also ask

Why does page refresh on form submit?

The form element has an onSubmit handler, so every time the button is clicked or the Enter key is pressed, the handleSubmit function is invoked. By default, the browser will refresh the page when a form submission event is triggered.

Why form submit is not working in jQuery?

The NUMBER ONE error is having ANYTHING with the reserved word submit as ID or NAME in your form. If you plan to call . submit() on the form AND the form has submit as id or name on any form element, then you need to rename that form element, since the form's submit method/handler is shadowed by the name/id attribute.

How do I stop jQuery from refreshing?

You can use event. preventDefault() to prevent the default event (click) from occurring.


2 Answers

  1. You need to return false; or event.preventDefault(); from the submit function to prevent the default form action from happening.
  2. You should look into jQuery on with delegation so you don't have to rebind events when new elements are added to the DOM.
like image 66
Paolo Bergantino Avatar answered Oct 21 '22 10:10

Paolo Bergantino


Add a return: false; to your submit function:

$("form.add_member").submit(function(){

            //if input form isn't blank, create new li element with content of form, else go back to the add_member li
            if($('form.add_member').val()) {
                        $(this).replaceWith('<li><span class="vcard" title="Click to edit this members details"><span class="edit fn">'+$('input#fn_').val()+'</span></span><ul><li class="add_member">+</li></ul></li><li class="add_member">+</li>'); 
                        addEditListeners();
                        addAddListeners();  
                    } else {
                        alert("no change");
                    $(this).html("+");
                    }
                });
            return false;
            });
like image 36
wajiw Avatar answered Oct 21 '22 11:10

wajiw