Trying to submit a form to MySql with AJAX

Question

I am trying to post from a form to SQL by using Ajax.

However, when clicking the button to submit the form, no error is shown in the chrome console and it looks like the PHP is also not being called in the network tab. Could anyone please help me out or point me in the right direction?

HTML

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/signup.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

</head>

<body background-color="#000000">
<section class="section section-full bg-secondary overflow-hidden z-2">
    <div class="container z-2">
        <div class="row justify-content-center pt-6 pt-md-5 pb-0 mb-2">
            <div class="col-12 col-xl-7">
                <div class="card card-tertiary">
                    <div class="card-header text-center">
                        <span>Register</span>
                    </div>
                    <div class="card-body">
                        <p class="font-weight-bold">
                        </p>
                        <p class="card-text text-center">
                            Please enter your Email:
                        </p>
                        <form class="d-flex justify-content-between mb-2" method="POST" name="email-form" id="email-form">
                            <div id="name-group"  class="form-group">
                                <p>Name: <input type="text" id="uname" name="uname" class="form-control w-75" required/>
                            </div>
                            <div id="email-group" class="form-group">
                                <p>Email: <input type="text" id="uemail" name="uemail" class="form-control w-75" required/>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-sm mr-2 btn-tertiary border-dark" type="button" action="submit" id ="submit" name="submit">
                                <span class="btn-text">Sign-Up</span>
                                </button>
                            </div>
                            <div id="message"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>

signup.js Javascript

$(document).ready(function() {
$('#email-form').submit(function(e) {
e.preventDefault();

$.ajax({ 
  method: "POST",
  url: 'emailsend.php',
  data: {
    'uname': $('#uname').val(),
    'uemail': $('#uemail').val()
  }

  }).done(function( data ) { 
    var result = $.parseJSON(data);


    var str = '';
    if(result == 1) {
      str = 'User record saved successfully.';

    } else if( result == 2) {
      str == 'All fields are required.';
    } else{
      str = 'User data could not be saved. Please try again'; 
    }
  $("#message").css('color', 'red').html(str);
})
})
});

emailsend.php PHP

<?php

$dbhost = "localhost";
$dbuser = "------";
$dbpass = "------";
$db = "signup";
$data = '';

$result = 0;

$conn = new mysqli($dbhost, $dbuser, $dbpass, $db) or die("Connect failed: %s\n". $conn -> error);


if ($conn->connect_errno) {
printf("Connect failed: %s\n", $conn->connect_error);
exit();
}

$uname  = $_POST['uname'];
$email  = $_POST['uemail'];
/* validation */
if(!$uname || !$email){
$result = 2;
}elseif (!strpos($email, "@") || !strpos($email, ".")) {
$result = 3;
}else {
//SQL query to get results from database
$sql    = "INSERT INTO emails (name, email) VALUES ('$uname', '$email')";


$stmt   = $conn->prepare($sql);
$stmt->bind_param('ss', $uname, $email);
if($stmt->execute()){

    $result = 1;

 }
 }
 echo $result;
 $conn->close()
?>

Answer 1

since you have

$(document).ready(function() {
$('#email-form').submit(function(e) {

and

<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="button" action="submit" id ="submit" name="submit">

i dont see how will be submited when button type is not submit change the button type to submit like this

<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="submit" action="submit" id ="submit" name="submit">

Answer 2

First, change your button type attribute to submit instead of button :

<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="submit" action="submit" id ="submit" name="submit">

Second, change your JQuery version as

Bootstrap's JavaScript version 3.3 requires jQuery version 1.9.1 or higher, but lower than version 3

Trying to submit a form to MySql with AJAX

Question

2 answers

solution1
0 ACCPTED 2019-10-17 08:38:18

solution2
0 2019-10-17 08:40:32

Trying to submit a form to MySql with AJAX

Question

2 answers

solution1 0 ACCPTED 2019-10-17 08:38:18

solution2 0 2019-10-17 08:40:32

solution1
0 ACCPTED 2019-10-17 08:38:18

solution2
0 2019-10-17 08:40:32