AJAX JQUERY Php form not working

Question

issues are still there...pls help

I am unable to load external file while using AJAX jquery. I want to use Jquery ajax to pop up form then validate, enter data in mysql. but starting from a simple ajax function. kindly let me know where i am going wrong

<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>



<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax(
{
type: "POST",
url:"contact.php",
data: str,
success:function(result)
{
$("#div1").html(result);
}
});
});
});
</script>


</head>
<body>

<div id="contact_form">
<form id="ajax-contact-form" name="contact" action=""> 
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>

<INPUT class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div> 


</body>
</html>

and contact.php file is

<?php
echo "Hello";
?>

Khanh TO · Accepted Answer · 2013-08-10 09:37:18Z

3

You need to return false; to prevent the form from submitting and refreshing the page and check if your $("#div1") is missing.

$(document).ready(function(){
     $("#ajax-contact-form").submit(function(){
         var str = $(this).serialize();
         $.ajax(
         {
             type: "POST",
             url:"contact.php",
             data: str,
             success:function(result)
             {
                  $("#div1").html(result);
             }
          });
      return false;
    });
});

answered Aug 10, 2013 at 9:37

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

2 Comments

Manoj Purohit Over a year ago

please mention missing div1

Khanh TO Over a year ago

@legendinmaking: i think the div should be somewhere else that the OP does not show in his code. Anyway, updated the code to remind him in case he forgot. Thanks.

Rajesh · Accepted Answer · 2013-08-10 09:42:26Z

0

Simple. Since you are posting your form through ajax, you must prevent the default form submit by returning a false inside the submit method. Below is the correct version:

<script>
$(document).ready(function(){
  $("#ajax-contact-form").submit(function(){
   var str = $(this).serialize();
  $.ajax({
     type: "POST",
     url:"contact.php",
     data: str,
     success:function(result) {
        $("#div1").html(result);
     }
  });
  return false;
 });
});
</script>

answered Aug 10, 2013 at 9:42

Rajesh

3,7781 gold badge26 silver badges33 bronze badges

Comments

nyumerics · Accepted Answer · 2013-08-10 09:43:00Z

0

You can use a more simple form of post request as follows:

$.post("url",{var1: value1, var2: value2},function(data,status){
 if(status=='success')
   alert(data);
});

the second argument you can pass as many using this post request. The first argument url, if ofcourse relative to the document in which this js is loaded or you can give the exact url on the server.

According to your php file, data=='Hello'.

Similar is the procedure for any GET request also.

answered Aug 10, 2013 at 9:43

nyumerics

6,5873 gold badges31 silver badges52 bronze badges

Comments

Developer · Accepted Answer · 2013-08-10 09:45:37Z

0

Make sure you are missing the div1

please use

<div id="div1"><div>

edited Aug 10, 2013 at 9:45

answered Aug 10, 2013 at 9:38

Developer

2,7168 gold badges46 silver badges65 bronze badges

1 Comment

Developer Over a year ago

Sorry you are using ajax submit $("#ajax-contact-form").submit(function(){ you are unable to show the result. You need to use return false;

Collectives™ on Stack Overflow

AJAX JQUERY Php form not working

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related