2016-03-02 85 views
0

我是PHP MYSQL JQUERY的新手,我有一個Jquery Mobile表單,我想將表單數據提交給mySql,然後切換到#pageTwo移動頁面。這似乎應該很容易做,但我似乎無法弄清楚。Jquery在php腳本運行之前驗證更改頁面

<body> 
<div data-role="page" id="pageone"> 
    <?php include 'connectDB.php' ?> 
    <div data-role="header"> 
    <h1>Order Request Form</h1> 
    </div> 
<div data-role="main" class="ui-content"> 
<div class="ui-field-contain"> 
    <form method="post" id="ACform" name="ACform">   
     <div> 
     <label for="onSiteName" class="ui-hidden-accessible">On Site Contact:</label> 
     <input type="text" name="onSiteName" id="onSiteName" data-clear-btn="true" placeholder="On Site Contact name..." required> 
     </div> 
     <div> 
     <label for="onSiteNumber" class="ui-hidden-accessible">On Site Contact Number:</label> 
     <input type="tel" name="onSiteNumber" id="onSiteNumber" data-clear-btn="true" placeholder="On Site Contact number..." required> 
     </div> 
     <div> 
     <label for="adminContactName" class="ui-hidden-accessible">Administrator Contact:</label> 
     <select name="adminContactDropDown" id="adminContactDropDown" required> 
     <option value="">Admin Contact</option> 
     <option value="foo">foo</option> 
     <option value="bar">bar</option> 
     <option value="Other">Other</option> 
     </select> 
      </div> 
      <div> 
      <input type="text" name="adminContactName" id="adminContactName" data-clear-btn="true" placeholder="Administrator Contact name..." required> 
      <label for="adminContactNumber" class="ui-hidden-accessible">Administrator Contact Number:</label> 
      <input type="tel" name="adminContactNumber" id="adminContactNumber" data-clear-btn="true" placeholder="Administrator Contact number..." required> 
     </div> 
<script> 
    $('#ACform').validate({ 
     messages: { 
     onSiteName: {required: "Please enter the on-site contact name"}, 
     onSiteNumber: {required: "Please enter the on-site contacts number"}, 
     adminContactDropDown: {required: "Please select an admin contact"}, 
     adminContactName: {required: "Please enter an admin contact name"}, 
     adminContactNumber: {required: "Please enter an admin contact number"}, 
     }, 
     errorPlacement: function (error, element) { 
      error.insertAfter($(element).parent()); 
     }, 
     submitHandler: function (form) { 
      form.submit(); 
      ':mobile-pagecontainer'.pagecontainer('change', '#pagetwo',  { 
      reload: false 
       }); 
      return false; 
      } 
     }); 
</script> 
<?php include 'submit.php' ?> 
    <div> 
     <input type="reset" name="reset" value="Reset" id="clear"> 
     <input type="submit" name="submit" value="Submit"><br/> 
    </div> 
     </form> 
     </div> 
    </div> 

    <div data-role="footer"> 
    <h1><img src="logo.png" align="middle" width="160" height="26"/></h1> 
    </div> 
</div> 

<!--Page two--> 
<div data-role="page" data-dialog="true" id="pagetwo"> 
    <div data-role="header"> 
    <h1>A/C Order Request Sent!</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
     <?php echo $output; ?> 
    <p>Thank you for submitting your order request. Your request will be reviewed by one of our sales representatives and you will be contacted shortly.</p> 
    <div align="right"><a href="#pageone" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right">Place another order</a></div> 
    </div> 

    <div data-role="footer"> 
    <h1><img src="logo.png" align="middle" width="160" height="26"/></h1> 
    </div> 

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

submit.php

<?php $jobName = $delDate = $delTimeFrom = $useDate = $startTime = $puDate = $puTimeFrom = $address = $address2 = $zip = $city = $state = $delArea = $onSiteName = $onSiteNumber = $adminContactName = $adminContactNumber = $ACtotal = ''; 
    if ($_POST) { 
    $onSiteName = test_input($_POST["onSiteName"]); 
    $onSiteNumber = test_input($_POST["onSiteNumber"]); 
    $adminContactName = test_input($_POST["adminContactName"]); 
    $adminContactNumber = test_input($_POST["adminContactNumber"]); 


    $sql = "INSERT INTO tbl_orders (onSiteName , onSiteNumber , adminContactName , adminContactNumber) 
    VALUES ('$onSiteName' , '$onSiteNumber' , '$adminContactName' , '$adminContactNumber')";} 

    function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data;} 

     $output = ''; 
     if ($conn->query($sql) === TRUE) { 
$output .= "New record created successfully"; 
    } else { 
     $output .= "Error: " . $sql . "<br>" . $conn->error; 
    } 

    ?> 

