Jquery Ajax WOKING только один раз

Question

function postData() { 
    var fName=$("#fName").val(); 
    var lName=$("#lName").val(); 
    var city=$("#city").val(); 
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit"; 
    $.ajax({ 
     type:'POST', 
     url:'employeeajaxcodebehind.php', 
     data:data, 
     success:function(data){ 
     $("#results").html(data); 
     } 
    }); 
} 

Php код ниже

if(isset($_POST['submit'])) { 
    $fName=$_POST['fName']; 
    $lName=$_POST['lName']; 
    $city=$_POST['city']; 
    $Query="INSERT INTO employee(emp_id,firstname,lastname,city) VALUES ('','$fName','$lName','$city')"; 
    $Result=mysql_query($Query); 
    viewRecord(); 
} 

Html:

<form method="POST"> 
    Firstname: <input type="text" id="fName" name="fName"><br> 
    Lastname: <input type="text" id="lName" name="lName"><br> 
    City: <input type="text" id="city" name="city"><br> 
    <input type="submit" id="submit" name="submit" onclick="postData();"> 
</form> 

Теперь проблема заключается в том, что всякий раз, когда я открываю страницу вставить одну запись и ее получение успешно сохранен на моем DB. Но когда я добавляю еще одну запись, она не сохраняется. Мне нужно перезагрузить страницу на каждой вставке ...

В чем проблема? Также должна выполняться функция php viewRecord();, но ее нет ...

Answer 1

Использование .serialize() для получения данных из формы.

Также ваша форма отправляет данные два раза - на onclick и onsubmit. Пожалуйста, запретите событие onsubmit, добавив return false;

Answer 2

Это потому, что вы добавляете emp_id как пустую (если это не первичный ключ или уникальный ключ). Вы должны опустить это в sql:

$sql = "INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')"; 

JS Изменения: при использовании кнопки отправки. вам необходимо предотвратить обновление страницы. Таким образом изменить Ajax вызов, как этот:

<script type='text/javascript'> 
    /* attach a submit handler to the form */ 
    $("#commentForm").submit(function(event) { 

     /* stop form from submitting normally */ 
     event.preventDefault(); 

     /* get some values from elements on the page: */ 
     var $form = $(this), 
     var url = "employeeajaxcodebehind.php" // or $form.attr('action'); 

     /* Send the data using post */ 
     var posting = $.post(url, { fName: $('#fName').val(), lName: $('#lName').val(), city: $('#city').val() }); 

     /* Put the results in a div */ 
     posting.done(function(data) { 
     $("#results").html(data); 
     }); 
    }); 
</script> 

Answer 3

Проблема, о которой упоминается @skparwal, заключается в том, что вы пытаетесь вставить '' в свой первичный ключ. Вам нужно использовать mysql_error() после вашей вставки, чтобы узнать, какие ошибки возникают. Посмотрите на эту ссылку о том, как это сделать: http://php.net/manual/en/function.mysql-error.php

Кроме того, ваш ajax не будет работать должным образом, потому что вы не возвращаете false для onClick(), что означает, что форма отправляется каждый раз после ajax вызов активируется.

Кроме того, вы должны перейти к mysqli или PDO, потому что mysql устарел.

Редактировать

Попробуйте это , но это не означает, работать или быть окончательной реализации, это просто, чтобы вы на правильном пути. Это тестировался, так что могут быть некоторые ошибки:

Изменить ваш Javascript это:

$(function(){ 
    $('#submit').click(postData); 
}); 

function postData() { 
    var fName=$("#fName").val(); 
    var lName=$("#lName").val(); 
    var city=$("#city").val(); 
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit"; 
    $.ajax({ 
     type:'POST', 
     url:'employeeajaxcodebehind.php', 
     data:data, 
     success:function(data){ 
      $("#results").html(data); 
     } 
    }); 
    return false; 
} 

Изменение PHP на это:

if(isset($_POST['submit'])) { 
    $fName=$_POST['fName']; 
    $lName=$_POST['lName']; 
    $city=$_POST['city']; 
    $Query="INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')"; 
    if(!($Result=mysql_query($Query))) 
     exit('@todo need to check for error here'); 
    viewRecord(); 
} 

Изменить HTML для этого:

<form method="POST"> 
    Firstname: <input type="text" id="fName" name="fName"><br> 
    Lastname: <input type="text" id="lName" name="lName"><br> 
    City: <input type="text" id="city" name="city"><br> 
    <input type="submit" id="submit" name="submit"> 
</form>