Submitting Form using jquery AJAX [duplicate]

Question

I am trying to submit my form using jQuery ajax, but my data isn't posting to PHP it returns empty array nothing in $_POST array.

This is my code - here is my form:

<form action = "/webdevelopmentpakistan/send_mail.php" method = "post" class = "myForm" > <div class="row"> <div class="col-md-3 col-sm-12"> <div class="form-group"> <input class="form-control" id="fname" type="text" required name= "full_name" placeholder="Full Name" /> </div> </div> <div class="col-md-3 col-sm-12"> <div class="form-group"> <input class="form-control" type="tel" required name = "phone" placeholder="+92" id="phone" onkeypress="return isNumberKey(event)" /> </div> </div> <div class="col-md-3 col-sm-12"> <div class="form-group"> <input class="form-control" type="email" required name = "email" id="email" placeholder="Email"/> </div> </div> <div class="col-md-3 col-sm-12"> <div class="form-group"> <input class="btn popup" type="submit" name = "submit" value="CONTACT OUR CONSULTANT"/> </div> </div> </div> </form>

its an ajax part:

 $('form').on('submit', function (e) { e.preventDefault(); var url = $(this).attr("action"); var form_data = $(this).serialize(); $.ajax({ type: 'POST', url: url, data: $('.myForm').serialize() , dataType : 'JSON', //contentType: "application/x-www-form-urlencoded", success: function (data) { // here I'm adding data as a parameter which stores the response console.log(data); // instead of alert I'm changing this to console.log which logs all the response in console. }, error:function(xhr, textStatus, thrownError, data) { console.log("Error: " + thrownError); console.log("Error: " + textStatus); } }); // var popup = document.getElementById("myPopup"); // popup.classList.toggle("show"); console.log(form_data); });

PHP CODE using at other page:

if(isset($_POST)) { echo json_encode($_POST); }

and this is my serialize array which I am getting on submission of form but it isn't getting passed to php

full_name=talha&phone=012345678&email=admin%40gmail.com

Check what the actual request looks like in your browser dev tools, network panel. — 04FS
– 04FS, Commented Jan 30, 2020 at 12:58
no its still same data is fetched through serialization but its isnt getting post to php . — Talha Arif
– Talha Arif, Commented Jan 30, 2020 at 13:00
when i fetch using $_POST['full_name'] is says undefined index — Talha Arif
– Talha Arif, Commented Jan 30, 2020 at 13:01
No argument was passed in success function - function(data) — Ritesh Khandekar
– Ritesh Khandekar, Commented Jan 30, 2020 at 13:02
nothing changed data still not passing.. Notice: Undefined index: full_name in C:\xampp\htdocs\webdevelopmentpakistan\web-development-in-pakistan.php on line 6 — Talha Arif
– Talha Arif, Commented Jan 30, 2020 at 13:07

Prateik Darji · Accepted Answer · 2020-01-30 13:15:55Z

3

welcome to stackoverflow, here are the changes, hope it will works

$.ajax({ type: 'POST', url: url, data: $('.myForm').serialize() , dataType : 'json', // changing data type to json success: function (data) { // here I'm adding data as a parameter which stores the response console.log(data); // instead of alert I'm changing this to console.log which logs all the response in console. } });

in php

if(isset($_POST)) { echo json_encode($_POST); }

this should print array of post parameters in your console, however you will get an array in php.

answered Jan 30, 2020 at 13:15

Prateik Darji

2,3071 gold badge15 silver badges29 bronze badges

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

12 Comments

Talha Arif Over a year ago

actually i am posting data to the same page in which the form is and after posting data i am showing a popup modal in which i am using recaptcha nd also i am storing posted data in variables so i can post them again after verifying recaptcha

Talha Arif Over a year ago

success: function (data) { console.log(data); } success function is not working json gves error reponse ..

Prateik Darji Over a year ago

and what is the error in console can you please check?

Talha Arif Over a year ago

Error: SyntaxError: Unexpected token a in JSON at position 2 this is the error i am getting

Talha Arif Over a year ago

i have solved it .. thanks alot for your time and help i just change serialized array into JSON object using JSON.stringify($(this).serialize()) and this done the job , thanks again for helping through this .

|

alithedeveloper · Accepted Answer · 2020-01-30 13:24:30Z

The form action needs to be either absolute url i.e. https://somewebsite.com or a relative url on you site so ideally it should be /some-url.php. Read about form action here

So your form opening tag should be,

<form action = "/web-development-in-pakistan.php" method = "post" class = "myForm" target="_self">

So in your javascript code when you do

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

I also believe that in your ajax call, the type needs to be method, so,

$.ajax({ method: "POST", ..... })

Collectives™ on Stack Overflow

Submitting Form using jquery AJAX [duplicate]

2 Answers 2

12 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Linked

Related