我曾試圖刪除submitHandler,它正確提交表單,但它不改變頁面和破壞頁面(未顯示)時,在所有其他的JavaScript它重新加載。但是,當我有submitHandler時,頁面會更改,但表單不會提交。

編輯

基於邁克爾的建議,我想下面的代碼,這給了我一個 「錯誤加載頁面」 錯誤:

submitHandler: function (form) { 
    $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', { 
    reload: false 
    }); 
return false; 
} 
form.submit(); 
}); 

我也試過:

submitHandler: function (form) { 
    $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', { 
    reload: false 
    }); 
return false; 
form.submit(); 
} 
}); 

歷時我到第二頁但未提交表格

+0

'form.submit();'建議不起作用嗎? – Michael

回答

1

當您使用submitHandler方法,然後您需要提交表單。檢查這裏:http://jqueryvalidation.org/documentation/

$("#myform").validate({ 
    submitHandler: function(form) { 
     form.submit(); 
    } 
}); 

編輯

爲了清楚起見,我已刪除了第一個編輯。

編輯#2

這裏的HTML:

<html> 
<!-- Added the head just to make sure everything is included --> 
<head> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
    <!-- Page One --> 
    <div data-role="page" id="pageone"> 
     <div data-role="header"> 
      <h1>Order Request Form</h1> 
     </div> 
     <div data-role="main" class="ui-content"> 
      <div class="ui-field-contain"> 
       <form method="post" id="ACform" name="ACform">   
        <div> 
         <label for="onSiteName" class="ui-hidden-accessible">On Site Contact:</label> 
         <input type="text" name="onSiteName" id="onSiteName" data-clear-btn="true" placeholder="On Site Contact name..." required> 
        </div> 
        <div> 
         <label for="onSiteNumber" class="ui-hidden-accessible">On Site Contact Number:</label> 
         <input type="tel" name="onSiteNumber" id="onSiteNumber" data-clear-btn="true" placeholder="On Site Contact number..." required> 
        </div> 
        <div> 
         <label for="adminContactName" class="ui-hidden-accessible">Administrator Contact:</label> 
         <select name="adminContactDropDown" id="adminContactDropDown" required> 
          <option value="">Admin Contact</option> 
          <option value="foo">foo</option> 
          <option value="bar">bar</option> 
          <option value="Other">Other</option> 
         </select> 
        </div> 
        <div> 
         <input type="text" name="adminContactName" id="adminContactName" data-clear-btn="true" placeholder="Administrator Contact name..." required> 
         <label for="adminContactNumber" class="ui-hidden-accessible">Administrator Contact Number:</label> 
         <input type="tel" name="adminContactNumber" id="adminContactNumber" data-clear-btn="true" placeholder="Administrator Contact number..." required> 
        </div> 
        <div> 
         <input type="reset" name="reset" value="Reset" id="clear"> 
         <input type="submit" name="submit" value="Submit"><br/> 
        </div> 
       </form> 
      </div> 
     </div> 
     <div data-role="footer"> 
      <h1> 
       <img src="logo.png" align="middle" width="160" height="26"/> 
      </h1> 
     </div> 
    </div> 

    <!--Page two--> 
    <div data-role="page" data-dialog="true" id="pagetwo"> 
     <div data-role="header"> 
      <h1>A/C Order Request Sent!</h1> 
     </div> 

     <div data-role="main" class="ui-content"> 
      <div id="dbOutput"></div> <!-- Added as placeholder for DB output --> 
      <p>Thank you for submitting your order request. Your request will be reviewed by one of our sales representatives and you will be contacted shortly.</p> 
      <div align="right"> 
       <a href="#pageone" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right">Place another order</a> 
      </div> 
     </div> 
     <div data-role="footer"> 
      <h1> 
       <img src="logo.png" align="middle" width="160" height="26"/> 
      </h1> 
     </div> 
    </div> 
</body> 
</html> 

和JavaScript:

