Как передать поля input на текущую страницу без обновления?

Question

[ivapbox]

На страничке размещены поля для оформления заказа.
Имеются поля input

<input type="text" name="customerPromo" id="customerPromo" class="span7" />

Внизу страницы есть кнопка "Продолжить", которая работает не submit'ом: она "открывает" вторую половину страницы (javascript'ом), где уточняется правильность заполненных полей через <span id="..."></span>
Мне нужно одно поле передать на эту страницу посредством GET или POST (для обработки в скрипте php), но страница не должна обновляться.
На кнопке "Продолжить" я влепил onClick="f()", в свою очередь функция f() должна отправлять то самое поле input.

function f() {
                         //var promo1 = $('input[name="customerPromo"]').val();   --  в этой переменной хранится то самое значение,
                         //которое нужно отправить в переменную php на этой же странице
                        jQuery.ajax({
                            url:      "checkout.php", //Адрес подгружаемой страницы
                            type:     "POST", //Тип запроса
                            dataType: "html", //Тип данных
                            data: jQuery("#"+form_id).serialize(),
                            success: function(response) { //Если все нормально
                            },
                    }

Этот код не работает, пробовал следующий код:

function f() {
                        var promo1 = $('input[name="customerPromo"]').val();
                        $.get('checkout.php', {promo1:promo1});
                    }

Вопрос: как сделать так, чтоб после нажатия кнопки "Продолжить" поле input отправилось на эту же страницу? Я чувствую что нужно в функции, которую вызывает onClick что-то вписать, уже полнедели гуглю, всё никак.

Answer 1

[Camaro67]

У вас у кнопки тип не указан или указан submit из-за этого и идет перезагрузка страницы.

<button type="button" class="btn-next">Продолжить</button>

$( '.btn-next' ).on( 'click', function () {
    // AJAX
} );

Comments

[ivapbox]

Так вот мне и нужен этот // AJAX код, который отправит на эту же страницу поле input

[ivapbox]

В мною предложенных примерах JS все верно?

[Camaro67]

ivapbox, Полный код формы и JS тогда выкладывайте, например, на jsfiddle.

[ivapbox]

Camaro67, https://jsfiddle.net/c9kwjnp4/

[Camaro67]

ivapbox, Вы похоже не понимаете как работает PHP и для чего AJAX. Вы пытаетесь на уже сформированную страницу и отданную пользователю впихнуть $_GET, который отправляете по AJAX. Когда вы отправляете AJAX запрос по этому же адресу, то там уже совсем другой экземпляр страницы, который никакого отношения к текущей странице не имеет!

[ivapbox]

Camaro67, Подскажите пожалуйста, как мне в таком случае лучше решить проблему? В какую сторону гуглить, либо...?

[Camaro67]

ivapbox, Вы лучше детально опишите вашу задачу. Чего вы хотите добиться по нажатию на продолжить (по мимо того, что страница не должна перезагрузиться)?

[ivapbox]

Интернет-магазин, в корзине несколько товаров. Оформляем покупку.
Имеется страница с заполняемыми input'ами: имя, телефон, и т.д.
Один из input'ов - промокод. После того как мы нажали "продолжить" все эти инпуты исчезают, на их месте появляется информация о заполненных ранее инпутах, отображаются это средствами javascript:

$("#customerDesc").keypress(function () {
                            $("#check_promo").html($("#customerDesc").val());
                        });

, а также список товаров, которые лежат в корзине с ценами и прочим.
Задача: по соответствующему промо-коду должен выполняться запрос в БД средсвами PHP, если промо-код есть в базе, то цены в этой корзине будут измененными.

[Camaro67]

ivapbox, Как вариант: отправляете этот промо-код на сервер (по средствам AJAX), и если он там есть, то тогда отвечаете JSON'ом со списком товаров корзины (например, список id этих товаров) и новыми ценами к этим товарам, а дальше с помощью JS проставляете новые цены в корзине.

[ivapbox]

Camaro67, т.е. сделать рядом с инпутом промокода кнопку "применить", при которой будет отправляться промокод на..скажем...check_promo.php?
Идея хорошая, но когда check_promo.php проверит промокод на валидность - как быть дальше? Допустим - промокод валидный, и мне нужно вернуть обратно на мою страницу значение скидки (ну, просто какое-то значение), можно чуть подробней: как именно этот шаг реализовать?

[Camaro67]

ivapbox, Что-то типа такого

// Вешаем на событие по кнопке "продолжить" AJAX
$.ajax( {
	url: '/check_promo.php',
	method: 'POST',
	data: { promo: /* здесь значение promo */ },
	dataType: 'json', // Если ожидаем json от сервера
	success: function ( data ) {
		// В data и будет наш JSON, которым ответил сервер

		// Далее берем просто данные с него и работаем с ними как нам нужно
		// Например, проставляем новые цены в корзине
	}
} );

А в плане бекенда, как уже говорил, формируете JSON с новыми ценами к товарам в корзине

[ivapbox]

Camaro67, понял, спасибо большое!

[ivapbox]

Camaro67, подскажите пожалуйста, я реализовал отправку промокода для проверки на специальный скрипт. Он его получает, это удалось реализовать. Проверяет, все такое. Можно ли осуществить с этого проверочного скрипта отправку обратно на checkout.php результата для обработки на стороне PHP? Интересует, конечно же, обработку результата без обновления страницы.

[Camaro67]

ivapbox, Т.е. вы отправляете этот промо на сервер для проверки, оттуда приходит некий ответ, и этот ответ вы опять же хотите отправить на сервер для дальнейших каких-то действий? Я вас правильно понял?

[ivapbox]

Camaro67, нет, ответ я хотел бы обработать на текущей странице средсвами PHP, но по вашему ответу я кажется понял что это нереализуемо:)

[Camaro67]

ivapbox, PHP это не фронтед, а бекенд т.е. он выполняется на стороне сервера, а не браузера. Следовательно, что бы что-то обработать придется отправить это на сервер, например, по средствам AJAX.