2017-04-17 48 views
1

我想提交一个带有ajax jQuery的表单,并且我希望在提交表单时确认提醒。在PHP和Sweet Alert中使用OOP时出现ajax表单提交错误

表单时,我没有使用任何AJAX或JavaScript,但我想提交表单无需重新加载页面,我想警报点击提交取消按钮与甜美出现之前工作正常警报方法(即swal())。

这是我的HTML:

<form role="form" id="myform" class="countrysaveform" action="include/db_connect/actions.php" method= "POST" > 
<div class="form-body"> 
<div class="form-group"> 
<label>Cournty Name</label> 
<input type="text" name = "country" id="country" class="form-control" placeholder=""> 
</div> 
<div class="form-group"> 
<input type="hidden" name= "userip" id= "userip" class="form-control" value="<?php $ip=$_SERVER['REMOTE_ADDR']; echo $ip; ?>" placeholder=""> 
</div> 
<div class="form-group"> 
<label>Status</label> 
<select name ="status" id= "status" class="form-control"> 
<option value="active">Active</option> 
<option value="inactive">Inactive</option> 
</select> 
</div> 
</div> 
<div class="form-actions"> 
<button type="submit" name="save" id="save" class="btn blue">SAVE</button> 
<button type="button" class="btn default">Cancel</button> 
</div> 
</form> 

这是我class.php

<?php 
    require 'connection.php'; 

    //echo $current_timestamp; 

    class db_class extends db_connect{ 

     public function __construct(){ 
      $this->connect(); 

     } 

     public function create($country, $status, $ip){ 

      $stmt = $this->conn->prepare("INSERT INTO `ux_country` (`country_name`, `country_status`,`added_by_ip`,`added_date`,`added_on_time`) VALUES (?, ?, ?, now(), now())") or die($this->conn->error); 
      $stmt->bind_param("sss", $country, $status, $ip); 
      if($stmt->execute()){ 
       $stmt->close(); 
       $this->conn->close(); 
       return true; 
      } 
     } 

这是我Connection.php

<?php 
     define('db_host', 'localhost'); 
     define('db_user', 'root'); 
     define('db_pass', ''); 
     define('db_name', 'uniquesolutions'); 

     class db_connect{ 
      public $host = db_host; 
      public $user = db_user; 
      public $pass = db_pass; 
      public $dbname = db_name; 
      public $conn; 
      public $error; 

      public function connect(){ 
       $this->conn = new mysqli($this->host, $this->user, $this->pass, $this->dbname); 
       if(!$this->conn){ 
        $this->error = "Fatal Error: Can't connect to database" . $this->connect->connect_error(); 
        return false; 
       } 
      } 
     } 
    ?> 

这是我的action.php我在这里调用它来存储在数据库中。

require_once 'class.php'; 

    if(ISSET($_POST['save'])){ 
     $country = $_POST['country']; 
     $status = $_POST['status']; 
     $ip = $_POST['userip']; 
     //$current_timestamp = date(); 
     $conn = new db_class(); 
     $conn->create($country, $status, $ip); 
     header('location:../../Country_View.php'); 
    } 

这是MySQL数据库的结构:

TABLE `ux_country` (
    `country_id` int(11) NOT NULL, 
    `country_name` varchar(25) NOT NULL, 
    `country_status` varchar(12) NOT NULL, 
    `added_date` date NOT NULL, 
    `added_on_time` time NOT NULL, 
    `added_by_ip` varchar(20) NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=latin1; 

这是甜的,报警代码:

$(document).ready(function(){ 
    $('#myform').on('submit',function(e) { //Don't foget to change the id form 
    $.ajax({ 
     url:'include/db_connect/actions.php', //===PHP file name==== 
     data:$(this).serialize(), 
     type:'POST', 
     success:function(data){ 
     console.log(data); 
     //Success Message == 'Title', 'Message body', Last one leave as it is 
     swal("¡Success!", "Message sent!", "success"); 
     }, 
     error:function(data){ 
     //Error Message == 'Title', 'Message body', Last one leave as it is 
     swal("Oops...", "Something went wrong :(", "error"); 
     } 
    }); 
    e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click" 
    }); 
}); 
+1

所以,如果我明白,你只是想警报之前提交表单?你为什么不能在你的ajax调用之前移动'swal()'方法(即将它从你的回调方法中拉出来)?我错过了什么? – WillardSolutions

+0

@SarfarazDalawi我看到你评论如下:“_when我点击保存按钮它显示成功消息,但不存储在数据库中,我认为它不是调用该actions.php文件_”。请参阅我更新后的答案,我将PHP代码(即_action.php_)放在最后。 –

回答

1

在HTML变化

type="submit" 

type="button" 

在Javascript: 变化

$('#save').on('submit'.... 

到:

$('#save').on('click',function(e) { //Don't foget to change the id form 
     alert('Submitting form'); 
     $.ajax({ 
     ...... 

有关取消按钮的点击得到警报,添加ID到您的取消键:

<button type="button" class="btn default" id="cancelBtn">Cancel</button> 
$('#cancelBtn').on('click', function(){ 
    alert('sweet message'); 
    $("#myform").trigger('reset'); 

}); 
+0

感谢您的建议,但我的代码现在是这样的,但是当我点击保存按钮它显示成功消息,但不存储在分贝,我认为它不是调用该actions.php文件..请帮助 –

0

我想要t o提交表单,无需重新加载页面,我希望在提交提交和取消按钮之前使用Sweet alert方法提醒。实现这一

的一种方法是使用一个事件委托任何按钮点击。

$('#myform').on('submit',function(e) { //Don't foget to change the id form 

要:对于这一点,单击处理从改变

$(document).on('click', function(e) { 

然后可以随时点击一个按钮来执行preventDefault()呼叫。这可以通过检查事件目标的tagName来实现。

if (e.target.tagName.toUpperCase() == 'BUTTON') { 
    e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click" 
} 

这也可以使用实现jQuery的is()方法和event.stopPropogation()

var target = $(e.target); 
if (target.is('BUTTON')) { 
    e.stopPropogation(); 
} 

然后,一个ID属性添加到标记的取消的按钮。序列化表单时为数据呼叫的选项$就

if (target.attr('id') == 'save') { 
    swal('save clicked'); 
    //trigger AJAX request 
} 
else if (target.attr('id') == 'cancel') { 
    swal("cancel button clicked"); 
} 

然后:

<button type="button" class="btn default" id="cancel">Cancel</button> 

之后,ID属性可以使用.attr()单击处理托运(),请使用ID属性选择表格:

$.ajax({ 
    url:'include/db_connect/actions.php', //===PHP file name==== 
    data:$('#myform').serialize(), 

因此,.serialize()将不包含数据中的<button>,因为这些不是真正的表单元素。所以在PHP代码(即action.php的),检查一个输入(如国家)的名称,以确定是否数据应保存:

if(isset($_POST["country"])){ 

而且在该月底php代码,因为调用header()重定向到一个不同的位置是没有意义的,因为这个代码被异步调用(即通过AJAX)并且重定向(即响应代码3xx)不被遵循。通常在异步调用中返回一个字符串或JSON数据。

把这个放在一起,我们在下面有下面的代码。看到它在this phpfiddle中演示。

$(document).ready(function() { 
 
    $(document).on('click', function(e) { 
 
    var target = $(e.target); 
 
    if (target.is('BUTTON')) { 
 
     e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click" 
 
    } 
 
    if (target.attr('id') == 'save') { 
 
     swal('save clicked'); 
 
     //trigger AJAX request 
 
    } else if (target.attr('id') == 'cancel') { 
 
     swal("cancel button clicked"); 
 
    } 
 
    }); 
 
});
<link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script> 
 
<form role="form" id="myform" class="countrysaveform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> 
 
    <div class="form-body"> 
 
    <div class="form-group"> 
 
     <label>Cournty Name</label> 
 
     <input type="text" name="country" id="country" class="form-control" placeholder="" value="slobovia"> 
 
    </div> 
 
    <div class="form-group"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>Status</label> 
 
     <select name="status" id="status" class="form-control"> 
 
<option value="active">Active</option> 
 
<option value="inactive">Inactive</option> 
 
</select> 
 
    </div> 
 
    </div> 
 
    <div class="form-actions"> 
 
    <button type="submit" name="save" id="save" class="btn blue">SAVE</button> 
 
    <button type="button" class="btn default" id="cancel">Cancel</button> 
 
    </div> 
 
</form>