Запись данных в базу без обновления всей формы (jquery+ajax)

var_fj54j

Новичок
Добрый вечер! Есть форма с большим количеством полей для ввода. Не могу сделать так, чтобы данные из 2-х полей, при нажатии на кнопку button загружались в базу. Если делую отдельную форму с этими полями, то всё норм, а вот на общей форме ничего не получается. А также если нажать на эту кнопку button, то форма перезагружается.
Вот скрипт jquery:
[JS]<script>
$(document).ready(function(){
$("button").click(function(){
$.post("insertClientNew.php", {
fam:$('#lastnamecompanion').val(),
im:$('#firstnamecompanion').val(),
ot:$('#patrnamecompanion').val(),
dw:$('#birthdatecompanion').val(),
tel:$('#phonecompanion').val()}, function (data){
$("#insclient").html(data);
});
});
});[/JS]
На php скрипту передаю переменные через POST и выполняю запрос.
По мимо полей (#lastnamecompanion, #firstnamecompanion и т.д. ) есть и другие поля, которые заполняются до перечисленных выше полей. После нажатия на кнопку button вся форма перезагружается. Кто, что посоветует?
 

peon

Lok'tar ogar
HTML:
$("button").click(function(e){

    e.preventDefault(); //чтобы не перезагружалась форма

    var formData = $("form").serialize(); //берем значения формы
   
    $.ajax({
        type: "POST",
        url: "insertClientNew.php",
        data: formData,
        success: function(data) {
            $("#insclient").html(data);
        }
    });
   
  });
 

var_fj54j

Новичок
Добрый вечер!!! Спасибо всем, за помощь. Ответ на свой вопрос нашел сам. Оказывается, что если используешь jquery, то не надо писать тег form. У меня он был указан. Убрал его и все заработало. Я этого не знал, что если указан тег form, то страница будет автоматически перезагружаться, а jquery для того и используют, чтобы обойтись без форм.
 

peon

Lok'tar ogar
Добрый вечер!!! Спасибо всем, за помощь. Ответ на свой вопрос нашел сам. Оказывается, что если используешь jquery, то не надо писать тег form. У меня он был указан. Убрал его и все заработало. Я этого не знал, что если указан тег form, то страница будет автоматически перезагружаться, а jquery для того и используют, чтобы обойтись без форм.
Это нелепый костыль. А тэг форм дает правильную смысловую нагрузку и гибкость.
 

WMix

герр M:)ller
Партнер клуба
var_fj54j, чтоб форма не сабмитилась не используй <input type="submit" /> или перехватывай событие onsubmit у формы
 
Сверху