2017-03-02 45 views
0

刚刚尝试此JSFiddle以获得流畅的表单控件。但我无法得到那个工作。提交但仍然被禁用。我猜textareas也包括在内。填写表单时将不会启用提交按钮

(function() { // fiddle 
 
    $("form > input").keyup(function() { 
 
     var empty = false; 
 
     $("form > input").each(function() { 
 
      if ($(this).val() == "") { 
 
       empty = true; 
 
      } 
 
     }); 
 

 
     if (empty) { 
 
      $("#submit").attr("disabled", "disabled"); 
 
     } else { 
 
      $("#submit").removeAttr("disabled"); 
 
     } 
 
    }); 
 
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<div id="Contact"> 
 
    <h1> Contact Form </h1> 
 
    <p> Please fill in the form to send message to the site administrator </p> 
 
    <br/> 
 
</div> 
 
<form name="msg" method="post"> 
 
    <div id="form" align=center> 
 
     <ul id="items"> 
 
      <li align=center> 
 
       <input type="text" name="username" placeholder="Username or Real Name" class="textField" /> 
 
      </li> 
 
      <li align=center> 
 
       <input type="text" name="title" placeholder="Title" class="textField" /> 
 
      </li> 
 
      <li align=center> 
 
       <textarea name="content" class="textField" id="content" placeholder="Your Message..."></textarea> 
 
      </li> 
 
      <li> 
 
       <input type="submit" name="submit" class="textField" id="submit" value="Send" disabled="disabled" /> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</form>

这是它看起来充满时,如:

screenshot

+0

'形式> input' =所有''这是一个''

元素 – Andreas

+0

BUMP的直接子元素,我仍然无法修复that.There是无解但 –

+0

http://stackoverflow.com/a/42560146/402037 – Andreas

回答

0

OK,你的选择是错误的。

form > selected 

改为;

form > #form > #items > li > input 

,或者你可以简单地使用输入类选择,这是“文本框”

+0

只是试过了。你没有错,但我认为还有另一个问题,导致不运行。 –

0

这里是工作的片段,只要看看jQuery选择,它与文本域的作品,以及。

(function() { 
 
    $('form > input, form > textarea').keyup(function() { 
 

 
     var empty = false; 
 
     $('form > input, form > textarea').each(function() { 
 
      if ($(this).val() == '') { 
 
       empty = true; 
 
      } 
 
     }); 
 

 
     if (empty) { 
 
      $('#register').attr('disabled', 'disabled'); 
 
     } else { 
 
      $('#register').removeAttr('disabled'); 
 
     } 
 
    }); 
 
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<form> 
 
    Username<br /> 
 
    <input type="text" id="user_input" name="username" /><br /> 
 
    Password<br /> 
 
    <input type="password" id="pass_input" name="password" /><br /> 
 
    Confirm Password<br /> 
 
    <input type="password" id="v_pass_input" name="v_password" /><br /> 
 
    Email<br /> 
 
    <input type="text" id="email" name="email" /><br />  
 
    Textarea<br /> 
 
    <textarea id="v_pass_input" name="v_password"></textarea><br /> 
 
    <input type="submit" id="register" value="Register" disabled="disabled" /> 
 
</form> 
 
<div id="test"> 
 
</div>