Статьи

Потрясающие фрагменты jQuery для работы с формами

Октябрь 24, 2018

Формы, безусловно, очень важная часть веб-сайта, но они также могут быть немного сложными в обращении. Чтобы облегчить вам работу с HTML-формами, я собрал несколько очень полезных фрагментов кода jQuery из моей личной библиотеки фрагментов в этой статье.

Отключите «ввод» ключ в ваших формах

Если вы хотите запретить посетителям случайно отправлять вашу форму, нажав клавишу «Ввод», вы можете использовать этот фрагмент, чтобы отключить использование клавиши «Ввод» в ваших формах.

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

Источник: http://www.catswhocode.com/blog/10-awesome-jquery-snippets

Очистить данные формы

Нужно очистить все данные формы? Вот удобная функция для этого.

function clearForm(form) {
 // iterate over all of the inputs for the form
 // element that was passed in
 $(':input', form).each(function() {
  var type = this.type;
  var tag = this.tagName.toLowerCase(); // normalize case
  // it's ok to reset the value attr of text inputs,
  // password inputs, and textareas
  if (type == 'text' || type == 'password' || tag == 'textarea')
    this.value = "";
  // checkboxes and radios need to have their checked state cleared
  // but should *not* have their 'value' changed
  else if (type == 'checkbox' || type == 'radio')
    this.checked = false;
  // select elements need to have their 'selectedIndex' property set to -1
  // (this works for both single and multiple select elements)
  else if (tag == 'select')
    this.selectedIndex = -1;
 });
};

Источник: http://www.jquery4u.com/forms/jquery-function-clear-form-data/#.UI02J2knDF8

Найти это флажок проверен

Узнайте, установлен ли один флажок или нет. Функция вернет trueили false:

$('#checkBox').attr('checked');

Источник: http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html

Включить / отключить элементы формы

Хотите сделать ваши формы более удобными для пользователя? Затем вы можете включить или отключить элементы формы, такие как кнопка отправки. Например, вы можете отключить его по умолчанию и включить его, только если посетитель заполнил форму должным образом.

$("#submit-button").attr("disabled", true);

И чтобы снова включить ранее отключенный ввод:

$("#submit-button").removeAttr("disabled");

Источник: http://css-tricks.com/snippets/jquery/disable-re-enable-inputs/

Включить кнопку отправки, если текст введен

Вот вариант приведенного выше фрагмента, на этот раз позволяющий автоматически включить кнопку отправки, если в #usernameполе ввода введен какой-либо текст .

$('#username').keyup(function() {
    $('#submit').attr('disabled', !$('#username').val()); 
});

Источник: http://cakebaker.42dh.com/2009/01/13/enabling-submit-button-if-text-entered/

Отправить форму программно

Очень просто, но определенно полезно: вот как программно отправить форму с помощью jQuery. 

$("#myform").submit();

Источник: http://www.jquery4u.com/snippets/jquery-simulate-form-submit/

Запретить многократную отправку вашей формы

Многократные представления одной и той же формы, безусловно, являются одной из наиболее распространенных проблем при работе с веб-формами. Вот супер полезный кусок кода, чтобы предотвратить несколько представлений одной и той же формы.

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

Источник: http://damienalexandre.fr/post/2009/08/02/jQuery-eviter-la-soumission-multiple-d-un-formulaire

Выделите связанную метку при вводе в фокусе

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

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

Источник: http://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/

Динамически добавлять элементы формы

Если вам нужно динамически добавлять элементы формы, приведенный ниже фрагмент кода представляет собой простой способ сделать это.

//change event on password1 field to prompt new input
$('#password1').change(function() {
 //dynamically create new input and insert after password1
 $("#password1").append("<input type='text' name='password2' id='password2' />");
});

Источник: http://www.jquery4u.com/forms/jquery-dynamically-add-form-elements/

Автоматическое заполнение полей выбора с помощью Ajax & JSON

При создании интерактивной формы очень полезно иметь возможность получать некоторые данные с помощью ajax и использовать их для заполнения элемента select.
В следующем фрагменте показано, как получить данные из php-файла с именем select.php(строка 3) и заполнить его элементом select.

$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

Источник: http://remysharp.com/2007/01/20/auto-population-select-boxes-using-jquery-ajax/

35
Share: