jQuery form.submit() refreshing page instead of submitting

Question

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?

Watercool

add retrun false at the end...of form submit function/// – Chu

i added the answer as a comment first , shall i change it to answer?/ – Chu

@gov sorry, everyone answered around the same time, so I went with the one that gave the most detail (thinking about what would be most useful to people who may be looking up the question in the future). Thanks for your help though, don't suppose you'd have an idea about the second problem? – Watercool

Answer 1

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.

Terenceterencio

Thanks, the re-binding was causing problems! Will definitely look into that. – Watercool

Oh my god for 3 years I've been unbinding and rebinding all of my events whenever I add a new element to my DOM. I can't believe I never found out about delegate ._. – Gabbard

@DarkAshelin: The way to do it as of jQuery 1.7 is the on function. – Terenceterencio

@PaoloBergantino: on() does not seem to automatically bind to elements that are added to the DOM afterwards, unlike delegate(). Or am I doing something wrong? – Gabbard

@DarkAshelin: Read the documentation carefully to understand why, but if you do $('div').on('click', function() { ... }); that is a "direct" bind (ie, there is no delegation done) but if you do something like $('div').on('click', 'a.delete', function() { }); it is a delegated handler that works for future elements as well. – Terenceterencio

Answer 2

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;
            });

Alesandrini

Thanks, that stopped the refreshing, but the function attached to .submit() doesn't seem to be firing off... any ideas why? – Watercool

I'd alert $('form.add_member').val() and make sure it's returning something valid. Maybe change that line to if($('form.add_member').val() == '...actual element value...') – Alesandrini

I've actually got an alert sitting right after the .submit(function() { and it isn't firing off. Very strange... – Watercool

Answer 3

I think you need to return false; at the end of your .submit().

Nympho

is it within the submit function, or directly after? – Watercool

Answer 4

add this:action="javascript:void(null)"

to <form>

Sanderson

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Gumbo

sorry, i dont understand – Sanderson