Jquery在php脚本运行之前验证更改页面

时间：2016-03-02 22:27:16

标签： jquery jquery-mobile jquery-validate

我是PHP MYSQL JQUERY的新手，我有一个Jquery Mobile Form，我想将表单数据提交给mySql，然后更改为移动页面的#pageTwo。这看起来应该很容易，但我似乎无法弄明白。

<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时，页面会发生变化，但表单不会提交。

修改

根据Michaels的建议，我尝试了下面的代码，它给了我一个“错误加载页面”错误：

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();
}
});

带我到pageTwo但没有提交表格

1 个答案:

答案 0 :(得分：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脚本，然后该脚本处理并尝试插入到数据库中。然后它echo是$output变量，AJAX会将其作为response捕获，并将其记录在您的控制台中，并在标题为#dbOutput的新div中进行更改。基本上，输出不会改变，因为PHP已经提供给页面，所以它已经完成了。使用AJAX将允许您在不重新加载页面的情况下动态更改包含DB结果的元素。由于有一些小的修正/编辑，你必须仔细梳理。希望有所帮助！

相关问题
最新问题