Как исключить перезагрузку страницы при передаче параметра POST?

Question

[ligisayan]

Всем привет! Есть в интернет-магазине корзина разбитая на 2 вкладки.
В первой пользователь вводит телефон в input и при нажатии на кнопку подтвердить - получает это значение в input поле второй вкладки с переключением на эту вкладку.

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

Как исключить перезагрузку страницы или переключаться на вторую вкладку по кнопке подтвердить?

Во втором варианте пробую все сделать через ajax, страница не перезагружается, значение запоминается визуально в поле, но ничего не приходит в $_POST['billing_phone_visible'], как в первом случае с перезагрузкой страницы.
Но, внутри ajax значение поля изменилось

success: function() {
		       console.log($('#billing_phone_visible').val());
	        }

Почему так?

Задача упрощена, поэтому, пожалуйста, не стоит задавать вопросы для чего мне нужна такая реализация

Код ниже:

Comments

[Дмитрий]

Доброе утро.
Используйте ajax.

[ligisayan]

slo_nik, доброе. Во втором варианте, как я уже писал, использую ajax, но не получаю при этом значение $_POST['billing_phone_visible'] на сервере, хотя здесь - получаю
success: function() {
console.log($('#billing_phone_visible').val());
}

Answer 1

[ligisayan]

У меня сайт на wordpress, поэтому подключение и работа ajax только таким образом, который описан в статье Ajax в WordPress

<?php
//add_action('admin_print_scripts', 'my_action_javascript'); // такое подключение будет работать не всегда
add_action('admin_print_footer_scripts', 'my_action_javascript', 99);
function my_action_javascript() {
	?>
	<script>
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// с версии 2.8 'ajaxurl' всегда определен в админке
		jQuery.post( ajaxurl, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}
?>

Answer 2

[profesor08]

Это все у тебя форма, а раз так, то нажатии кнопки и так отправляет данные формы. Обновление страницы происходит при отправке формы, значит тебе надо отловить событие отправки формы и прервать его.

form.addEventListener("submit", e => {
  e.preventDefault();
  // тут делай все свои дела, собирай данные и делай с ними что хочешь.
})

Comments

[ligisayan]

profesor08 спасибо, но чем в данном случае ваше решение отличается от моего?

//2 вариант
if($('#transfer').length) {
		$('#transfer').click(function(e){
      e.preventDefault();
      $('#btn-checkout').removeClass('disabled');
			$('#btn-checkout').click();
      
     var $form = $(this).closest("form");
      $.ajax({
      type: "POST",
        url: $form.attr("action"),
        data: $form.serialize()
      });
		});
	}

Здесь у меня проблема в том, что на клиенте я могу получить значение

success: function(data) {
console.log($('#billing_phone_visible').val());
}

А на сервере почему-то нет - не выполняется условие и не могу понять почему

if(isset($_POST["billing_phone_visible"])) 
{
$phone_number = $_POST["billing_phone_visible"];
print_r($phone_number);
}

[profesor08]

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

[ligisayan]

profesor08, спасибо, но пока это мою проблему не решает

[profesor08]

ligisayan, почему не решает? Запрети форме отправлять данные прервав событие. Но ты всегда можешь упереться и продолжать мучаться, пока не сделаешь так как я написал, ну либо не избавишься от формы и напишешь велосипед сериализации данных.

[ligisayan]

profesor08, да я сделал, как вы говорите и прервал событие, но это ровным счетом ничего не дало, по прежнему в
$_POST["billing_phone_visible"] пусто

var element = document.querySelector('.woocommerce-cart-form');
	element.addEventListener("submit", e => {
	  e.preventDefault();
	  $('#btn-checkout').removeClass('disabled');
	  $('#btn-checkout').click();
	  var $form = $(this).closest("form");
	  $.ajax({
		    type: "POST",
		    url: $form.attr("action"),
		    data: $('#billing_phone_visible').serialize(),
		    success: function(data) {
		       console.log($('#billing_phone_visible').val());
	       }
		  });
	});

Answer 3

[Лариса .•º]

Если правильно вас поняла. необходимо передать, значение, введенное пользователем, на сервере, (для проверки, сохранения и еще чего то), то и получить от сервера что, то необходимо, либо положительный или отрицательный ответ.
Должна быть правильная обработка ajax:

$. ajax ({
                    url:'ваш rl',
                    type:'post',
                    data:data,
                    success:function(res){
                        $('#result').html(res);
                    }
                })

Comments

[ligisayan]

Лариса спасибо вам за попытку помочь, но посмотрите внимательно в вопросе я описал проблему, которую имею при использовании ajax

В примере выше мой вариант 2 в комментах

//2 вариант
if($('#transfer').length) {
		$('#transfer').click(function(e){
      e.preventDefault();
     $('#btn-checkout').removeClass('disabled');
			$('#btn-checkout').click();
      
      var $form = $(this).closest("form");
      $.ajax({
      type: "POST",
       url: $form.attr("action"),
        data: $form.serialize()
      });
		});
	}

[Лариса .•º]

ligisayan,
А что у вас, возвращает след. (result?)

success: function(result){
                console.log('return' + result);
             }

[ligisayan]

Лариса, полную html страницу начиная с doctype

[Лариса .•º]

или как вариант заменить в форме
<button type="submit"
на
<button type="button">

Answer 4

[ThunderCat]

У вас почти все верно. Кроме обработки ответа. Success принимает в качестве параметра строку принятую в результате выполнения операций на сервере.
Success(data){
Console.log(data);
}

Comments

[ligisayan]

ThunderCat не совсем вас понял. Здесь значение я получаю
success: function(data) {
console.log($('#billing_phone_visible').val());
}

Но, в северной части нет - условие здесь не выполняется..
if(isset($_POST["billing_phone_visible"]))
{
$phone_number = $_POST["billing_phone_visible"];
print_r($phone_number);
}

[ThunderCat]

возвращает полную html страницу начиная с doctype

судя по этому у вас отрабатывает сначала контроллер, а затем и вид рендерится, а при аякс запросе нужно после операций с данными аякс отдать ответ и сделать exit;

Далее, так как у вас там небольшая но вязкая каша, я бы прошелся снизу вверх по цепочке работы скрипта:
1) проверить в контроллере - первой строчкой var_dump($_POST); exit;,
2) в консоли браузера посмотреть что и куда ушло аяксом(может у вас там неверный урл и пустые данные пост)
3) и что вернулось (есть ли вообще что-то вернулось, возможно у вас не те имена полей проверяются.
4) в случае если уходит пустой запрос - проверять что в скрипте у вас неверно формируется (для начала отконсолить все получаемые переменные/элементы, включая форму и ее сериализацию).

[ligisayan]

ThunderCat, спасибо, буду пробовать. Сайт на wordpress - разве у него есть контроллер?
2) url верный, в post есть данные поля billing_phone_visible
3-4)

success: function(data) {
console.log($('#billing_phone_visible').val());
}

как я понимаю - здесь проверяется возвращаемое значение?

[ThunderCat]

ligisayan,

как я понимаю - здесь проверяется возвращаемое значение?

нет, вы получаете в data возвращаемый сервером ответ, но зачем то выводите в консоль значение элемента из DOM. console.log(data); выведет в консоль то что пришло с сервера.

Сайт на wordpress - разве у него есть контроллер?

то что это все на вордпрессе нигде не указано, условно можно считать core вордпресса одним большим ведром помоев контроллером, в целом не важно где вы будете обрабатывать данный скрипт, важно проверить что это:
1) пришло методом пост(или аяксом)
2) данные не пустые
3) отдать ответ
4) сделать exit;

[ligisayan]

ThunderCat, написал выше как у меня все по итогу заработало. Сайт на wordpress, а это было в данном случае ключевым!