<script> 
    $('#ACform').validate({ 
     messages: { 
      onSiteName: {required: "Please enter the on-site contact name"}, 
      onSiteNumber: {required: "Please enter the on-site contacts number"}, 
      adminContactDropDown: {required: "Please select an admin contact"}, 
      adminContactName: {required: "Please enter an admin contact name"}, 
      adminContactNumber: {required: "Please enter an admin contact number"}, 
     }, 
     errorPlacement: function (error, element) { 
      error.insertAfter($(element).parent()); 
     }, 
     submitHandler: function (form) { 
      var data = $(form).serialize(); 
      $.ajax({ 
       type: 'POST', 
       url: 'submit.php', 
       data: data, 
       success: function (response, status){ 
        console.log(response); //This should show the $output variable from submit.php 
        $('#dbOutput').innerHTML(response); //This will input the response into the div#dbOutput 
        $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo'); //According to samples, this should be correct code... But again, I've never actually used pagecontainer 
        } 
       } 
      }); 
     } 
    }); 
</script> 

的connectDB.php文件:

<?php 
$config = [ 
    'host' => 'localhost', 
    'username' => 'joe', 
    'password' => 'thisismypassword', 
    'dbname' => 'databasename' 
]; 
$db = new PDO('mysql: host='.$config['host'].';dbname='.$config['dbname'],$config['username'],$config['password']; 
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 
$db->setAttrebute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

數據庫表:

+--------------------+ 
| tbl_orders   | 
+--------------------+ 
| id     | 
| onSiteName   | 
| onSiteNumber  | 
| adminContactName | 
| adminContactNumber | 
+--------------------+ 

submit.php文件:

<?php 
include 'connectDB.php'; 

$jobName = $delDate = $delTimeFrom = $useDate = $startTime = $puDate = $puTimeFrom = $address = $address2 = $zip = $city = $state = $delArea = $onSiteName = $onSiteNumber = $adminContactName = $adminContactNumber = $ACtotal = ''; 
//Check to make sure the there are values and that they aren't false values before proceeding 
if (isset($_POST['onSiteName']) && !empty($_POST['onSiteName'])) { 
    $onSiteName = test_input($_POST["onSiteName"]); 
    $onSiteNumber = test_input($_POST["onSiteNumber"]); 
    $adminContactName = test_input($_POST["adminContactName"]); 
    $adminContactNumber = test_input($_POST["adminContactNumber"]); 

    //Preparing the query to avoid SQL injection 
    $sql = $db->prepare("INSERT INTO tbl_orders (onSiteName , onSiteNumber , adminContactName , adminContactNumber) 
VALUES (:onSiteName , :onSiteNumber , :adminContactName , :adminContactNumber)"; 
    //Binding the parameters 
    $sql_params = [ 
     ':onSiteName' => $onSiteName, 
     ':onSiteNumber' => $onSiteNumber, 
     ':adminContactName' => $adminContactName, 
     ':adminContactNumber' => $adminContactNumber 
    ]; 

    $output = ''; 
    if ($sql->execute($sql_params) === TRUE) { 
     $output .= "New record created successfully"; 
    } else { 
     $output .= "Error: " . $sql . "<br>" . $conn->error; 
    } 
    echo $output; 
} 
function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlentities($data); //changed from htmlspecialchars to make sure most symbols are encoded properly for storage in DB 
    return $data; 
} 
?> 

編輯

我已經更新了答案,包括所有必要的組件。另外,我不知道如何連接到數據庫,但我使用PDO連接到數據庫,因此如果使用其他方法,則需要修改代碼。基本上,您將使用AJAX將表單發佈到您的submit.php腳本,然後處理並嘗試插入數據庫。然後,它將變爲AJAX將作爲response記錄下來的$output變量,並將其記錄在您的控制檯中,並將其更改爲標題爲#dbOutput的新格。基本上,輸出不會改變,因爲PHP已經提供給頁面,所以完成了。使用AJAX將允許您在不重新加載頁面的情況下動態更改數據庫結果中的元素。由於有幾處小的更正/編輯,您必須仔細梳理。希望有所幫助!

+0

嗨邁克爾謝謝你的迴應。 formSubmit給了我一個「錯誤加載頁面」消息。我修改了我的帖子,我嘗試了不同的變體 –

+0

@AndrewMetzger你有沒有試過評論'.pagecontainer'代碼,看看這可能是貢獻?基本上,你想把東西煮成絕對必要的東西,讓它工作,然後開始添加東西。 – Michael

+0

我沒有刪除'.pagecontainer'代碼,它正確地處理表單,但它不會重定向到#pageTwo並用JavaScript錯誤重新加載pageOne。 –