Изменение значения после клика по ссылке
Доброго времени суток уважаемые мастера,
есть список ссылок: <a href="#" id="tr1" title="Голубые валенки">Заказать</a> <a href="#" id="tr2" title="Черные перчатки">Заказать</a> <a href="#" id="tr3" title="Светлые перчатки">Заказать</a> При нажатии на ссылку всплывает jQuery окно, в котором находится форма. Таких ссылок огромное кол-во. И поэтому каждое окно прописывать не вариант, всего одно окно, в котором будет меняться значение одного поля, смотря на какую ссылку "тыкнуть". Во всплывающем окне находится форма. Предположим, что она состоит из 3 input'ов типа text. 2 из них заполняются юзерами, а одна из них скрыта. Именно она и будет менятся. Нужен скрипт, который при нажатии на ссылку, брал бы title у этой ссылки и "запихивал" его в значение input'a, то бишь в value. Думаю задача не сильно сложная, но к сожалению мои познания в java близки к нулю, и поэтому я прошу вашей помощи. Заранее благодарен. |
с использованием jquery
$('a').click(function()
{
$(obj).html($(this).attr('title'));
});
|
Цитата:
Дайте объясню подробнее. Итак, есть список ссылок: <a class="js__p_start" href="#__zakaz" id="ps1" title="Ноутбуки">Заказать</a> <a class="js__p_start" href="#__zakaz" id="ps2" title="Нетбуки">Заказать</a> <a class="js__p_start" href="#__zakaz" id="ps3" title="Планшеты">Заказать</a> При нажатии на ссылку всплывает вот такое окно: <div class="p_body js__p_body js__fadeout"></div> <div class="popup js__popup js__slide_top"><a href="#" class="p_close js__p_close" title="Закрыть"></a> <div class="p_content"> <div id='m_form'> <div><strong>Отправить сообщение</strong></div> <div>Ваше имя <input type='text' id='m_name' /></div> <div>Ваш email <input type='text' id='m_email' /></div> <div>Тема сообщения <input type='hidden' value="Тест темы" id='m_theme' /></div> <div>Сообщение <textarea id="m_message"></textarea></div> <div><button>Отправить заявку</button> <span id='result'></span></div> </div> </div> </div> Окно всплывает как надо, все работает. В этом окне есть форма: <div id='m_form'> <div><strong>Отправить сообщение</strong></div> <div>Ваше имя <input type='text' id='m_name' /></div> <div>Ваш email <input type='text' id='m_email' /></div> <div><input type='hidden' value="Товар" id='m_theme' /></div> <div>Сообщение <textarea id="m_message"></textarea></div> <div><button>Отправить заявку</button> <span id='result'></span></div> </div> В которой есть input скрытого типа: <input type='hidden' value="Товар" id='m_theme' /> Так вот, нужно каким-то образом сделать сделать так, что бы в зависимости от того, на какую ссылку "тыкнет" пользователь, менялось value у данного input'a. Т. е. к примеру пользователь нажал на ссылку <a class="js__p_start" href="#__zakaz" id="ps2" title="Нетбуки">Заказать</a> и "Товар" (Т. е. значение value) у скрытой формы стало "Нетбуки". И так далее. Возможно и реализовать как-то по-другому. Через ID ссылок То есть создать таблицу, например где ps1 = Ноутбуки ps2 = Нетбуки ps3 = Планшеты И при нажатии на ссылку с таким id, value меняется на значение из этой таблицы. Но мне кажется с тайтлом будет быстрее и меньше мароки. Надеюсь понятно объяснил. Заранее благодарен за ваши ответы. |
если вы не знакомы с jquery, то вот его официальный сайт jquery.com
необходимо скачать библиотеку (10 версия последняя), она прям на самой первой, стартовой странице. и подключить: <script type="text/javascript" src="путь_к_библиотеке"></script> как вы говорили, через id лучше. т.к. это универсальный опознаветель... тогда ссылка будет выглядеть ДОПУСТИМ так: <a class="js__p_start" href="#__zakaz" id="z_link-1" title="Нетбуки">Заказать</a>
$('.js__p_start').click(function()
{
var id = parseInt($(this).attr('id').split('-')[1]); //находим id
var title = $(this).attr('title');
$('#m_theme').val(id);
// или
//$('#m_theme').val(title);
$('#m_form').css('display', 'block'); //показываем всплывающее окно
return false; //запрещаем переход по ссылке
});
|
Спасибо, но к сожалению так и не смог разобраться с вашим примером, однако, удалось существенно приблизится к желанной цели.
Получился вот такой скриптик
function newVal(){
var res = $("#zlink1").attr('title');
$('#m_theme').val(res);
return false;
}
Который при нажатии на ссылку: <a href="#__zakaz" id="zlink1" onclick="newVal()" title="Заказать 1"></a> Меняет значение атрибута value у формы с id="m_theme". Все работает отлично. Тока вот возникла такая проблема, ссылка не одна, их много. <a href="#__zakaz" id="zlink1" onclick="newVal()" title="Заказать 1"></a> <a href="#__zakaz" id="zlink2" onclick="newVal()" title="Заказать 2"></a> <a href="#__zakaz" id="zlink3" onclick="newVal()" title="Заказать 3"></a> <a href="#__zakaz" id="zlink4" onclick="newVal()" title="Заказать 4"></a> <a href="#__zakaz" id="zlink5" onclick="newVal()" title="Заказать 5"></a> Нужно что бы скрипт забирал title именно у того id ссылки, по которой кликнули. То есть как я понимаю заменить строчку:
var res = $("#zlink1").attr('title');
П.С. - пробовал по вашему варианту, ничего не вышло. |
MasterDmx,
var res = $(this).attr('title');
|
Не работает. Может быть я что не так вставляю?
Вот итоговый скрипт:
function newVal(){
var res = $(this).attr('title');
$('#m_theme').val(res);
return false;
}
|
<a href="#__zakaz" id="zlink1" onclick="newVal(this)" title="Заказать 1"></a>
function newVal(t){
var res = $(t).attr('title');
$('#m_theme').val(res);
return false;
}
|
<a href="#__zakaz" id="zlink2" onclick="newVal()" title="Заказать 2"></a>
<a href="#__zakaz" id="zlink3" onclick="newVal()" title="Заказать 3"></a>
<a href="#__zakaz" id="zlink4" onclick="newVal()" title="Заказать 4"></a>
<a href="#__zakaz" id="zlink5" onclick="newVal()" title="Заказать 5"></a>
<script>
$('a[href="#__zakaz"]').click(function(e){
$('#m_theme').val(this.title);
e.preventDefault();
});
</script>
|
| Часовой пояс GMT +3, время: 04:41. |