Submit form with Ajax and insert data to MySQL not working

Question

I am trying to submit a form using PHP and MySQL via Ajax, I am getting alert that form is submitted but no data inserted:

Following my code:

<script>
function myFunction() {
var fname = document.getElementById("fname").value;
var phone = document.getElementById("phone").value;
var faddress = document.getElementById("faddress").value;
var surveyername = document.getElementById("surveyername").value;
var surveyurl = document.getElementById("surveyurl").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'fname1=' + fname + '&phone1=' + phone + '&faddress1=' + faddress + '&surveyername1=' + surveyername + '&surveyurl1=' + surveyurl;
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function(html) {
	alert("Form Submitted");
}
});
return false;
}
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <label>Name :</label>
  <input id="fname" type="text"><br>
  <label>Phone :</label>
  <input id="phone" type="text">
  <label>Address :</label><br>
  <input id="faddress" type="text">
  <label>Surveyer Name :</label><br>
  <input id="surveyername" type="text">
  <input id="surveyurl" type="hidden" value="survey-url"><br>
  <input id="submit" onclick="myFunction()" type="button" value="Submit">
  <button type="submit" class="btn btn-lg custom-back-color" onclick="myFunction()">Submit form</button>
</div>
<!-- PHP code -->
<?php
// Fetching Values From URL
$fname2 = $_POST['fname1'];
$phone2 = $_POST['phone1'];
$faddress2 = $_POST['faddress1'];
$surveyername2 = $_POST['surveyername1'];
$surveyurl2 = $_POST['surveyurl1'];
$connection = mysqli_connect("localhost", "dbuser", "dbpass"); // Establishing Connection with Server..
if($connection === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "INSERT INTO form_element (fname, phone, faddress, surveyername, surveyurl) VALUES ('$fname2', '$phone2', '$faddress2','$surveyername2','$surveyurl2')";
if(mysqli_query($connection, $sql)){
    echo "Records inserted successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($connection); // Connection Closed
?>

EDIT:

CREATE TABLE form_element(
 fname varchar(255) NOT NULL,
 phone varchar(255) NOT NULL,
 faddress varchar(255) NOT NULL,
 surveyername varchar(255) NOT NULL,
 surveyurl varchar(255) NOT NULL
);

You should provide the table definition too, e.g. the CREATE TABLE... syntax, for anyone wishing to test your code. — PajuranCodes
– PajuranCodes, Commented Sep 29, 2018 at 11:29
try <input type="button" class="btn btn-lg custom-back-color" — Nikhil Ghuse
– Nikhil Ghuse, Commented Sep 29, 2018 at 11:37
@NikhilGhuse I do not have form tag so still input type button required? — Sanjeev Kumar
– Sanjeev Kumar, Commented Sep 29, 2018 at 11:44
If you are posting through ajax, you should always use a button/input of type "button". — PajuranCodes
– PajuranCodes, Commented Sep 29, 2018 at 11:50
Important: What's the name of the file in which your both code snippets reside? — PajuranCodes
– PajuranCodes, Commented Sep 29, 2018 at 11:53

flyingfox · Accepted Answer · 2018-09-29 11:46:04Z

1

First,it's bad practice to write parameter directly into your sql,it might led to SQL Injection,you had better use preparestatement to set the parameter.

Just for your problem,the reason is that,you have not pass the parameter directly to the sql

change

$sql = "INSERT INTO form_element (fname, phone, faddress, surveyername, surveyurl)
 VALUES ('$fname2', '$phone2', '$faddress2','$surveyername2','$surveyurl2')";

to

$sql = "INSERT INTO form_element (fname, phone, faddress, surveyername, surveyurl) 
     VALUES ('".$fname2."', '".$phone2."', '".$faddress2."','".$surveyername2."','".$surveyurl2."')";

answered Sep 29, 2018 at 11:46

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

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

5 Comments

Sanjeev Kumar Over a year ago

thanks for the solution, I tried this but unfortunately dont see any record updated in PHPmyAdmin

flyingfox Over a year ago

@SanjeevKumar have you checked the output in the log?

flyingfox Over a year ago

@SanjeevKumar it must have output in the log,since you have written echo in your code,you need to find where is the echo output,otherwise,there is something wrong in other place of your code

Sanjeev Kumar Over a year ago

Yes, I am getting this error on page on load

ERROR: Could not able to execute INSERT INTO form_element (fname, phone, faddress, surveyername, surveyurl) VALUES ('', '', '','','').

flyingfox Over a year ago

@SanjeevKumar then check the value of $fname2,$phone2 and so on

Collectives™ on Stack Overflow

Submit form with Ajax and insert data to MySQL not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related