2017-04-17 49 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>