formularze w jQuery

Wykorzystanie datalist – lista sugerowanych pozycji.

<script type="text/javascript">
  FormWeb=new Object();
  FormWeb.goForm=function(){
    var mountain = document.myForm.summit.value;
    alert(mountain)
  }
</script>

<datalist id="myMountains">
<option value="Mount Everest Mountain in Asia" label="Everest">
<option value="Mount Kilimanjaro Mountain in Tanzania" label="Kilimanjaro">
<option value="Mount Denali Mountain in Alaska" label="Denali">
</datalist>


<form name="myForm">
  <label>Your Mountain:</label>
  <input type="text" list="myMountains" name="summit">
  
  Summary:
  <input type="button" name="submit" value="Show" onClick="FormWeb.goForm()">
</form>

 

Pluginy jQuery wspomagające działanie opcji HTML5:

Magicsuggest – funkcja autouzupełniania

elastyczna lista rozwijana (combobox) z funkcją autouzupełniania. Jej funkcje:

  • możliwość wyboru kilku opcji przy przyciśnięciu przycisku CTRL
  • możliwość dalszego wprowadzania tekstu po naciśnięciu ENTER
  • przypinanie wybranych elementów po prawej stronie
  • zastosowanie stylu elementu z usług Google
  • filtrowanie kolumn

 

Opcje uzupełnienia listy rozwijanej danymi:

  • brak źródła danych – wartość null – nie podaje podpowiedzi, pozostaje możliwość wprowadzenia kilku wartości jeśli opcja FreeEntries posiada wartość true (domyślna wartość)
  • statyczne źródło danych – tablica obiektów JSON, tablica ciągów znaków, ciąg wartości rozdzielonych przecinkami (CSV)
  • adres URL – gdzie komponent pobiera dane w formacie JSON, pobieranie za pomocą żądań Ajax typu POST, gdzie parametrem zapytania będzie wprowadzony tekst
  • funkcja – zwracająca tablicę obiektów JSON, do działania tego mechanizmu wystarczy jedna funkcja wywołania zwrotnego lub wartość zwracana przez tą funkcję
  <link href="_css/magicsuggest.css" rel="stylesheet" type="text/css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script src="_js/magicsuggest-min.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      var jsonData = [];
      var mountains = 'Everest,Aconcagua,Denali,Kilimanjaro,Vinson,Blanc,Kosciuszko'.split(',');
        for(var i=0; i<mountains.length; i++) jsonData.push({id:i,name:mountains[i]});
        var city = $('#field-mountain').magicSuggest({
          data: jsonData,
          resultAsString: true,
          maxSelection: 1,
          maxSelectionRenderer: function(){}
        })
    });
  </script>

<label for="field-mountain">Mountain: </label>
<input id="field-mountain" type="text"/>

Pickadate – wybór daty i czasu

pozwala na stworzenie własnego interfejsu niezależnego od przeglądarki czy urządzenia.

Zawiera wiele opcji:

  • tłumaczenie na ok 40 języków,
  • funkcję dotyku i keyboard friendliness
  • wprowadzenia własnego nazewnictwa/ skrótów nazw miesięcy, dni
  • wybór ograniczonego zakresu daty i czasu
  <link href="_css/themes/default.css" rel="stylesheet" type="text/css">
  <link href="_css/themes/default.date.css" rel="stylesheet" type="text/css">
  <link href="_css/themes/default.time.css" rel="stylesheet" type="text/css">

   <label>Pick a date and time</label>
    <input class="datepicker" type="text" placeholder="Enter the date">
    <input class="timepicker" type="text" placeholder="Enter the time">

  <script src="http://code.jquery.com/jquery-1.7.0.min.js" type="text/javascript"></script>
 
  <script src="_js/picker.js" type="text/javascript"></script>
  <script src="_js/picker.date.js" type="text/javascript"></script>
  <script src="_js/picker.time.js" type="text/javascript"></script>

  <script type="text/javascript">
    $('.datepicker').pickadate();
    $('.timepicker').pickatime()
  </script>

 

Blokowanie wielokrotnego przesyłania formularzy

pozwala wyłączyć kolejne przesyłanie danych z formularza oraz zmienić treść buttonu na informację o przesyłaniu danych:


$('#formID').submit(function(){
  $('input[type=submit]').prop('disabled', true);
});

$('#formID').submit(function(){
  var submitButton = $(this).find(':submit');
  submitButton.prop('disabled', true);
  submitButton.val('transfer in progress')
});


$('#haveNoChildren').click(function(){
  $('#children input').prop('disabled', true).css('backgroundColor', '#ccc');
  $('#children label').css('color', '#bbb');
});
$('haveChildren').click(function(){
  $('#children input').prop('disabled', false).css('backgroundColor', '');
  $('#children label').css('color', '');  
});

–

Tooltipster – podpowiedzi – tooltip

pojawia się po umieszczeniu kursora myszy na danym elementem i wyświetla dodatkowe informacje w osobnym okienku.

 

IdealForms

tworzenie responsywnych formularzy

#form#jQuery