Announcement

Collapse
No announcement yet.

How Inactive Submit Button Till User Not Fill The Form?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How Inactive Submit Button Till User Not Fill The Form?

    Hello Guys,
    how inactive submit button till user not fill the form? how can i make it possible, please share your suggestion and feedback.
    Thanks

  • #2
    It will require some JavaScript / jQuery. There are various ways to do it, but the following will work. I've stripped it way down and added minimal CSS for clarity. Adding additional fields will require adding the appropriate information to the script, but by following what's already in the script, depending on your level of proficiency, you ought to be able to figure it out.

    Code:
    <html>
    <head>
    <title>Button enable</title>
    
    <style>
        body {font-size: 0.8em; font-family: arial;}
    </style>
          
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function(){
        $("#submit").attr('disabled','disabled');
        
        $("form").keyup(function(){
        
            //Disable submit button
            $("#submit").attr('disabled','disabled');
    
            //Validate Fields
            var first=$("#first").val();
            var second=$("#second").val();
    
            if(!(first==""||second==""))
                {
                    //To enable submit button
                    $("#submit").removeAttr('disabled');
                    $("#submit").css({"cursor":"pointer","box-shadow":"2px 2px 8px #bbb","background":"#eee"});
                }
        });
    
        //Click of submit button
        $("#submit").click(function(){
            $("#submit").css({"cursor":"default","box-shadow":"none","background":"#fff"});
        });
    });
    </script>
    
    </head>
    <body>
        <form action="" method="get">                
            <label>First</label><br/>                                          
            <input type="text" id="first" value=""/><br /><br />    
            <label>Second</label><br/>                                      
            <input type="text" id="second" value=""/><br /><br />            
            <input type="submit" id="submit" value="Submit">                    
        </form>
    </body>
    </html>

    Comment


    • #3
      Hi Superjohn4455 and welcome to GDF.

      We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done anything wrong, we ask every new member to read them. Your first few posts will be moderated, so don't panic if they don't show up immediately. Enjoy your stay.
      Shop smart. Shop S-Mart.

      Comment

      Search

      Collapse

      Sponsor

      Collapse

      Latest Topics

      Collapse

      • kaila58
        Reply to Portfolio critique
        kaila58
        Good point, but in my opinion it's distracting in a portfolio and lacks attention to detail when displaying work.
        Yesterday, 11:30 PM
      • PrintDriver
        Reply to Portfolio critique
        PrintDriver
        Ha, I noticed the printing and registration marks and thought it refreshing to see a designer who knows to include them....
        Yesterday, 10:00 PM
      • B
        Reply to Is my job keeping me from doing good work?
        B
        One of the problems with in-house situations is that, as often as not, the upper management's expertise lies in areas other than marketing, communication or creative. Worse still, is that they don't know...
        Yesterday, 10:00 PM
      • PrintDriver
        Reply to Designer input for a card sort activity!
        PrintDriver
        Envato? Really? LOL

        Y'all sure this ain't an ad?...
        Yesterday, 09:58 PM
      • PrintDriver
        Reply to Is my job keeping me from doing good work?
        PrintDriver
        This might come across as a snobbish perspective. And I do work in a very weird corner of the design industry, where the theatrical/digital/print world all intersect.
        That said...
        When our...
        Yesterday, 09:51 PM
      GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
      Working...
      X