Как отправить данные формы через ajax?

Question

[almenovr]

Требуется сделать отправку данных формы через ajax запрос на php и вывести html который вернул php.
Пробую так, но не работает:

<script> 
                function ajaxFormRequest() {
                    $.ajax({
                        type: "POST",
                        url:"", 
                        dataType: "html",
                        data: jQuery("#RoomForm").serialize(),
                        success: function(data) {
                            $('body').html(data).show();
                        },
                        error: function(data) {
                            alert("error");
                        },
                    });
                }
            </script>

Comments

[Sand]

url в оригинале тоже пустой?

[almenovr]

Sand, нет, в оригинале заполнен.

[MrColdCoffee]

покажите код формы и событие onclick

[almenovr]

Код кнопки:

$BtnBron = '<div class="butt_zabron"><input type="submit" id="button-buy' . $l . '" name="SubmitFPH" onclick="ajaxFormRequest();" class="button-buy" value="Бронь онлайн"><div class="br_hint">Оформление на сайте</div></div><div onclick="showFormBooking('.$l.');" id="sendTicket_'.$l.'" class="consult"><a>Отправить заявку</a><i class="fal fa-question-circle"></i><div class="za_hint">Мы перезвоним и оформим бронь по телефону.</div></div>';

Код формы:

$html1 = '<div class="result_rooms list_room"><form action="" method="POST" class="room" id="RoomForm"><input name="AccountRoomID" id="AccountRoomID'.$l.'" type="hidden" value="' . $Row['AccountRoomID'] . '"/><input name="RoomNameDef'.$l.'" id=\'RoomNameDef'.$l.'\' type="hidden" value="'.$RoomNameDef.'"/><input name="RoomName'.$l.'" id=\'RoomName'.$l.'\' type="hidden" value="'.$Row['RoomName'].'"/><input name="StartDate" type="hidden" value="' . $StartDate . '"/><input name="EndDate" type="hidden" value="' . $EndDate . '"/><input name="Adults" type="hidden" value="' . $Adults . '"/><input name="Children" type="hidden" value="' . $Children . '"/><input name="HotelID" type="hidden" value="' . $HotelID . '"/><input name="Source" type="hidden" value="rt.center"/><input name="Discount" type="hidden" value="' . $Discount . '"/><input name="ChildrenAges" type="hidden" value="' . $ChildrenAgeStr . '"/><input name="BonusType" id="BonusType' . $l . '" type="hidden" value="regular"/><div class="roomimg"><a title="Фотографии номера '.$Row['RoomName'].'" href="'.$ImageSrc.'" class="fancybox-buttons'.$l.'" data-lightbox="lightbox'.$l.'" class="buttons' . $l . '"><img src="' . $ImageSrcThumb . '" alt="Фото номера" class="roomtmb"></a></div><div class="roomdecr"><div class="name-room">' . $Row['RoomName'] . '</div><div class="description-room">В номере: ' . $RoomServices . '</div><div class="vmestim">' . $Place . '</div></div><div class="roomprice" id="roomprice' . $l . '">' . $Price_discount . $base_price . $IsNonRefundable . '</div>' . $BtnBron . '</form></div>';

Answer 1

[Максим Ткачев]

