Adding items to a table in jquery

Question

I have an input box which i use to add items to a table in the db.

It looks like this:

<td>
  <form class="insCat" action="#" name="insertCat">
    <input name="categorienaam" type="text"> 
    <input class="insert" type="submit" value="nieuwe categorie">
  </form>
</td>

And i handle it like this in jquery

jQuery(".insert").click(function(){

  str = jQuery("form.insCat").serialize();
  console.log(str);

  jQuery.ajax({
    type: "POST",
    data: str + "&cmd=insert",
    url: "ajax_handler.php",
    success: function(msg){}
  });

  jQuery("div.result").empty();

});

But i can't see anything in my log since the page is refreshed after each insert. Which i don't want.

Are there ways around this?

jeroen.verhoest · Accepted Answer · 2009-07-17 10:35:10Z

4

You need to prevent the default event of the submit button:

    jQuery(".insert").click(function(e){
            e.preventDefault();

            ...your code...    

            return false;
    });

answered Jul 17, 2009 at 10:35

jeroen.verhoest

5,1933 gold badges29 silver badges27 bronze badges

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

Comments

Quentin · Accepted Answer · 2009-07-17 10:37:19Z

3

You are attaching the event handler to the submit button, and not stopping the execution of the default event. So the JS runs and then the form is submitted as normal.

First, set a more sensible action than "#" (a link to the top of the page) if the form gets submitted without JS.

Next, attach the event to the form, not the button. That way if it gets submitted through other means (such as the enter key being pressed on the text input) it will still work.

jQuery("form.insCat").bind("submit", yourFunction);

Then, edit your function so that it stops the default event action.

var yourFunction = function(event){
  // do whatever you like then...
  event.preventDefault();
};

answered Jul 17, 2009 at 10:37

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Adding items to a table in jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related