为什么我的提交按钮填充

Why is my submit button populating?

本文关键字:填充 按钮 提交 我的 为什么      更新时间:2023-09-26

我想要求在启用提交按钮之前填写三个字段。下面的jquery是可以工作的,但是提交按钮是启用的,即使不是所有三个字段都要填充,除了下拉列表选择。请不要介意混乱,我尝试了几种不同的方法来调试这个,但我在损失。如前所述,选择列表正常工作。请查看jsfiddle示例。

http://jsfiddle.net/FPtCE/

HTML:

---------高媒介低

<input class="required" id="id_title" name="title" placeholder="Please enter a title."     type="text" />
<textarea class="required" id="id_comment" name="comment" placeholder="Comment is required">
</textarea>
<input id='submit' type="Submit" value="Submit Comment">
</form>
jquery:

$(document).ready(function() {
 var val1 = false;
 var val2 = false;
 var val3 = false;
$('input[id="submit"]').attr('disabled','disabled');                           
  $('textarea[id="id_comment"]').keyup(function() {
    if (val2 == false || val3 == false ||       (!$.trim($('textarea[id="id_comment"]').val())) && ($('textarea[id="id_comment"]').val() == '')) {
        $('input[id="submit"]').attr('disabled','disabled');
        val1 = false;
     alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
  else{  
    $('input[id="submit"]').removeAttr('disabled');
    val1 = true;
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
  }
});
$('input[id="id_title"]').keyup(function() {
  if (!$.trim($('input[id="id_title"]').val())){
    if (val1 == false && val3 == false){
     if ($('input[id="id_title"]').val() == ''){
        $('input[id="submit"]').attr('disabled','disabled');
        val2 = false;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
   }
  }
      else if (!$.trim($('input[id="id_title"]').val())){
    if (val1 == false && val3 == false){
     if($('input[id="id_title"]').val() != '') {
        $('input[id="submit"]').attr('disabled','disabled');
        val2 = true;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
   }
  }
  else{  
    $('input[id="submit"]').removeAttr('disabled');
    val2 = true;
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
  }                                                                                       
});                                                                                        
$('select[id="id_priority"]').change(function() {
  if (val1 == false && val2 == false && ($('select[id="id_priority"]').val() == '')) {
        $('input[id="submit"]').attr('disabled','disabled');
        val3 = false;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
  else if (val1 == false && val2 == false && ($('select[id="id_priority"]').val() != '')) {
        $('input[id="submit"]').attr('disabled','disabled');
        val3 = true;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
  else{  
    $('input[id="submit"]').removeAttr('disabled');
    val3 = true;
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
  }   
});
});     

如果这是你需要的,请检查:-

小提琴

 function checkSubmit() {
        $('#submit').prop('disabled', !((($('#id_priority').val() !== "")
         && $('#id_title').val() !== "" 
         && $('#id_comment').val() !== "")));
    }

最简单的版本:- 小提琴

$(document).ready(function () {
    $('#submit').attr('disabled', 'disabled');
    $('#id_comment').keyup(checkSubmit);
    $('#id_title').keyup(checkSubmit);
    $('#id_priority').change(checkSubmit);
    function checkSubmit() {
         $('#submit').prop('disabled', !(($('#id_priority').val() !== "") 
                      && $.trim($('#id_title').val()) !== "" 
                      && $.trim($('#id_comment').val())!== ""));
         }
});