Попытка отправить форму в MySql с помощью AJAX - PullRequest
0 голосов
/ 17 октября 2019

Я пытаюсь отправить из формы в SQL с помощью Ajax.

Однако при нажатии кнопки для отправки формы в chrome-консоли не отображается ошибка, и похоже, что PHP также не вызывается на вкладке сети. Может ли кто-нибудь помочь мне или указать мне правильное направление?

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()
?>

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

Во-первых, измените свой атрибут type кнопки на submit вместо button:

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

Во-вторых, измените версию JQuery на

Bootstrap в версии JavaScript 3.3 требуется версия jQuery 1.9.1 или выше, но ниже версии 3

0 голосов
/ 17 октября 2019

, поскольку у вас есть

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

и

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

Я не вижу, как будут отправлены, когда тип кнопки не отправлен, измените тип кнопки, чтобы отправить как этот

<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="submit" action="submit" id ="submit" name="submit">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...