Автоотправка формы
Здравствуйте! В JS совсем недавно(( Не знаю как реализовать автоотправку формы с проверкой.
Задача: - при загрузке страницы фокус на первое поле ввода; - автоотправка первого поля, если введено 8 цифр; - в случае успешности заполнения первого поля, переключение фокуса на 2е; - автоотправка второго поля, если введено 8 цифр; Зараннее благодарен! |
<div style="padding-top:50px;">
<h3>Выдать книгу</h3>
<form action="" method="post" >
<table border="1" class="menu-main">
<tr>
<td style="text-align: center; width: 100px">Читатель</td>
<td><input type="text" style="width: 100px" name="reader_barcode" id="reader_barcode"></td>
<td style="width: 300px"><?if(isset($readers))
{?>
<?foreach($readers as $reader)
{?>
<br>Фамилия: <?echo $reader->user_last_name;?></br>
<br>Имя: <?echo $reader->user_first_name;?></br>
<br>Отчество: <?echo $reader->user_patronymic;?></br>
<?}?> <?}?>
</td>
</tr>
</form>
<form action="" method="post" id='find_book'>
<tr>
<td style="text-align: center" style="width: 100px">Книга</td>
<td><input type="text" style="width: 100px" name="book_barcode"></td>
<td style="width: 300px"><?if(isset($books))
{?>
<?foreach($books as $book)
{?>
<br>Фамилия: <?echo $book->author_last_name;?></br>
<br>Имя: <?echo $book->author_first_name;?></br>
<br>Название: <?echo $book->content;?></br>
<?}?> <?}?>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" id="find_reader" style="width:100%; height:50px;" value="Выдать" name="givebookbtn"></td>
</tr>
</table>
</form>
</div>
|
Цитата:
|
Lobezki,
<input type="text" id="input1" value="" maxlength="8">
<input type="text" id="input2" value="" maxlength="8">
<script>
var x = document.getElementById('input1');
var y = document.getElementById('input2');
x.focus();
x.onkeyup = x.onpaste = y.onkeyup = y.onpaste = function(){
var z = this;
setTimeout(function(){
z.value = z.value.replace(/[^\d]/g, '');
if (z.value.length == 8) {
y.focus();
// AJAX запрос
}
}, 0);
};
</script>
|
Rise, спасибо! Но возникает ошибка в консоле Хрома:
Uncaught TypeError: Cannot set property 'onpaste' of null Только забыл уточнить немаловажную деталь. После отправки штрих-кода через ajax-запрос, БД ищет в таблице строчку с соответствующим значением штрих-кода и на этой же странице должен отобразиться результат в полях: <br>Фамилия: <?echo $reader->user_last_name;?></br> <br>Имя: <?echo $reader->user_first_name;?></br> <br>Отчество: <?echo $reader->user_patronymic;?></br> Запрос ajax написал такой:
function sendreaderinfo() { type:'post', url:'ajax/reader',
data: "reader_barcode" + reader_barcode,
dataType: "json", response:'text', success:function (data) { if(data.result) { document.getElementById('пока еще не создал') = result; }
}
};
Action в Ajax.php выглядит так:
public function action_reader()
{
$reader_barcode = Arr::get($_POST, 'reader_barcode', '');
$data['readers'] = ORM::factory('Adduser')
->where('user_barcode', '=', $reader_barcode)
->find_all();
echo json_encode(array('result' => $data));
}
P.S. Через контроллер PHP без javascript'a всё рабоатет отлично. Но это при нажатии на кнопку вручную(((( |
Rise,
глянул. Ошибка перестала вылетать, но на странице не происходит ничего. Даже не пойму на каком этапе что делаю не так. То ли результат из БД не приходит, то ли я не знаю что. |
<script type="text/javascript">
function runajax()
{
var reader_barcode = $("#reader_barcode");
$.ajax({
type: "POST",
data: "reader_barcode=" + reader_barcode,
url: "ajax/finduser",
dataType: "json",
success: function(data)
{
var temp = data.user_last_name;
$("#reader_last_name").text(temp);
}
})
}
$(document).ready(function(){
$("#sendAjax").click(runajax);
});
</script>
<form action="" method="post" > <table border="1" class="menu-main"> <tr> <td style="text-align: center; width: 100px">Читатель</td> <td><input type="text" style="width: 100px" name="reader_barcode" id="reader_barcode" maxlength="8"></td> <td style="width: 300px"> <br>Фамилия: <div id="reader_last_name"></div></br> <br>Имя: </br> <br>Отчество: </br> </td> <td colspan="3"><input type="submit" style="width:100%; height:50px;" value="Выдать" name="userbtn" id="sendAjax"></td> </tr> </form>
public function action_finduser()
{
$reader_barcode = Arr::get($_POST, 'reader_barcode', '');
$data = ORM::factory('Adduser')
->where('user_barcode', '=', $reader_barcode)
->find_all();
echo json_encode($data);
}
P.S. Запрос в самой кохане в ajax.php правильный, работает. |
| Часовой пояс GMT +3, время: 00:58. |