Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.02.2015, 03:30
Интересующийся
Отправить личное сообщение для Aggao Посмотреть профиль Найти все сообщения от Aggao
 
Регистрация: 06.02.2013
Сообщений: 19

Нужно передать значение переменной при нажатии 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="Добавить">';
Ответить с цитированием
  #2 (permalink)  
Старый 23.02.2015, 05:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,377

Ajax поможет, XMLHttpRequest или один из методов jQuery, если используется.

if ($_POST['buttonName']) { echo $_POST['txtName']; }

А без кнопки buttonName, что не прокатит?

if ($_POST['txtName']) { echo $_POST['txtName']; }
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2015, 10:41
Интересующийся
Отправить личное сообщение для Aggao Посмотреть профиль Найти все сообщения от Aggao
 
Регистрация: 06.02.2013
Сообщений: 19

Это добавление товаров в корзину. Поэтому нажатие кнопки "добавить" обязательно должно быть. Я не очень владею ajax, поэтому и прошу помощи. Немного осваиваю js, но знаний не хватает на некоторые моменты связанные с отправкой переменных через формы не подгружая страницы.
Ответить с цитированием
  #4 (permalink)  
Старый 23.02.2015, 10:42
Интересующийся
Отправить личное сообщение для Aggao Посмотреть профиль Найти все сообщения от Aggao
 
Регистрация: 06.02.2013
Сообщений: 19

Laimas, а Вы не могли бы подробнее с кодом показать как осуществить передачу переменной нажатием кнопки?
Ответить с цитированием
  #5 (permalink)  
Старый 23.02.2015, 16:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,377

Ну если корзина и добавление товара, то 'txtName', это не то что нужно, нужен идентификатор товара.

Вы используете в этом проекте jQuery или нет?
Ответить с цитированием
  #6 (permalink)  
Старый 23.02.2015, 18:54
Интересующийся
Отправить личное сообщение для Aggao Посмотреть профиль Найти все сообщения от Aggao
 
Регистрация: 06.02.2013
Сообщений: 19

Да использую. Нужна любая реализация задуманного. Js мне хоть как-то знаком, с jquery все сложнее
Ответить с цитированием
  #7 (permalink)  
Старый 23.02.2015, 19:21
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,377

Ну на jQuery как раз сложностей нет, все намного проще. Выберите упрощенные его методы Ajax .get() или .post(), их вполне хватит. Попробуйте хотя бы по примерам что-то написать, а далее с конкретными проблемами можно и на форум.
Ответить с цитированием
  #8 (permalink)  
Старый 01.03.2015, 00:46
Интересующийся
Отправить личное сообщение для Aggao Посмотреть профиль Найти все сообщения от Aggao
 
Регистрация: 06.02.2013
Сообщений: 19

Хотелось бы на примере увидеть. Сейчас пытаюсь изучить ajax, но не все моменты понятны. Нужен пример.
Ответить с цитированием
  #9 (permalink)  
Старый 01.03.2015, 02:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,377

Так примеры есть и по ссылке. Ну если не понятно как их задействовать конкретно к кнопке и полю ввода, то можно поступить например так - поля 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. Подправил, совершенно из головы вылетел идентификатор товара )

Последний раз редактировалось laimas, 01.03.2015 в 05:21.
Ответить с цитированием
  #10 (permalink)  
Старый 05.03.2015, 00:54
Интересующийся
Отправить личное сообщение для Aggao Посмотреть профиль Найти все сообщения от Aggao
 
Регистрация: 06.02.2013
Сообщений: 19

Сообщение от laimas Посмотреть сообщение
<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>

Продублировал Ваш код на свой сервер.
1. Добавил скрипт между тегами <head> </head>
2. Кнопки вывел за форму (form) и добавил стиль к кнопкам .send, прописав его в css.

Ничего не получилось.
Изначально стиль прописывается у кнопки, и при нажатии тоже срабатывает. Но id товара не передается. Как было 0, так и осталось. Прописал строку «Номер: (int)key($_POST['pid'])» прямо под списком с кнопками.

Я явно что-то не учел
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Активация checkbox при нажатии на текст и изменение стиля у текста. ilyakor jQuery 2 10.06.2014 19:34
Скрыть div при нажатии на картинку SLameN jQuery 6 14.04.2014 21:27
Как передать значение переменной? maksbp22 Общие вопросы Javascript 0 11.10.2013 16:21
Передать значение этой переменной скрипту пхп не обновляя страницы jei Общие вопросы Javascript 10 01.03.2013 17:14
Значение переменной salex009 jQuery 1 05.12.2011 15:55