Question

我有以下表格：

<form name="register" id="register" action="include/process_registration.php" method="post"> 
<div class="form_error">Ooops! There is some missing or incorrect information. Please look back over this section. </div>    

<div class="left_form2" >
<div class="inner_form1">
<p>Your First Name:*</p>
<p>Your Last Name:*</p>
<p>Date of Birth:*</p>
</div>
<div class="inner_form2">
<input type="text" name="firstname" id="firstname" class="login_form2" autocomplete="off"><br/>
<input type="text" name="lastname" id="lastname" class="login_form2" autocomplete="off"><br/>  
<input type="text" name="dob" id="dob" class="login_form2"><br/>
</div>    
</div>


<div class="left_form2" style="text-align:right;">
<div class="inner_form1">
<p>Email Address:*</p>
<p>Confirm Email:*</p>
</div>
<div class="inner_form2">
<input type="text" name="email" id="email" class="login_form2" autocomplete="off"><br/>
<input type="text" name="email2" id="email2" class="login_form2" autocomplete="off"><br/>  
</div>
</div>



<input type="submit" id="register1" name="register" value="Register" class="buttons_register"> 
</form>

然后我使用ajax将我的表单数据发布到我的mysql查询process_registration.php：

的Ajax：

  <script type="text/javascript">
            $(function() {
//alert('Document is ready');

                $('#register1').click(function() {
                    var a = $('#firstname').html();
                    var b = $('#lastname').html();
                    var c = $('#dob').html();
                    var d = $('#email').html();
                    var f = $('#email2').html();
//alert('You picked: ' + sel_stud);

                    $.ajax({
                        type: "POST",
                        url: "include/process_registration.php",
                        data: {theOption: a, theOption2: b, theOption3: c, theOption4: d, theOption5: f},
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>

我的php文件process_registration包含我的mysql查询，如下所示：

 <?php 
    session_start();
    include("config.php");
    include("verify.php");
    //retrieve our data from POST

    $firstname = $_POST['theOption'];
    $lastname = $_POST['theOption2'];
    $dob = $_POST['theOption3'];
    $email = $_POST['theOption4'];
    $email2 = $_POST['theOption5'];


    $firstname = stripslashes($firstname);
    $firstname = mysql_real_escape_string($firstname);
    $lastname = stripslashes($lastname);
    $lastname = mysql_real_escape_string($lastname);
    $email = stripslashes($email);
    $email = mysql_real_escape_string($email);
    $email2 = stripslashes($email2);
    $email2 = mysql_real_escape_string($email2);
    $dob = stripslashes($dob);
    $dob = mysql_real_escape_string($dob);

    include '../dependables/secure.php';  

    $sql = "INSERT INTO supplier_registration (id, first_name, last_name, supplier_email, supplier_password, salt, dob, date) VALUES ('', '$firstname','$lastname','$email2', '$hash', '$salt', '$dob', now())";
    $result2 = mysql_query($sql);


    ?>

由于某种原因，我被带到表单提交的process_registation.php页面，并为我的所有表单值获取未定义的索引错误。有人可以告诉我哪里出错了吗？感谢

Answer 1

您将转到该页面，因为表单的操作说明了它。

您可以在提交表单时使用javascript / jquery阻止它，然后执行ajax代码。

$("#register1").on("click", function(e) {
    e.preventDefault();
    //rest of your code
});

此外，您不会使用.html()获取输入值，而应使用.val()

PS：您可以使用serialize函数为表单获取更少的代码。看一下jQuery API。

Answer 2

从表单中删除...

action="include/process_registration.php"

如果您想要重新加载当前页面，请将其设为动作=“”。

您可能也希望实际回应process_registration.php中的内容，否则成功函数中的“whatigot”将始终为空。

Answer 3

您希望使用e.preventDefault()停止提交点击工作，因为通常需要这样做。

您还需要使用.val()而不是.html()，因为您应该获取输入的值而不是输入中的html。

$('#register1').click(function(e) {
    e.preventDefault();
    var a = $('#firstname').val();
    var b = $('#lastname').val();
    var c = $('#dob').val();
    var d = $('#email').val();
    var f = $('#email2').val();

    // AJAX Call
});

使用ajax发布表单数据？

3 个答案: