данные формы сообщения используя ajax?

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, чтобы разместить свои данные формы в мой process_registration.php MySQL запросов:

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 в форме submit и получаю неопределенные ошибки индекса для всех значений моей формы. Может кто-нибудь, пожалуйста, покажите мне, где я иду не так? Спасибо

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