| |
|
|
| | Возникла необходимость осуществить ввод информации в форму и без перезагрузки проверить результат ввода. При неудаче вывести соответствующее сообщение, а при успехе записать и перейти на индексную страницу папки /detal/, в которой расположен скрипт.
Функцию я позаимствовал в наборе скриптов, но, как мне кажется, она излишне сложна. Наверняка из нее можно многое удалить, но у меня это не получается.
Другая проблема - не работает переход при успешной записи.
Как бы все это справить?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Форма ввода</title>
<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
<script src='js/jquery.form.js'></script>
<script>
function openWindow(module, id, success_href){
$('#modalContainer').modal({onShow: function (dialog) {
$.getJSON('json.php?id='+id+'&module='+module, function(data){
$.each(data, function(key, val){
switch(key){
case 'options':
var options_html = '';
var names_length = [];
var options_arr = $.parseJSON(val);
$.each(options_arr, function(id, name){
options_html+='<option value="'+id+'">'+name+'</option>';
names_length.push(name.length);
});
$('#gruppa').css('width',names_length.max()*9+'px');
$('#gruppa').html(options_html);
break;
case 'group_id_old':
$("#gruppa [value='"+val+"']").attr("selected", "selected");
break;
default:
$("#"+key).val(val);
break;
}
});
});
if(success_href!='undefined'){
$("input[name='success_href']").val(success_href);
}
}});
};
var options = {
target:"#output",
success: function(data){
if($(data).attr("id")=='success'){
$.modal.close();
}
}
};
</script>
</head>
<body bgcolor="#FFFFFF">
<form action="322.php" method="post" onsubmit="$(this).ajaxSubmit(options);return false;">
<input type="text" name="abc1">
<input type="text" name="abc2">
<input type=submit value="OK">
</form>
<br />
<br />
<table width="100%" bgcolor="#F2FFFF" >
<tr>
<td style="text-align:center;" colspan="2">
<div id="output"></div>
</td>
</tr>
</table>
|
А вот обработчик:
<?php
$abc1 = $_POST["abc1"];
$abc2 = $_POST["abc2"];
if (!$abc1) die ('<br />Ошибка ввода<br />');
file_put_contents('abc1.txt', $abc1);
file_put_contents('abc2.txt', $abc2);
// Переадресация при успешном сохранении
$success_href = (empty($_POST['success_href'])) ? '322.php' : $_POST['success_href'];
echo '<script id="success">location.href="'.$success_href.'";</script>';
|
| |
| |
|
| |
| |
|
|
| |
для: Владимир55
(30.01.2013 в 22:16)
| | | >Возникла необходимость осуществить ввод информации в форму и без перезагрузки проверить результат ввода.
"пробел" и "пустая строка" - это тоже "информация"
результаты ввода можно проверять, если только имеются конкретные требования - какой именно должна быть информация
в вашей форме всего два поля
если опишете требования к значениям, которые вводятся в каждое из полей, тогда будет смысл хоть чем-то вам помогать
ещё раз: укажите (опишите русскими словами) шаблоны возможных значений для обоих полей вашей формы
приблизительно так:
в первом поле должна быть:
а) непустая строка
б) содержащая минимум 3 символа, среди которых:
-- не должно быть пробелов
-- должен быть хотя бы один символ цифры, но не первым
и т.д. и т.п.
во втором поле должна быть:
а) ...
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(30.01.2013 в 22:16)
| | | По ссылке у вас вообще не работает должным образом - при ошибках форма пропадает.
1. На моей памяти здесь не раз говорилось, что нет никакой "оконной модальности" у слоя добавленного на страницу как бы он ни рядился в атрибуты окна. Из этого следует, что уже можно выбросить плагин simplemodal.js, тем более, что ваши потребности гораздо скромнее.
2. Диалог предполагает JSON формат данных отдаваемых сервером, чего у вас не наблюдается, а обработчик тем не менее слишком перегружен кодом обработки именно таких данных.
Предположим, что с ваших страниц могут отправляться три формы. Эти формы могут иметь разное число полей разных типов. Но даже в этом случае можно утверждать, что с точки зрения механизма взаимодействия клиент-сервер все три формы абсолютно идентичны (несколько особняком поле file, но это пока не учитываем). Следовательно можно обслуживать одним скриптом отправку этих форм на сервер, этим же скриптом обрабатывать ошибки, при чем не зависимо от того сколько полей у формы, что это за поля и какие данные содержат - все это знает сервер.
Вот в этом случае JSON формат, который бы возвращал ошибки был бы оправдан, и смысл в цикле обработки данных возвращаемых сервером тоже был бы. В данном случае (в вашем коде) этот смысл отсутствует напрочь.
Полям формы можно давать одно и тоже имя, как элементы одного массива. В этом случае вы уравниваете все поля формы. Сами имена вы можете формировать чисто случайно, с каждым запросом страницы они будут новые. Такой же принцип присвоения идентификатора для формы. Это позволит отправлять все три формы на сервер, идентифицировать их серверу, обрабатывать и возвращать результат, даже если все три формы могут одновременно быть на странице. Если форма на странице может быть только одна, то это упрощает задачу, хотя принцип остается тот же - это и обеспечивает диалог клиент-сервер с помощью одного скрипта.
Упрощенно все может выглядеть примерно так:
<?php
function setFieldsName($form, $k=null) {
if(isset($_SESSION['send']) && $k) unset($_SESSION['send'][$k]);
$s = 'abcdefghqwvijkmnoprstxz';
$k = $s[rand(0,22)].md5(uniqid(rand(),1));
$field = $s[rand(0,22)].md5(uniqid(rand(),1));
$_SESSION['send'][$k] = array('form'=>$form, 'field'=>$field);
return array($k, $field);
}
$fields = array(
'frm1'=>array('fld1','fld2'),
'frm2'=>array('fld1','fld3','fld4'),
'frm3'=>array('fld1','fld2','fld5','fld6')
);
function getError($e) {
$errors = array(
1=>'Error 1!',
'Error 2!',
'Error 3!',
'Error 4!',
'Error 5!'
);
return $errors[$e];
}
function check1($v) {
return empty($v) ? array('', getError(1)) : array((string)$v, 0);
}
function checkFields($form, $field) {
global $fields;
$check = array(
'fld1' => array('filter'=>FILTER_CALLBACK, 'options'=>'check1'),
'fld2' => array('filter'=>FILTER_CALLBACK, 'options'=>'check1'),
'fld3' => array('filter'=>FILTER_CALLBACK, 'options'=>'check1'),
'fld4' => array('filter'=>FILTER_CALLBACK, 'options'=>'check1'),
'fld5' => array('filter'=>FILTER_CALLBACK, 'options'=>'check1'),
'fld6' => array('filter'=>FILTER_CALLBACK, 'options'=>'check1')
);
$field = array_combine($fields[$form], $field);
$check = array_intersect_key($check, $field);
$field = filter_var_array($field, $check);
$val = array_values(array_map('current',$field));
$err = array_diff(array_map('end',$field), array(0));
if($err) {
$key = array_intersect($fields[$form], array_keys($err));
$err = array_combine(array_keys($key), array_values($err));
}
return array('v'=>$val, 'e'=>$err);
}
session_start();
if(isset($_POST['f']) && isset($_SESSION['send']) && array_key_exists($_POST['f'], $_SESSION['send'])) {
$form = $_SESSION['send'][$_POST['f']]['form'];
end($_POST);
if($_SESSION['send'][$_POST['f']]['field'] == key($_POST) && count(current($_POST)) == count($fields[$form])) {
$field = array_map('trim',array_map('stripslashes',array_values($_POST[key($_POST)])));
$check = checkFields($form, $field);
if($check['e']) echo json_encode($check, JSON_FORCE_OBJECT); //если ошибки полей
else { //сохранение данных и выдача сообщения с переходом
echo json_encode(array('v'=>'<div class="ok"><div>OK!</div><div onclick="location.href = location;">✖</div></div>'));
}
}
exit;
}
$frm = setFieldsName('frm2');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>New</title>
<style>
.field {position: relative; width: 200px; margin-bottom: 6px;}
[type|=text] {width: 196px; height: 19px;}
textarea {width: 194px; height: 140px;}
.error {
position: absolute;
top: 0;
left: 0;
background: #C50101;
color: #fff;
}
.ok {
position: absolute;
width: 200px;
height: 60px;
background: #ccc;
left: 300px;
top: 150px;
z-index: 100;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(function(){
$('form').submit(function(){
var f = this.id, d = 'f='+f+'&'+$(this).serialize();
$(this).find('div.error').remove();
$.post(location, d, function(dt){
if(dt.e) {
var elm = document.getElementById(f).elements;
for(var i=0, k=elm.length-1; i<k; i++) {
var e = $(elm[i]).val(dt.v[i]);
if(dt.e[i]) $('<div class=error>').appendTo(e.parent()).css({
width:e.parent().width(),
height:e.parent().height()
}).text(dt.e[i])
.data('e',e)
.one('click',function(){
$(this).data('e').focus();
$(this).remove();
});
}
} else {
$('body').append(dt.v);
}
}, 'json');
return false;
});
});
</script>
</head>
<body>
<form id="<?=$frm[0]?>">
<div class="field"><input type="text" name="<?=$frm[1]?>[]" /></div>
<div class="field"><input type="text" name="<?=$frm[1]?>[]" /></div>
<div class="field"><textarea name="<?=$frm[1]?>[]"></textarea></div>
<input type="submit" value="Send" />
</form>
</body>
</html>
|
Из примера видно, что основная работа, это сервер. С каждым запросом страницы формируются случайные новое имя для полей формы и ее id. Эти имена хранятся в сессии, а также хранится имя формы источника. По этому имени сервер будет присваивать полученным полям формы истинные имена полей (массив $fields). Этот массив фактически описывает форму - сколько в ней полей, их имена, которые в свою очередь служат ссылкой на обработчики проверки их значений.
Имена полей этого массива могут повторятся (в примере это видно) в каждой из форм, например, это поле имени, электронного адреса, и т.п., а значит и обработчик этих полей для всех форм будет один и тот же. В примере описан всего один обработчик (пользовательская функция) для всех полей, но в реальности это должны быть обработчики по всем условиям для каждого из полей. В случае ошибки по какому либо условию из массива ошибок выбирается ошибка (по номеру ее) и возвращается как массив.
Данная обработка базируется на строгой последовательности полей формы (их индексам) и индексами массива форм описывающим имена этих полей. В случае, если форма будет содержать такие элементы как checkbox и radio, то может произойти сбой в этой последовательности. В этом случае имена полей формы должны быть принудительно проиндексированы, а проверку производить не по соответствию количества элементов формы (при ее получении), а по индексам. Такие поля могут быть тоже проверяемые (если требуется обязательный выбор), или нет. При этом описать такую проверку (или простое преобразование с проверкой) таким же подходом как и для других полей труда не составит.
Если проверка возвращает ошибки (массив ключа "е" не пуст), то клиенту возвращается массив ошибок и значения полей после проверки. Ошибки возвращаются под индексами полей в форме, поэтому при формировании JSON данных обязательно указание флага JSON_FORCE_OBJECT.
Клиент получая ответ сервера, проверяет наличие ключа "е", и если он есть, значит выводит ошибки, которые являются слоями перекрывающими поля формы. Если ошибок нет, выводит сообщение, после закрытия которого будет осуществлен переход (можно и сразу делать переход без вывода сообщения). В случае checkbox и radio, и если они также проверяемые, то в функцию достаточно добавить проверку типа поля формы, для того чтобы вывести для этого элемента сообщение, которое будет отображаться специальным элементом с соответствующим стилем.
Попробуйте любую форму, соответствующим образом описав ее на сервере, и можете убедиться, что изменять код при этом не потребуется. И сравните размер кода клиента ваш и примера. | |
| |
|
|
| |
|
|
| |
для: confirm
(31.01.2013 в 04:54)
| | | ЯСА (31.01.2013 в 01:18)
В своем коде я сконцентрировал вопрос на том, в чем он состоит на самом деле. В реальном коде полей много и их обработка связана с обращением к удаленной базе, но все это прекрасно работает и рассматривать это нет нужды.
confirm (31.01.2013 в 04:54)
Модальных окон здесь нет и JSON не нужен – это я и сам прекрасно вижу. Приведенную функцию я использую там, где действительно есть всплывающее окно. А в этом случае функция может быть гораздо проще, но сократить ее без нарушения общей работоспособности мне не удается – вот в этом и есть проблема.
И еще проблема в переадресации.
Форма только одна и одной останется.
В общем, меня интересует ТОЛЬКО решение поставленной задачи: чтобы должным образом заработал пример и код был как можно проще.
Вот только это.
=============
Confirm, большое спасибо за очень интересную информацию! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(31.01.2013 в 11:03)
| | | Спасибо, решение найдено! | |
| |
|
|
|
