Question

的index.php

    <script>
        $(document).ready(function(){
          $(".submit").click(function(){
var formname = $(this).parents("form").attr("id");
            cname = $("#"+formname+" #cname").val();
            name = $("#"+formname+" #name").val();
            fname = $("#"+formname+" #fname").val();
            email = $("#"+formname+" #email").val();
            phone = $("#"+formname+" #phone").val();
            x = $("#"+formname+" #x").val();
            xii = $("#"+formname+" #xii").val();
            qualify = $("#"+formname+" #qualify").val();
            $.ajax({
              type:"POST",
              data:{"cname":cname,"name":name,"fname":fname,"email":email,"phone":phone,"x":x,"xii":xii,"qualify":qualify},
              url:"enquiry.php",
              success:function(data){
                $("#"+formname+" #msg").html(data);
              }
            });
          });
        });
    </script>
<a href='#' id='enquire' data-toggle="modal" data-target="#myModal<?php echo $id; ?>">Enquire</a></span>
<div class="modal fade" id="myModal<?php echo $id; ?>" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div id="msg"></div>
        <form method="post" name="formid<?php echo $id; ?>" name="formname<?php echo $id; ?>">
            <input type="text" name="name" id="name" placeholder="Enter Your Name">
            <input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/>
            <input type="text" name="email" id="email" placeholder="Enter Your Email">
            <input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/>
            <input type="text" name="x" id="x" placeholder="Enter Your X Percent">
            <input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/>
            <input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/>
            <input type="submit" class="submit" name="" id="submit" value="submit" class="btn btn-primary">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div> 
  </div>
</div>

enquiry.php

<?php 
    $cname = $_POST['cname'];
    $name = $_POST['name'];
    $fname = $_POST['fname'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $x = $_POST['x'];
    $xii = $_POST['xii'];
    $qualify = $_POST['qualify'];
    $sql = "insert into student_enquiry(college_name,name,father,email,phone,x_percent,xii_percent,qualify)values('$cname','$name','$fname','$email','$phone','$x','$xii','$qualify')";
    $result = mysqli_query($link,$sql);
    if($result == true)
    {
        echo "<p style='color:green;text-align:center;'>your data has been submitted successfully</p>";
    }
    else
    {
        echo "<p style='color:red;text-align:center;'>Error!</p>"
    }
?>

在这段代码中我创建了一个在其中有表单的模态，我想使用jquery / ajax将表单值插入到数据库中。当我按下提交按钮时，它会隐藏模态并显示没有像成功的消息或任何错误消息。那么，我该怎么做？请帮忙。

谢谢

Answer 1

为表单元素提供 id 。

 <form method="post" id="registration">

提交表格如下：

var formdata = jQuery('#registration').serialize();
 jQuery.ajax({
        type: 'POST',
        url: 'enquiry.php',
        dataType: 'json',
        data: formdata,
        success: function(result) {
            $("#msg").html(data);
        }

    });

Answer 2

请尝试使用ajax保存数据的示例，

JS / CDN

<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
      $("#submit").click(function(){
        cname = $("#cname").val();
        name = $("#name").val();
        fname = $("#fname").val();
        email = $("#email").val();
        phone = $("#phone").val();
        x = $("#x").val();
        xii = $("#xii").val();
        qualify = $("#qualify").val();
        $.ajax({
          type:"POST",
          data:{"cname":cname,"name":name,"fname":fname,"email":email,"phone":phone,"x":x,"xii":xii,"qualify":qualify},
          url:"enquiry.php",
          success:function(data){
            $("#msg").html(data);
          }
        });
      });
    });
</script>

HTML

<a href='#' id='enquire' data-toggle="modal" data-target="#myModal">Enquire</a></span>
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div id="msg"></div>
        <form method="post">
            <input type="text" name="name" id="name" placeholder="Enter Your Name">
            <input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/>
            <input type="text" name="email" id="email" placeholder="Enter Your Email">
            <input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/>
            <input type="text" name="x" id="x" placeholder="Enter Your X Percent">
            <input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/>
            <input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/>
            <input type="button" name="" id="submit" value="submit" class="btn btn-primary">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div> 
  </div>
</div>

Ajax文件。在此文件中，您可以获取发布的数据并保存它们。

<?php
// Your mysql query.
$insert = mysql_query("insert into `table_name` set `field1`=''");
if($insert){
    echo "Inserted successfully !";
}
else{
    echo "Not Inserted !";
}
?>

Answer 3

检查下面的jquery代码和html代码

$(document).ready(function () {
    $(".submit").click(function () {
        var formname = "formid"+$(this).attr("data-id");
        cname = $("#" + formname + " #cname").val();
        name = $("#" + formname + " #name").val();
        fname = $("#" + formname + " #fname").val();
        email = $("#" + formname + " #email").val();
        phone = $("#" + formname + " #phone").val();
        x = $("#" + formname + " #x").val();
        xii = $("#" + formname + " #xii").val();
        qualify = $("#" + formname + " #qualify").val();
        $.ajax({
            type: "POST",
            data: {"cname": cname, "name": name, "fname": fname, "email": email, "phone": phone, "x": x, "xii": xii, "qualify": qualify},
            url: "enquiry.php",
            success: function (data) {
                $("#" + formname + " #msg").html(data);
            }
        });
    });
});

HTML CODE

<a href='#' id='enquire' data-toggle="modal" data-target="#myModal<?php echo $id; ?>">Enquire</a></span>
<div class="modal fade" id="myModal<?php echo $id; ?>" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div id="msg"></div>
        <form method="post" name="formid<?php echo $id; ?>" name="formid<?php echo $id; ?>">
            <input type="text" name="name" id="name" placeholder="Enter Your Name">
            <input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/>
            <input type="text" name="email" id="email" placeholder="Enter Your Email">
            <input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/>
            <input type="text" name="x" id="x" placeholder="Enter Your X Percent">
            <input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/>
            <input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/>
            <input type="button" class="submit" name="submit" data-id="<?php echo $id; ?>" id="submit" value="submit" class="btn btn-primary">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div> 
  </div>

</div>

如何使用jquery / ajax将值插入数据库？

3 个答案: