Показать сообщение отдельно
  #1 (permalink)  
Старый 10.01.2011, 09:02
Новичок на форуме
Отправить личное сообщение для feg16 Посмотреть профиль Найти все сообщения от feg16
 
Регистрация: 10.01.2011
Сообщений: 1

jQuery расширение отправки форм
Всем привет. Недавно начал знакомиться с jQuery и для своего проекта сделал некое расширение, позволяющее все формы привязать на одну функцию, которая перед отправкой будет проверять наличие данных в контролах формы, и при правильном заполнении отправлять данные на сервер и получать ответ.
Покритикуйте пожалуйста код

<script src="jquery-1.4.4.min.js"></script> 

<script>
  // Критиковать начинаем отсюда
  // Вспомогательная функция проверки и отправки данных формы для jQuery
  (function ($)
  {
    // Примает два парметра: адрес назначения и ссылку на функцию возврата
    $.fn.extend({postForm: function (Url, Callback)
    {
      // Строка формирования данных запроса
      var Data = "";
      // Флаг разрешающий отправку данных при верно введенных данных
      var Flag = true;      
      // Выбор всех контролов на форме, данные которых необходимо отправлять
      // Под выбор попадают input, textarea, checkbox. Отрезаются button, submit, reset
      $("#"+$(this).attr("id")+" :input:not(:button, :reset)").each( function () 
      {
        // Дополниткльная фишка, если в свойстве контрола указано что он "нужный"
        // То проверяется, ввели ли в него значение
        // Данная проверка может расшириться вторым параметром на длину введенной строки
        if ($(this).attr("required") && this.value == "")
        {
          // Если контрол "нужный" - то применим к нему эффект скрытия и показа,
          // а также установим на нем фокус ввода
          $(this).fadeOut(50, function () {$(this).fadeIn(300, function () {this.focus();});});
          // Фалзим флаг и выходим из функции
          Flag = false; return;
        }
        // Дополняем строку отправляемых данных парой контрол::значение
        // Тут присутсвует фишка "this.checked || this.value" сделанная
        // специально для IE, так как IE пофигу нажата ли галочка чекбокса,
        // он все равно возвращает значение "on", и реагирует только на свойство checked =(
        Data += this.id + "=" + (this.checked || this.value) + "&";         
      });

      // Далее если все данные введены верно - отправляем запрос на указанный ресурс
      // И при любом результате вызываем каллбэк функцию с текстом ответа.
      // Может правильно, может нет... но фиолетово, так как делать два каллбека
      // наверное бессысленно, ибо отедльную функцию обработки ошибок еще ни у кого не видел =)
      if (Flag) $.ajax({
        type: "post",
        async: false,
        url: Url,
        data: Data,
        success: function (XMLHttp) {if (Callback) Callback(XMLHttp); },
        // тут бы по хорошему как то вернуть текст ошибки, но к примеру текст
        // XMLHttpRequest cannot load file:///C:/data.html. Origin null is not allowed by Access-Control-Allow-Origin.
        // мне получить не удалось =(
        error: function (XMLHttp) {if (Callback) Callback("!" + XMLHttp.status); },
      });
      
      return false;
    }});      
  })(jQuery);
  // Критиковать заканчиваем здесь =)
</script>

<script>
  // Тестовый каллбек, который изменит текст дива
  // принятым ответом
  function TestCallback(value)
  {
    $("#test").html(value);
  }
</script>

<div id='test' style="border: 1px solid blue">anything new form</div><br><br>
<form id='mainform' onsubmit="return $(this).postForm('test.html', TestCallback)">
  <input type='hidden' id='inputhidden' value='1'>
  <textarea id='inputarea' required=true></textarea>
  <select id="inputselect">
    <option value='5'>value 5</option>
    <option value='6'>value 6</option>
  </select>
  <input type="submit" id="inputcheck" value="Post Data">
</form>
Ответить с цитированием