Made a script, if the required fields are filled, then the send button is shown, and if not, there is no button.

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"); } }

But for some reason, when there are many fields, the button is not shown. And if I leave only the field - name, everything works.

  • one
    I think I have come across a similar plugin for jQuery, do you really need your code? if not, look for the plugin. - Specter

4 answers 4

 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'); } });

Of course the test part can be made more beautiful

    It’s better to do it differently - make a separate class for the required fields (in CSS). Then the processing can be rewritten into one function and this handler can be hung on all the required fields.

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

    I'll get to the house, check the code and add.

    • Made all the fields with one class, in the end when the top is filled - the button is displayed. Does not even respond to other fields. - Tchort
    • notice this line if (name.length == 0) - makregistr
     $.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(); ... });

      Okay, and if you make two classes - one for the blank fields and hang it when loading the form. then gradually, when filling out the form, change the class of the required fields (or disable it altogether) and check if the elements are with a class indicating empty elements. If not, show the button.