发表新帖
发表新帖

grey out submit button until form filled out

后端 未结
关注
3 749
萌比男神i
萌比男神i 2021-02-09 02:23

I have the following form:
相关标签:
3条回答
  • 渐次进展
    2021-02-09 03:07

    If you are a beginner of javascript, a better option would be

    Add HTML as follows

    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
   First name: <input type="text" name="fname">
   <input type="submit" value="Submit">
</form>

    Now add validateForm() as

    function validateForm() {
   // Validate all fields in the form
   return true; // if all form entries are valid. else return false
}

    Note: This will not grey-out the submit button. But in this case submit will work only if all the entries are valid.

    0 讨论(0)
  • 逝去的感伤
    2021-02-09 03:25

    Jquery would do that. On the .keyup event have jquery check if both field's lengths are > 0 and change the button to be disabled or not.

    $('#yourButton').button("disable");​​​​​​​​​​​​​

$('.fields').bind('keyup', function() { 
var nameLength = $("#sub_first_name").length;
var emailLength = $("#sub_email").length;

if (nameLength > 0 && emailLength > 0)
{
   $('#yourButton').button("enable");​​​​​​​​​​​​​
}

} );
    0 讨论(0)
  • 傲寒
    2021-02-09 03:30

    The script would go in the <head></head> of your document. Like so.

    <script type="text/javascript" src="yourpath"></script>

    One way would be to match the values of the inputs and then remove the grayed out class from your button if the values aren't still the same as the default. Here is a demo.

    HTML

    <input type="text" value="some text" class="text-input">
<input attr="" type="submit" value="submit" class="submit">

    CSS

    .disabled {opacity:.2;}

    jQuery

    if ($('.text-input').val() == "some text" ) {
    $('.submit').addClass('disabled');    
}

    http://jsfiddle.net/APGmy/11/

    0 讨论(0)
 看不清?
提交回复
热议问题