Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to use onclick for submit with input type 'button'?

    Below is a script I found at http://bytes.com/topic/javascript/an...cookie-problem

    The idea is a like button, like on fb, in a form which updates a db field I can use to display the number of likes, and my goal is to disable the like button for the rest of the session, or a day, or whatever. This script disables it onclick, the problem is I can't figure out how to get it to submit the form as well.

    I have found it does submit if the input type is 'submit', but then it doesn't call the disable function. I tried writing another function to submit the form but no go.

    Code:
    <html>
    <head>
    <title>Vote Button</title>
    <script type="text/javascript">
    function checkForVote()
    {
        // If there is a cookie...
        if(document.cookie != "")
        {
            if(getCookie("voted") == 1)
            {
                // Disable the button again if user already voted. 
                disableButton();
            }
        }
    }
     
    function disableButton()
    {
        var submitvote = document.getElementById("submitvote");
        submitvote.disabled = true;
        submitvote.value = "You Already Voted.";
    }
     
    function setCookie(name, value, days)
    {
        if(days) 
        {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires = " + date.toGMTString();
        }
     
        else 
        {
            var expires = "";
        }
     
        document.cookie = name + "=" + value + expires + "; path=/";
     
        // Disable the button as soon as the user clicks it.
        disableButton();
    }
     
    function getCookie(name) 
    {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
     
        for(var i=0; i < ca.length; i++) 
        {
            var c = ca[i];
     
            while (c.charAt(0)==' ') 
            {
                c = c.substring(1,c.length);
            }
     
            if (c.indexOf(nameEQ) == 0) 
            {
                return c.substring(nameEQ.length,c.length);
            }
        }
     
        return null;
    }
     
    </script>
    </head>
     
    <body>
    <form name="voteform" id="voteform" action="foo.php" method="post">
    <input type="button" name="submitvote" id="submitvote" onclick="setCookie('voted', 1, -1);" value="Submit Vote"/>
    </form>
    </body>
    <script type="text/javascript">
    // Run checkForVote() at end of document so that form and contents can be referenced
    window.onload = checkForVote();
    </script>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Change it from type="button" to type="submit".

    A type="button" will *NOT* automatically submit a <form>. You would have to use JS code to do so.

    But why bother? Just make it type="submit".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Change it from type="button" to type="submit".

    A type="button" will *NOT* automatically submit a <form>. You would have to use JS code to do so.

    But why bother? Just make it type="submit".
    As I said, "I have found it does submit if the input type is 'submit', but then it doesn't call the disable function. I tried writing another function to submit the form but no go."

    Can you help me with the js to make it submit?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    document.voteform.submit();

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have tried:
    Code:
    function submitform()
    {    document.["voteform"].submit();
    }
    but can't figure out how to call the function.

    Now I'm trying
    Code:
    document.voteform.submit();
    but still don't know how to call it.
    Last edited by thighmister; 09-28-2011 at 07:19 AM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Well, for starters, since you *WANT* the <form> to be submitted, you *CLEARLY* do not want to disable the button as soon as it is clicked. If you do that, then the form can't be submitted.

    Instead, you want to disable the button when the page is reloaded.

    And it looks to me like your code should do that. Yes, using a submit button.

    OH OH OH! I see it!

    Code:
    window.onload = checkForVote();
    WRONG WRONG WRONG!!!

    Should be
    Code:
    window.onload = checkForVote; // NO PARENTHESES!!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Well, that was part of it!

    YOU ARE *NOT* SETTING ANY COOKIE!!!

    If you had simply done
    Code:
        alert(document.cookie);
    a few places you would have seen that.

    Know why?

    BECAUSE YOU ARE ASKING FOR THE COOKIE TO EXPIRE -1 DAYS FROM NOW!

    In other words, you ask for the cookie to expire *YESTERDAY*.

    And so as soon as the cookie is set, IT IS EXPIRED!

    Change
    Code:
    onclick="setCookie('voted', 1, -1);"
    to
    Code:
    onclick="setCookie('voted', 1, 1);"
    along with my other change and presto!

    Oh...and GET RID of the call to disableButton as part of setting the cookie. And of course make it type="submit".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    thighmister (09-28-2011)

  • #8
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    You are the man.
    It was the part about getting rid of the call to disableButton as part of setting the cookie that did the trick.
    Many thanks for your expert help.

  • #9
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    One more thing... How do I set the cookie to expire in, say, one hour instead of one day?

    In the js I have

    Code:
    function setCookie(name, value, days)
    {
        if(days) 
        {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires = " + date.toGMTString();
        }
    and in the form it is

    Code:
    onClick="setCookie('voted', 1, 1);"

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    *LOOK* at this line:
    Code:
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    So you come into the function with days set to 1, then you multiply the number of days by the number of milliseconds in a day. Or did you not recognize 24 * 60 * 60 * 1000??

    So if you want to specify hourse, instead, just do so:
    Code:
    function setCookie(name, value, hours)
    {
        if(hours) 
        {
            var date = new Date();
            date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
            var expires = "; expires = " + date.toGMTString();
        }
       ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    thighmister (10-08-2011)

  • #11
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I did recognize the 24, 60, 60 pattern, but I wasn't sure exactly what the syntax would be and to be honest I thought it would be easier to ask here instead of trial and error. Now I feel kind of bad about that, and I'm sorry I was lazy and took your expertise for granted.

    Anyway, the change worked and now it expires in an hour-- thank you!

    Now I would like to allow the user to "like" several things on the same page.

    So:

    Code:
    if(getCookie("voted1") == 1)
            {
    
                disableButton1();
            }
    		
    if(getCookie("voted2") == 1)
            {
    
                disableButton2();
            }
    and then

    Code:
    function disableButton1()
    {
        var submitvote = document.getElementById("submitvote1");
        submitvote.disabled = true;
        submitvote.value = "Liked";
    }
     
    function disableButton2()
    {
        var submitvote = document.getElementById("submitvote2");
        submitvote.disabled = true;
        submitvote.value = "Liked";
    }
    and then disablebutton3... etc.

    And the form:

    Code:
    <input type="submit" name="submitvote1" id="submitvote1" onClick="setCookie('voted1', 1, 1);" value="Like"/>	
    
    <input type="submit" name="submitvote2" id="submitvote2" onClick="setCookie('voted2', 1, 1);" value="Like"/>
    It works (and I even make the cookies expire on logout and when the corresponding db field is changed with another form:

    Code:
    setcookie("voted1","",time()-3600,"/");
    setcookie("voted2","",time()-3600,"/");
    )

    My question is: is there a better way to allow the user to like several things on the same page, because this seems long.

    Thanks for reading again.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Really should have started another thread with another title...one relevant to this topic.

    Code:
    for ( var vote = 1; vote <= 999999; ++vote )
    {
        var submitvote = document.getElementById("submitvote" + vote) ;
        if ( submitvote == null ) break; // no more submitvote elements...done
        if ( getCookie("voted" + vote ) == 1 
        {
            submitvote.disabled = true;
            submitvote.value = "Liked";
        }
    }
    Like that?

    Even self adjusting. Add another submitvoteXX button to the page and it automatically adapts. Well, up to 999999 of them, at least.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I am trying

    Code:
    function checkForVote()
    {
    
        if(document.cookie != "")
        {
           	
        }
    }
    
    function disableButton()
    
    for ( var vote = 1; vote <= 999999; ++vote )
    {
        var submitvote = document.getElementById("submitvote" + vote) ;
        if ( submitvote == null ) break; // no more submitvote elements...done
        if ( getCookie("voted" + vote ) == 1 
        {
            submitvote.disabled = true;
            submitvote.value = "Liked";
        }
    }
     
    function setCookie(name, value, hours)
    {
        if(hours) 
        {
            var date = new Date();
            date.setTime(date.getTime() + (hours  * 60 * 60 * 1000));
            var expires = "; expires = " + date.toGMTString();
        }
     
        else 
        {
            var expires = "";
        }
     
        document.cookie = name + "=" + value + expires + "; path=/";
     
    }
     
    function getCookie(name) 
    {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
     
        for(var i=0; i < ca.length; i++) 
        {
            var c = ca[i];
     
            while (c.charAt(0)==' ') 
            {
                c = c.substring(1,c.length);
            }
     
            if (c.indexOf(nameEQ) == 0) 
            {
                return c.substring(nameEQ.length,c.length);
            }
        }
     
        return null;
    }
    with form

    Code:
    <input type="submit" name="submitvote1" id="submitvote1" onClick="setCookie('voted1', 1, 1);" value="Like"/>
    
    <input type="submit" name="submitvote2" id="submitvote2" onClick="setCookie('voted2', 1, 1);" value="Like"/>
    etc, and I tried a few variations, like id=submitvote and setCookie('voted', 1, 1). So far it does not disable the button.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Yes? Why would it disable anything if you don't someplace *CALL* the disableButton function?

    I don't see any place there where you call it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I'm trying

    Code:
     if(document.cookie != "")
        {
            if(getCookie("voted" + vote) == 1)
            {
                disableButton();
            }
    with

    Code:
    onClick="setCookie('voted1', 1, 1); disableButton()"
    No go.
    Last edited by thighmister; 10-11-2011 at 01:22 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •