Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Спецу: Зависимые поля ввода (https://javascript.ru/forum/dom-window/21819-specu-zavisimye-polya-vvoda.html)

SidneyShaw 25.09.2011 19:02

Спецу: Зависимые поля ввода
 
Есть форма регистрации, где помимо личных данных клиент вводит номер пасспорта/удостоверения личности. Клиент выбирает из списка пасспорт либо уд. личности (смотря какая из них имеется). Номер пасспорта состоит из 7 цифр, а удост. личности из 9. Следующее поле ввода предназначен для ввода номера пасспорта/удостоверения (смотря, что клиент выбрал из списка). Как сделать так, чтобы если клиент выбрал пасспорт то клиент мог ввести только 7 цифр, а удост. личности то 9. В противном случае, должна выскакивать ошибка. Алгоритм мне понятен, с реализацией проблеммы. Приведите или скиньте ссылки на примеры

Александр х@к 25.09.2011 20:24

на многих сайтах есть, а код в исходнике

Триви 25.09.2011 20:24

Приблизительно так:

<style>
#udost, #udost_stat{
  display: none;
}
</style>

<input type="radio" name="doc_type" value="p" checked="checked"/> Паспорт
<input type="radio" name="doc_type" value="u"/> Уд. личности<br />
<input type="text" name="passport" id="passport" onkeyup="countDownchars(this.id, '7');" value="" maxlength=7> <span id="passport_stat">7</span>
<input type="text" name="udost" id="udost" onKeyUp="countDownchars(this.id, '9');" value="" maxlength=9> <span id="udost_stat">9</span>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$('input[type=radio]').click(function(){
  if($(this).val()=='p') {
    $('#udost, #udost_stat').css('display', 'none');
    $('#passport, #passport_stat').css('display', 'inline');
  }
  if($(this).val()=='u') {
    $('#passport, #passport_stat').css('display', 'none');
    $('#udost, #udost_stat').css('display', 'inline');
  }
});

function countDownchars (element_id, maxchars) {
  $('#'+element_id).keyup(function (){
    number = $('#'+element_id).val().length;
    if(number <= maxchars){
      $('#'+element_id+'_stat').html(maxchars-number).css('color', '#000');
    }
    if(number == maxchars) {
      $('#'+element_id).attr({ maxlength: maxchars});
      $('#'+element_id+'_stat').css('color', '#f00');
    }
  });
}
</script>

Александр х@к 25.09.2011 20:32

а ещё поставь pattern здесь http://htmlbook.ru/html/input/pattern
чтоб вводить что-то определённое

Триви 25.09.2011 21:14

Цитата:

Сообщение от Александр х@к (Сообщение 128038)
а ещё поставь pattern здесь http://htmlbook.ru/html/input/pattern
чтоб вводить что-то определённое

Отличный кросс-браузерный способ! :D


Часовой пояс GMT +3, время: 18:13.