Submitting a form without refreshing the page

Question

I'm having a problem with jQuery(or maybe php). I want forms to be submitted without refreshing the page so i ended up with the following code but the problem is it doesn't work. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
                $("#submit").click(function() {
                var name = $("#name").val();

                var dataString = 'name='+ name;

                $.ajax({
                type: "POST",
                url: "p.php",
                data: dataString,
                success: function(){
                    alert("It works");

                }
                });
                return false;

            });
</script>
</head>

<body>
<form id="myForm" name="myForm" action="">
  <p>
    <label for="name"></label>
    <input type="text" name="name" id="name" />
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="Submit" />
  </p>
</form>
<br />
</body>
</html>

Processing Page:

<?php include("../includes/includes.php"); ?>
<?php $name = $_POST['name']; ?>
<?php $sql = "INSERT INTO xyz 
        (id, value) VALUES 
            (1, '{$name}')";
        $result = $database->query($sql);
?>

The page just stays idle. I'm not being able to figure out any problem. — shr3jn, Oct 08 '11 at 16:56
First thing is to see if it works without AJAX, then add it and check the js logs — Damien Pirsy, Oct 08 '11 at 17:00
any error in the firebug? have you specified the correct path to `p.php` — Rafay, Oct 08 '11 at 17:00
You're not answering, are there any JS error? do you have a JS console where to check them? what browser are you using? — Damien Pirsy, Oct 08 '11 at 17:03
thank you everyone for your help!! the problem was not wrapping the jQuery code inside $(function(){}); — shr3jn, Oct 08 '11 at 17:31
@AdamSack I just created that page to test all these stuff :) — shr3jn, Oct 10 '11 at 05:58

Rafay · Accepted Answer · 2011-10-08T17:21:09.527

4

i dont know why its not working but you can try like this

<form id="myForm" name="myForm" action="">
  <p>
    <label for="name"></label>
    <input type="text" name="name" id="name" />
  </p>  
  <p>
     <input type="button" name="submit" id="submit" value="Submit" />//change type to button
  </p>
</form>

also make an error callback

$(function(){
 $("#submit").click(function(e) {
                e.preventDefault();
                var name = $("#name").val();
                $.ajax({
                type: "POST",
                url: "p.php",
                data: {name:name},
                success: function(){
                    alert("It works");
                },
                error:function(e){alert("it failed");}
                });

            });   

});

edited Oct 08 '11 at 17:21

answered Oct 08 '11 at 17:13

Rafay

30,950
5
68
101

dreamwaver is showing error on this line error:function(e){alert("it failed");} – shr3jn Oct 08 '11 at 17:20
AH! my bad i missed a `,` after the success edited the answer, also i removed the `return false;` and used `e.preventDefault()` instead – Rafay Oct 08 '11 at 17:21
it was a syntax error i have fixed it in the edit it should work now with it too ... – Rafay Oct 08 '11 at 17:23
so what actually was causing the problem since it worked this way?? any idea?? – shr3jn Oct 08 '11 at 17:23
no idea in specific but i changed the input type to `button` also removed the `return false` may be that was causing the problem, also i wrapped the jquery code inside the ready handler `$(function(){});` that executes the code once the DOM is ready may be that was the case – Rafay Oct 08 '11 at 17:25
I found it!! The problem was i did not wrap the code inside $(function(){}); previously. – shr3jn Oct 08 '11 at 17:30
thats nice, always wrap the jquery code inside the `ready` handler so the elements are in the DOM before any bindings take place – Rafay Oct 08 '11 at 18:02

score 1 · Answer 2 · answered Oct 08 '11 at 16:53

1

You need to modify your form tag like this:

<form id="myForm" name="myForm" action="" onsubmit="return false;">

answered Oct 08 '11 at 16:53

Brian Glaz

15,468
4
37
55

It's better to use `.preventDefault()` in the jQuery, but it does the same thing. However, this isn't a solution - it'll just return false and not do any AJAX. – Bojangles Oct 08 '11 at 17:21

Submitting a form without refreshing the page

2 Answers2

Linked