15

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?

Chris Armstrong
  • 3,585
  • 12
  • 42
  • 47
  • 1
    add retrun false at the end...of form submit function/// – kobe Dec 06 '10 at 22:19
  • i added the answer as a comment first , shall i change it to answer?/ – kobe Dec 06 '10 at 22:34
  • @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? – Chris Armstrong Dec 06 '10 at 22:41

4 Answers4

23
  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.
Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • Thanks, the re-binding was causing problems! Will definitely look into that. – Chris Armstrong Dec 06 '10 at 22:33
  • 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 ._. – Praxis Ashelin Aug 08 '13 at 15:34
  • @DarkAshelin: The way to do it as of jQuery 1.7 is the `on` function. – Paolo Bergantino Aug 08 '13 at 16:13
  • @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? – Praxis Ashelin Aug 08 '13 at 19:05
  • 1
    @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. – Paolo Bergantino Aug 08 '13 at 23:59
4

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;
            });
wajiw
  • 12,239
  • 17
  • 54
  • 73
  • Thanks, that stopped the refreshing, but the function attached to .submit() doesn't seem to be firing off... any ideas why? – Chris Armstrong Dec 06 '10 at 22:34
  • 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...') – wajiw Dec 06 '10 at 22:42
  • I've actually got an alert sitting right after the .submit(function() { and it isn't firing off. Very strange... – Chris Armstrong Dec 06 '10 at 22:48
2

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

Aaron Hathaway
  • 4,280
  • 2
  • 19
  • 17
0

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

to <form>

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
huale Liao
  • 1
  • 1
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/20420212) – Govind Samrow Jul 27 '18 at 04:36
  • sorry, i dont understand – huale Liao Aug 01 '18 at 02:34