множественные элементы
Есть html страница, jQuery
На странице десяток “box”: <div class=”box”> <input value=”Произвольно для каждого ”> <button>Отправить</button> </div> Как реализовать проверку, что что-то ввели в input? Вернее по клику на любом button (‘.box button’) – их на странице много, проверили, что пользователь ввел текст в конкретный input. Если ввод сделан -> AJAX – PHP –AJAX выдали ответ в «своем» box Если ввода не было – вывели сообщение «Отправка недоступна» в «своем» box Подскажите куда копать? |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="box">
<input value="Произвольно для каждого ">
<button>Отправить</button>
</div>
<div class="box">
<input value="Произвольно для каждого ">
<button>Отправить</button>
</div>
<div class="box">
<input value="Произвольно для каждого ">
<button>Отправить</button>
</div>
<script>
$(function() {
$('.box button').on('click', function() {
var $parent = $(this).parent();
if ($(this).prev().val() !== '') {
$parent.find('span.errspan').remove();
alert('ajax');
} else {
if (!$parent.find('span.errspan').length) {
$parent.append( $('<span class="errspan">error</span>').css('color', 'red') );
}
}
});
});
</script>
</body>
</html>
|
Спасибо за ответ, но не то совсем.
Есть input, с подсказкой, что нужно в него ввести. Пока пользователь не ввел что-то свое - отправлять нельзя. Смотрим на пример ваш. Сразуже - Клик по "Отравить" - получаем "ajax" - типо данные введены верно, отправляем запрос. Это уже ошибка. данные не введенны пользователем, только клик, а запрос уже пошел.
01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
06 </head>
07 <body>
08 <div class="box">
09 <input value="123">
10 <button>Отправить</button>
11 </div>
12
13 <div class="box">
14 <input value="456">
15 <button>Отправить</button>
16 </div>
17
18 <div class="box">
19 <input value="789">
20 <button>Отправить</button>
21 </div>
22
23 <script>
24 $(function() {
25
26 $('.box button').on('click', function() {
27 var $parent = $(this).parent();
28 if ($(this).prev().val() !== '') {
29 $parent.find('span.errspan').remove();
30 alert('ajax');
31 } else {
32 if (!$parent.find('span.errspan').length) {
33 $parent.append( $('<span class="errspan">error</span>').css('color', 'red') );
34 }
35 }
36 });
37
38 });
39 </script>
40
41 </body>
42 </html>
Как тут кнопочку "Просмотреть прикрутить?" Уточняю проблему: Немного скорректировал html код. Считаем, что html больше добавлять нельзя. Если ничего не ввели - но кликнули - сообщение об ошибке в своем диве выводим. Если что-то ввели , или один символ убрали (123 != 12 ) отправляем AJAX |
Цитата:
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="box">
<input value="123">
<button>Отправить</button>
</div>
<div class="box">
<input value="456">
<button>Отправить</button>
</div>
<div class="box">
<input value="789">
<button>Отправить</button>
</div>
<script>
$(function() {
$('.box button').on('click', function() {
var $parent = $(this).parent();
var val = $(this).prev().val();
if (val !== $(this).prev().attr('value') && val !== '') {
$parent.find('span.errspan').remove();
alert('ajax');
} else {
if (!$parent.find('span.errspan').length) {
$parent.append( $('<span class="errspan">error</span>').css('color', 'red') );
}
}
});
});
</script>
</body>
</html>
|
YES! Про примеру - все работает, с кодом надеюсь разберусь.
СПАСИБО! |
| Часовой пояс GMT +3, время: 23:37. |