代码之家 › 专栏 › 技术社区 › enesh pal

在PHP中用Ajax在数据库中插入数据

html jquery php javascript

enesh pal · 技术社区 · 6 年前

Uncaught ReferenceError:insertData未在HTMLInputElement.onclick中定义(Modal.php:105)

在Modal.php文件中包含我的html和js。

我的 模式.php 文件

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .modal-header, h4, .close {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  </style>

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
    $("#myModal").modal();

  function insertData(){
    //$("#signup").click(function(){
    var Fname = $("#Fname").val(); debugger;
    var Lname = $("#Lname").val();
    var age =   $("#age").val();
    var email = $("#email").val();
    var password =  $("#password").val();

  // AJAX code to send data to php file.
  $.ajax({
            type: "POST",
            url: "Insert.php",
            data: {Fname:Fname,Lname:Lname,age:age,email:email,password:password},
            dataType: "JSON",
            success: function(data) {

                alert(data.message);

            },
            error:function(err){
                console.log(err.responseText);
            }
        });
        //});
  }
    });
});

</script>

</head>
<body>

<div class="container">
  <h2>Modal Sign Up Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Sign Up</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Sign Up</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">

          <form role="form" action="">
            <div class="form-group">
              <label for="Fname"><span class="glyphicon glyphicon-user"></span> First Name</label>
              <input type="text" class="form-control" id="Fname" placeholder="First Name">
            </div>

            <div class="form-group">
              <label for="Lname"><span class="glyphicon glyphicon-user"></span> Last Name</label>
              <input type="text" class="form-control" id="Lname" placeholder="Last Name">
            </div>

            <div class="form-group">
              <label for="age"><span class="glyphicon glyphicon-user"></span> Age</label>
              <input type="number" class="form-control" id="age" placeholder="Enter Age">
            </div>

            <div class="form-group">
              <label for="email"><span class="glyphicon glyphicon-eye-open">  </span> Email</label>
              <input type="email" class="form-control" id="email" placeholder="Enter Email">
            </div>



            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"> </span>  Password</label>
              <input type="text" class="form-control" id="password" placeholder="Enter password">
            </div>
            <!--<div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>-->
              <input type="button" id="signup" onclick="insertData()" class="btn btn-success btn-block" value="Sign Up"/>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p><a href="#">Log In</a></p>
          <!--<p><a href="#">Password?</a></p>-->
        </div>
      </div>

    </div>
  </div> 
</div>
</body>
</html>

这是我的 插入.php 文件。在Insert.php文件中,我编写了与在数据库中插入数据相关的所有php代码。

<?php
include("connection.php");

//if(isset($_POST['submit']))
      //  {

    $Fname=$_POST["Fname"];
    $Lname=$_POST["Lname"];
    $Age=$_POST["age"];
    $EmailId=$_POST["email"];
    $Password=$_POST["password"];

$Insert = "INSERT INTO simpleform (First_Name, Last_Name, Age, Email_Id, Password) VALUES ('".$Fname."', ".$Lname."', '".$Age."', '".$EmailId."', '".$Password."')";
$Query=mysqli_query($con, $Insert);

//print_r($Insert);


if(!$Query) 
        {
            echo mysqli_error();
            $successArr = array('status'=>'false','message'=>'Data not inserted');
            $successJson = json_encode($successArr);
        }
    else
    {
        $successArr = array('status'=>'true','message'=>'Data inserted successfully');
        $successJson = json_encode($successArr);

        //echo "Successfully Inserted";

    }
    echo $successJson;
    //  }

    header('Location: http://localhost/javascript/Modal.php');
    ?>

2 回复 | 直到 6 年前

Mohammad Intsar 6 年前

将insertData()javascript函数从id#myBtn的click事件以及document.ready函数中取出。因为它在click事件中,代码无法找到您的函数insertData();

你的剧本应该是这样的-

function insertData(){
    //$("#signup").click(function(){
    var Fname = $("#Fname").val(); debugger;
    var Lname = $("#Lname").val();
    var age =   $("#age").val();
    var email = $("#email").val();
    var password =  $("#password").val();

  // AJAX code to send data to php file.
  $.ajax({
            type: "POST",
            url: "Insert.php",
            data: {Fname:Fname,Lname:Lname,age:age,email:email,password:password},
            dataType: "JSON",
            success: function(data) {

                alert(data.message);

            },
            error:function(err){
                console.log(err.responseText);
            }
        });
        //});
  }
  
  
  $(document).ready(function(){
    $("#myBtn").click(function(){
    $("#myModal").modal();
    });
});

Exterminator 6 年前

你还没有关闭这个事件调用也许这就是它显示错误的原因。尝试在模式open命令之后关闭它,而不是在ajax调用之后在底部关闭它

$("#myBtn").click(function(){
    $("#myModal").modal();
}

我希望这会有帮助