Submit a Form Using Jquery Ajax

Question

Fiddle And Code:

$("form.signupform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
  $.post(url, data, function(data) { 
    try {
        data = JSON.parse(data);
		$(.result).html(data.result + " Watchlist");

    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="result"></p>
<form class="signupform" method="post" action="admin/signupinsert.php" onsubmit="this.onsubmit=function(){return false;}">

    <input type="text" name="firstname" />
	  <input type="submit" value="Sign Up"/>

</form>

admin/signupinsert.php code:

// Insert into DB code in PHP

$response = new \stdClass();
$response->result = "".$result."";
die(json_encode($response));

I am trying to submit this form using My Jquery Ajax Code. And the signupinsert.php file will return a value in $result variable. I am trying to print it inside <p class="result"></p>

But, the code re-directs users to signupinsert.php page.

What's wrong?

Alex Andrei · Accepted Answer · 2017-08-23 11:58:08Z

3

you must prevent the default action of submitting the form

$("form.signupform").submit(function(e) {

    e.preventDefault(); // <-- add this

    var data = $(this).serialize();
    var url = $(this).attr("action");

also, in your php file return proper JSON and avoid parsing the response in javascript with JSON.parse(data);

the output in your php file should look like this

$response = new \stdClass();
$response->result = $result;

header('Content-Type: application/json');
print json_encode($response);

and in your success handler just process the data parameter as a normal json object

$.post(url, data, function(data) { 
    $(.result).html(data.result + " Watchlist");
}

Also, just a curiosity, what is this supposed to do?

$response->result = "".$result."";

Update:
I just realized why you had most of the issues:

$('.result').html(data.result + " Watchlist");
  ^       ^

see the missing quotes

edited Aug 23, 2017 at 11:58

answered Aug 23, 2017 at 11:39

Alex Andrei

7,2763 gold badges30 silver badges44 bronze badges

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

9 Comments

Toby Over a year ago

Here is my updated code: jsfiddle.net/pmdodbkp/3 But sir, It still re-direct me to signupinsert.php page

Toby Over a year ago

$response->result = "".$result.""; In my signupinsert.php file, I give some values to $result, which I want the user to see. So i am sending them back to the main page

Toby Over a year ago

I was using the same code in my other website (insert movies to watchlist using ajax), and it is working perfectly fine. But don't know, what's wrong here.

Alex Andrei Over a year ago

I mean the quotes before and after $result

Benjamin Keller Over a year ago

Another question would be why the onsubmit attribute... I would still understand if it was something like onsubmit="executeHandler(); return false;"

|

Therichpost · Accepted Answer · 2017-08-23 11:32:38Z

0

you are redirecting because of action:

action="admin/signupinsert.php"
var url = $(this).attr("action");

got me?

answered Aug 23, 2017 at 11:32

Therichpost

1,8132 gold badges15 silver badges19 bronze badges

5 Comments

Toby Over a year ago

Not really. It is still supposed to work, I guess. Can you edit the fiddle and edit your answer please?

Therichpost Over a year ago

Please $.ajax instead of $.post

Toby Over a year ago

Same result bro

Therichpost Over a year ago

remove action from form and add that into url variable var url = "admin/signupinsert.php";

Toby Over a year ago

This just stop the page re-directing to signupinsert.php....Now it does not even run the code + it reloads the current form page bro

Collectives™ on Stack Overflow

Submit a Form Using Jquery Ajax

2 Answers 2

9 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related