Ajax function not working properly

Question 1

I am trying basic database insert using ajax and inserting part works fine the problem is that page is getting redirected after inserting completed.I had came acroos this issue before and found a solution (changed the src part like below)

src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

But that solution didt work this time what am i dıing wrong again?

this is index.php

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script type="text/javascript" src="site.js"></script>
</head>
<body>
<form action="process.php" id="myForm"method="post">
 <input type="text" name="uname"><br>
 <input type="text" name="pass"><br>
 <input type="text" name="fname"><br>
 <input type="text" name="lname"><br>
 <button id="submit" value="Insert"/> <br>
</form>
<div id="ack"></div>
</body>
</html>

and this is my script

 $("#submit").click( function() {
 $.post( $("#myForm").attr("action"),
 $("#myForm :input").serializeArray(),
 function(info) {
 $("#ack").empty();
 $("#ack").html(info);
 clear();
 });
});
$("#myForm").submit( function(event) {
 event.preventDefault();
 return false;
});
function clear() {
 $("#myForm :input").each( function() {
 $(this).val("");
 });
}

Question 2

You can add a type="button"attribute to your button so that it will not act as a submit button (the default type).

Question 3

The submit call doesn't really belong in the click handler, move it out and use event.preventDefault() if you want to avoid form submission by means other than the click handler you created.

$("#submit").click( function() {
 $.post( $("#myForm").attr("action"),
 $("#myForm :input").serializeArray(),
 function(info) {
 $("#ack").empty();
 $("#ack").html(info);
 clear();
 });
});
$("#myForm").submit( function(event) {
 event.preventDefault();
 return false;
});
function clear() {
 $("#myForm :input").each( function() {
 $(this).val("");
 });
}

Question 4

if the data from the fields of form is send to insert via $.post method so why there is a need of submitting the form via submit function separately ?

Question 5

There isn't a need. $('#myForm').submit(...) is not strictly necessary, but may serve as a fallback to prevent a situation where the browser submits the form by some means other than the user clicking the button (e.g. pressing enter in a text field).

Question 6

The other option would be to move the $.post(...) into the submit handler (after the event.preventDefault()), and either have the button click trigger the submit, or change the button into a standard <input type="submit">.

Question 7

@Mark H. thank you for your suggestion I have updated the script as you suggested but still getting redireted

Question 8

Switch to a .submit() event handler:

$("#myForm").submit(function(event) {
 $.post($("#myForm").attr("action"),
 $("#myForm :input").serializeArray(),
 function(info) {
 $("#ack").empty();
 $("#ack").html(info);
 clear();
 });
 event.preventDefault();
});

Question 9

Description

Wrap your $.post code in submit handler function.
Use event.preventDefault() function, to prevent the form submission.
Use $('#myform')[0].reset() for clearing the input fields instead of using the separate clear function.

Code

$("#myForm").submit(function (event) {
 $.post($("#myForm").attr("action"),
 $("#myForm :input").serializeArray(),
 function (info) {
 $("#ack").empty();
 $("#ack").html(info);
 // instead of using the clear() function
 // separately you may clear all the empty 
 // fields like this
 $('#myform')[0].reset(); 
 });
 event.preventDefault();
});

Question 10

Not sure if this will work with jQuery 1.8.2 but here is how I've accomplished this same thing in the past.

$('#myForm').on('submit', function(e) {
 e.preventDefault();
 var details = $('#myForm').serialize();
 $.post('process.php', details, function(data) {
 $('#ack').html(data);
 $('#myForm').trigger("reset");
 });
});

Mark H. 5486 silver badges16 bronze badges · Accepted Answer · 2016-09-30 19:56:01Z

1

The submit call doesn't really belong in the click handler, move it out and use event.preventDefault() if you want to avoid form submission by means other than the click handler you created.

$("#submit").click( function() {
 $.post( $("#myForm").attr("action"),
 $("#myForm :input").serializeArray(),
 function(info) {
 $("#ack").empty();
 $("#ack").html(info);
 clear();
 });
});
$("#myForm").submit( function(event) {
 event.preventDefault();
 return false;
});
function clear() {
 $("#myForm :input").each( function() {
 $(this).val("");
 });
}

Share

Improve this answer

answered Sep 30, 2016 at 19:56

Mark H.'s user avatar

Mark H.

5486 silver badges16 bronze badges

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

4 Comments

Ahmer Saeed

Ahmer Saeed Over a year ago

if the data from the fields of form is send to insert via $.post method so why there is a need of submitting the form via submit function separately ?

2016年09月30日T20:07:24.937Z+00:00

Mark H.

Mark H. Over a year ago

There isn't a need. $('#myForm').submit(...) is not strictly necessary, but may serve as a fallback to prevent a situation where the browser submits the form by some means other than the user clicking the button (e.g. pressing enter in a text field).

2016年09月30日T20:15:10.51Z+00:00

Mark H.

Mark H. Over a year ago

The other option would be to move the $.post(...) into the submit handler (after the event.preventDefault()), and either have the button click trigger the submit, or change the button into a standard <input type="submit">.

2016年09月30日T20:23:52.91Z+00:00

ali ak

ali ak Over a year ago

@Mark H. thank you for your suggestion I have updated the script as you suggested but still getting redireted

2016年10月01日T13:33:27.917Z+00:00

CollectivesTM on Stack Overflow

Ajax function not working properly

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related