0

Сделал скрипт, если нужные поля заполнены, то показывается кнопка отправить, а если нет - кнопки нет.

var nameStat;
var mailStat;
var messageStat;
$(function() {
    $("#user_name").change(function(){  //отслеживаем поле с id name
    name = $("#user_name").val(); //в переменную name закидываем данные из input

        if(name.length == 0){ //если в поле ничего не введено
            nameStat = 0;  // в переменную записываем 0
                        button();  // вызываем функцию
            window.alert('Введите логин!');         
        }else{
            nameStat = 1;  // если всё нормально, то записываем 1
                        button();  // вызываем функцию
        }
    });
    $("#user_email").change(function(){  //отслеживаем поле с id name
    name = $("#user_email").val(); //в переменную name закидываем данные из input

        if(name.length == 0){ //если в поле ничего не введено
            mailStat = 0;  // в переменную записываем 0
                        button();  // вызываем функцию
            window.alert('Введите email!');         
        }else{
            mailStat = 1;  // если всё нормально, то записываем 1
                        button();  // вызываем функцию
        }
    });
    $("#message").change(function(){  //отслеживаем поле с id name
    name = $("#message").val(); //в переменную name закидываем данные из input

        if(name.length == 0){ //если в поле ничего не введено
            messageStat = 0;  // в переменную записываем 0
                        button();  // вызываем функцию
            window.alert('Введите message!');           
        }else{
            messageStat = 1;  // если всё нормально, то записываем 1
                        button();  // вызываем функцию
        }
    });
});
function button(){
    if(nameStat == 1 && mailStat == 1 && messageStat == 1){
        $("#submit").show("slow");
    }else{
        $("#submit").hide("slow");
    }
}

Но почему-то когда полей много, кнопка не показывается. А если я оставляю только поле - name, все работает.

1
  • 1
    по-моему я встречал подобный плагин для jQuery, вам обязателно свой код нужен? если нет, поищите плагин.
    – Spectre
    16 окт 2011 в 17:58

4 ответа 4

2
var form = $('#contacts');
    var inputs = form.find('input');
    form.change(function(){
        var status = [];
        inputs.each(function(){
            if(this.value == ''){
                return status.push('no');
            }
            else{
                return status.push('ok');
            }
        });
        console.log(status);
        if(status[0] == 'ok' && status[1] == 'ok' && status[2] == 'ok'){
            console.log('All ok');
        }
    });

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

2

Лучше сделать по-другому - для нужных полей сделать отдельный класс (в CSS). Тогда обработку можно будет переписать в одну функцию и повесить этот обработчик на все необходимые поля.

$(".class").change(function(){
//тут нада определить имя поля (или его ID) и по ней выбрать переменную JS
(то есть если имя поле name - переменная тоже name)
if(name.length == 0){ //если в поле ничего не введено
            messageStat = 0;  // в переменную записываем 0      
            window.alert('Введите message!');           
        }else{
            messageStat = 1;  // если всё нормально, то записываем 1
             }
          button();  // вызываем функцию

});

До дома доеду, проверю код и дополню.

2
  • Сделал все поля с одним классом, в итоге когда заполнено верхнее - кнопка выводиться. На остальные поля даже не реагирует.
    – Tchort
    14 окт 2011 в 8:48
  • обратите внимание на эту строку if(name.length == 0)
    – makregistr
    14 окт 2011 в 12:13
1
$.fn.setupSendAppearance=function(){
  var inputsToFillCount=0;
  var checkInput=function(el){
    var element=$(el);
    var filled=!element.is('.required') 
               || (element.is('input') ? element.val() : element.text());
    var prevFilled=element.data('filled');
    element.data('filled', filled);
    if(prevFilled!==false && !filled) inputsToFillCount=inputsToFillCount+1;
    else if (prevFilled===false && filled) inputsToFillCount=inputsToFillCount-1;
    if(inputsToFillCount>0) $(this).find('.submit').hide();
    else $(this).find('.submit').show();
  };
  var inputs=$(this).find(".input");
  inputs.each(checkInput);
  inputs.change(funtion(ev) { checkInput(ev.target); })
        .keyup(funtion(ev) { checkInput(ev.target); });
};
...
$(function () {
  ...
  $('#ourSendForm').setupSendAppearance();
  ...
});
0

Окей,а если сделать два класса - один для незаполненных полей и вешать его при загрузки формы. потом постепенно при заполнении формы менять класс у нужных полей(или отключать его вовсе) и проверять еслть ли элементы с классом,указывающим на незаполненные элементы. Если таких нет - показывать кнопку

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.