0

I am trying to do some Ajax and jQuery here, submitting a form while staying on the same page. I read the following topic to start what I wanted to do (which is consisting of several good examples) : jQuery AJAX submit form

Here is my HTML file :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>jQuery File Tree Demo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script src="jquery.js" type="text/javascript"></script>
        <script src="addTag.js" type="text/javascript"></script>
    </head>

    <body>
            <form id="form_addtag" method="post" name="form_addtag" action="add_tag.php">
                    <legend>Add a tag</legend>
                    <input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" />
                    <input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/>
                    <input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" />
                    <button type="submit" id="button_save_tag">Add</button>
            </form>     
    </body>

</html>

And the JS file :

$("form_addtag").submit(function(e) {
  e.preventDefault();
  var url = "add_tag.php"; // the script where you handle the form input.
  $.ajax({
    type: "POST",
    url: url,
    data: $("form_addtag").serialize(), // serializes the form's elements.
  });
});

The execution is perfect : I can fill the form, click on the Submit button and it will pass everything field to add_tag.php. However, I always end up on mydomain.com/add_tag.php while I wanted to stay on the first page.

Community
  • 1
  • 1
Shadeslayer
  • 15
  • 3

2 Answers2

4

Your selector is incorrect:

$("#form_addtag").submit(function(e) {

You need the leading # to indicate that you want to search for an element by its "id". Without that, you were telling jQuery to add an event handler to every <form_addtag> element it could find, which is of course an empty list.

It's sort-of a big stumbling block with jQuery that the library doesn't treat such situations as errors. It can't really, because that would make life even more difficult, but it's still something that causes everybody some pain now and then.

In this case, you could remove the "action" attribute from the form, though that'd mean the page wouldn't work at all without JavaScript.

Pointy
  • 371,531
  • 55
  • 528
  • 584
1

There are two problems.

  1. Your jQuery needs to either be executed after the element it refers to on the page exists, usually by placing the code before the closing body tag, or it should be wrapped in a document ready call in the head of the page by using:

    $( document ).ready(function() { // your code here;} );

  2. You're missing a # on your form selector. It should be: $("#form_addtag")

j08691
  • 190,436
  • 28
  • 232
  • 252