$.ajax({
type: "POST",
url:"",

В url - адрес скрипта куда отправляется запрос

В скрипте

echo json_encode($_POST)

Comments

[almenovr]

Мой этот код срабатывает на onclick и он просто перезагружает страницу.
Сейчас сделал алерт отправляемых данных, у меня передаваемое значение выглядит вот так. Хотя название на русском, так и должно быть?

[Максим Ткачев]

код формы #RoomForm покажите
и как вызывается ajaxFormReques

[Сергей delphinpro]

almenovr, он не просто перезагружает страницу, а отправляет запрос на эту же страницу, потому что url у вас пустой. Но эта страница, видимо, никак запрос не обрабатывает.
Максим же четко все написал – укажите адрес скрипта, который будет принимать запрос, там напишите обработку и возвращайте нужные данные. Единственное, вам не нужно делать json_encode, так как вы ожидаете обычный html в ответе.

[almenovr]

Сергей delphinpro, У меня url заполнен, я его только тут убрал.

[Сергей delphinpro]

almenovr, ну тогда объясните подробнее, что значит "не работает". Выкладывайте тексты ошибок, консольные логи, код обработчика.

[Сергей delphinpro]

Хотя я что-то затупил. Не должна же страница перезагружаться...
Показывайте больше js кода. Как вызывается эта ваша функция.

[Максим Ткачев]

Сергей delphinpro, almenovr,
Подозреваю что на форме стоит кнопка SUBMIT и в обработчике события onClick этой кнопки не указан
e.preventDefault();
Поэтому и происходит перезагрузка страницы

[almenovr]

Максим Ткачев, Пробовал поставить e.preventDefault();, не помогло идет перезагрузка.

function ajaxFormRequest(e) {
                    e.preventDefault();
                    alert(jQuery("#RoomForm").serialize());

                    $.ajax({
                        type: "POST",
                        url:"https://russ.travel/scriprts/testrt/booking.php", 
                        dataType: "html",
                        data: jQuery("#RoomForm").serialize(),
                        success: function(data) {
                            $('body').html(data).show();
                        },
                        error: function(data) {
                            alert("error");
                        },
                    });
                }

Код кнопки:

$BtnBron = '<div class="butt_zabron"><input type="submit" id="button-buy' . $l . '" name="SubmitFPH" onclick="ajaxFormRequest();" class="button-buy" value="Бронь онлайн"><div class="br_hint">Оформление на сайте</div></div><div onclick="showFormBooking('.$l.');" id="sendTicket_'.$l.'" class="consult"><a>Отправить заявку</a><i class="fal fa-question-circle"></i><div class="za_hint">Мы перезвоним и оформим бронь по телефону.</div></div>';

Код формы:

$html1 = '<div class="result_rooms list_room"><form action="" method="POST" class="room" id="RoomForm"><input name="AccountRoomID" id="AccountRoomID'.$l.'" type="hidden" value="' . $Row['AccountRoomID'] . '"/><input name="RoomNameDef'.$l.'" id=\'RoomNameDef'.$l.'\' type="hidden" value="'.$RoomNameDef.'"/><input name="RoomName'.$l.'" id=\'RoomName'.$l.'\' type="hidden" value="'.$Row['RoomName'].'"/><input name="StartDate" type="hidden" value="' . $StartDate . '"/><input name="EndDate" type="hidden" value="' . $EndDate . '"/><input name="Adults" type="hidden" value="' . $Adults . '"/><input name="Children" type="hidden" value="' . $Children . '"/><input name="HotelID" type="hidden" value="' . $HotelID . '"/><input name="Source" type="hidden" value="rt.center"/><input name="Discount" type="hidden" value="' . $Discount . '"/><input name="ChildrenAges" type="hidden" value="' . $ChildrenAgeStr . '"/><input name="BonusType" id="BonusType' . $l . '" type="hidden" value="regular"/><div class="roomimg"><a title="Фотографии номера '.$Row['RoomName'].'" href="'.$ImageSrc.'" class="fancybox-buttons'.$l.'" data-lightbox="lightbox'.$l.'" class="buttons' . $l . '"><img src="' . $ImageSrcThumb . '" alt="Фото номера" class="roomtmb"></a></div><div class="roomdecr"><div class="name-room">' . $Row['RoomName'] . '</div><div class="description-room">В номере: ' . $RoomServices . '</div><div class="vmestim">' . $Place . '</div></div><div class="roomprice" id="roomprice' . $l . '">' . $Price_discount . $base_price . $IsNonRefundable . '</div>' . $BtnBron . '</form></div>';

[almenovr]

Сергей delphinpro, выше скинул

[Сергей delphinpro]

almenovr, скобки у функции уберите, тогда туда будет передаваться объект события. Допишите preventdefault и все будет норм.

И кстати, лучше слушать onsubmit на форме, а не onclick на кнопке.

[almenovr]

Сергей delphinpro, Не совсем понял какие скобки, так?
onclick="ajaxFormRequest"

[ThunderCat]

almenovr, Листенер вешается на субмит формы, а не на кнопку. В любом поле формы нажатие на ентер субмитит форму, так что ваша кнопка будет до пятой точки. И вот эти onclick="ajaxFormRequest" - это еще на заре хтмл было стремной темой, научитесь нормально вешать обработчики по загрузке документа.

Answer 2

[Rsa97]

Мой этот код срабатывает на onclick и он просто перезагружает страницу.

function ajaxFormRequest(e) {
  e.preventDefault();
  ...
}

Comments

[almenovr]

Добавил, также идет перезагрузка и ничего не происходит.

Answer 3

[Vitaliy K]

$.post(url, {
            formdata:$('#form').serialize()
        })
            .done(function (data) {
            // ok    
            }).fail(function (data) {
            // not ok
        })
        ;