...

View Full Version : How to use onclick for submit with input type 'button'?



thighmister
09-28-2011, 03:45 AM
Below is a script I found at http://bytes.com/topic/javascript/answers/567479-javascript-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.


<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>

Old Pedant
09-28-2011, 04:48 AM
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".

thighmister
09-28-2011, 05:44 AM
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?

xelawho
09-28-2011, 05:52 AM
document.voteform.submit();

thighmister
09-28-2011, 06:03 AM
I have tried:


function submitform()
{ document.["voteform"].submit();
}


but can't figure out how to call the function.

Now I'm trying

document.voteform.submit();
but still don't know how to call it.

Old Pedant
09-28-2011, 07:52 AM
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!



window.onload = checkForVote();

WRONG WRONG WRONG!!!

Should be

window.onload = checkForVote; // NO PARENTHESES!!!

Old Pedant
09-28-2011, 08:01 AM
Well, that was part of it!

YOU ARE *NOT* SETTING ANY COOKIE!!!

If you had simply done

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

onclick="setCookie('voted', 1, -1);"
to

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".

thighmister
09-28-2011, 08:59 AM
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.

thighmister
10-02-2011, 03:53 AM
One more thing... How do I set the cookie to expire in, say, one hour instead of one day?

In the js I have


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


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

Old Pedant
10-02-2011, 05:28 AM
*LOOK* at this line:


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:


function setCookie(name, value, hours)
{
if(hours)
{
var date = new Date();
date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
var expires = "; expires = " + date.toGMTString();
}
...

thighmister
10-08-2011, 03:17 AM
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:



if(getCookie("voted1") == 1)
{

disableButton1();
}

if(getCookie("voted2") == 1)
{

disableButton2();
}

and then


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:


<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:


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.

Old Pedant
10-08-2011, 05:56 AM
Really should have started another thread with another title...one relevant to this topic.



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.

thighmister
10-10-2011, 09:34 PM
I am trying


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


<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.

Old Pedant
10-10-2011, 09:41 PM
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.

thighmister
10-10-2011, 11:06 PM
I'm trying



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



with


onClick="setCookie('voted1', 1, 1); disableButton()"

No go.

Old Pedant
10-11-2011, 02:35 AM
If the code in your post #13 is your *actual* code, then of course it doesn't work.

You are missing { and } for the disableButton function.

And the if statement there isn't even legal. The ) is in the wrong place.

You can't expect illegal javascript to do anything. Did you not ever use FIREBUG to ensure you had gotten rid of errors???

But this is all way overcomplicated. Stand by.

Old Pedant
10-11-2011, 02:56 AM
Here, try this:


<html>
<head>
<script type="text/javascript">
function setupButtons( )
{
var buttons = document.getElementById("likes").getElementsByTagName("input");
for ( var b = 0; b < buttons.length; ++b )
{
var button = buttons[b];
if ( getCookie(button.id) == "voted" )
{
button.disabled = true;
button.value = "Liked";
}
}
}

function setVoted(button)
{
var date = new Date();
date.setTime(date.getTime() + 60 * 60 * 1000); // one day from now
document.cookie = button.id + "=voted; expires=" + date.toGMTString();
button.disabled = true;
button.value = "Liked";

}

function getCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');

for(var i=0; i < ca.length; i++)
{
var c = ca[i].replace(/^\s+/,"");
if (c.indexOf(nameEQ) == 0)
{
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
window.onload = setupButtons;

</script>
</head>
<body>
<form>
Click the things you like:
<ul id="likes">
<li>
<label>
<input id="likeJS" value="Like" type="button" onclick="setVoted(this);" />
JavaScript
</label>
</li>
<li>
<label>
<input id="likeIceCream" value="Like" type="button" onclick="setVoted(this);" />
Ice Cream
</label>
</li>
<li>
<label>
<input id="likeForumHelp" value="Like" type="button" onclick="setVoted(this);" />
Help at codingforums.com
</label>
</li>
</ul>
</form>
</body>
</html>

thighmister
10-17-2011, 08:08 AM
Oh, dude, I feel so bad. I looked for a reply from you for a few days, and only just now have realized that there was a PAGE 2, and your reply has been there all along. This is the level of awareness you are dealing with here. So I just saw it, and I'm going to try it out as soon as I get a chance, but just wanted to say thank you in advance, since you must have been wondering why I had not replied. I'll post back with progress.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum