Нужно передать значение переменной при нажатии button
Здравствуйте. Помогите передать значение переменной "txtName" и $buttonName = true на страницу при нажатии кнопки "buttonName" без перезагрузки страницы.
if ($_POST['buttonName']) { echo $_POST['txtName']; }
}
echo '
<input id="txtId" name="txtName" type="text" value="">
<input id="buttonId" name="buttonName" type="button" onClick="" value="Добавить">';
|
Ajax поможет, XMLHttpRequest или один из методов jQuery, если используется.
if ($_POST['buttonName']) { echo $_POST['txtName']; } А без кнопки buttonName, что не прокатит? if ($_POST['txtName']) { echo $_POST['txtName']; } |
Это добавление товаров в корзину. Поэтому нажатие кнопки "добавить" обязательно должно быть. Я не очень владею ajax, поэтому и прошу помощи. Немного осваиваю js, но знаний не хватает на некоторые моменты связанные с отправкой переменных через формы не подгружая страницы.
|
Laimas, а Вы не могли бы подробнее с кодом показать как осуществить передачу переменной нажатием кнопки?
|
Ну если корзина и добавление товара, то 'txtName', это не то что нужно, нужен идентификатор товара.
Вы используете в этом проекте jQuery или нет? |
Да использую. Нужна любая реализация задуманного. Js мне хоть как-то знаком, с jquery все сложнее :)
|
Ну на jQuery как раз сложностей нет, все намного проще. Выберите упрощенные его методы Ajax .get() или .post(), их вполне хватит. Попробуйте хотя бы по примерам что-то написать, а далее с конкретными проблемами можно и на форум.
|
Хотелось бы на примере увидеть. Сейчас пытаюсь изучить ajax, но не все моменты понятны. Нужен пример.
|
Так примеры есть и по ссылке. Ну если не понятно как их задействовать конкретно к кнопке и полю ввода, то можно поступить например так - поля input, это поля вне формы, если не подразумевается добавление N-товаров с одной страницы, то есть запрос на добавление, это добавление только одного товара. Пусть все товары на странице отображаются в списке, и элемент UL имеет id "products", в нем, а не по всей странице и нужно искать кнопки инициализирующие запрос сервера:
<ul id="products">
<li><input type="number" name="pid[100]" value="1" min="1"> <button></button></li>
<li><input type="number" name="pid[212]" value="1" min="1"> <button></button></li>
</ul>
Поле выбора количества товара лучше сделать типа number - в Opera, Chrome, в последнем FF такое поле будет иметь кнопки. Старые браузеры будут "понимать" такое поле как text. Имя поля, это ключ содержащий идентификатор товара, в примере равен pid. На сервере идентификатор можно получить так: (int)key($_POST['pid']). Кнопки добавления по умолчанию, это что-то кругленькое, с иконкой корзины к примеру, а по нажатию кнопке добавляется класс "send", при котором изображение кнопки изменятся на gif-анимацию, крутилку указывающую что идет обмен с сервером. На время запроса сервера нужно блокировать запросы на добавление товара, а по окончании снимать блокировку. Это можно сделать с помощью двух методов jQuery - ajaxStart и ajaxStop, которые можно привязать к любою объекту. В итоге получится, что-то такое:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function toBasket(o) {
$.post('url', o.attr('name')+'='+o.val(), function(d) {
//d содержит ответ сервера
//удаляем анимацию у кнопки
o.next().removeClass('send');
})
}
$(function() {
var add = $('#products').find('button');
add.click(function() {
//добавляем анимацию кнопке и передаем количество товара серверу
toBasket($(this).addClass('send').prev())
}).on({
ajaxStart: function() {
//блокируем отправку
add.prop('disabled', 1)
},
ajaxStop: function() {
//разрешаем отправку
add.prop('disabled', 0)
}
});
});
</script>
PS. Подправил, совершенно из головы вылетел идентификатор товара ) |
Цитата:
1. Добавил скрипт между тегами <head> </head> 2. Кнопки вывел за форму (form) и добавил стиль к кнопкам .send, прописав его в css. Ничего не получилось. :( Изначально стиль прописывается у кнопки, и при нажатии тоже срабатывает. Но id товара не передается. Как было 0, так и осталось. Прописал строку «Номер: (int)key($_POST['pid'])» прямо под списком с кнопками. Я явно что-то не учел :) |
| Часовой пояс GMT +3, время: 18:12. |