...

View Full Version : Javascript help: Coding problem



nobackseat88
12-09-2007, 06:37 PM
Hi. I am trying to get a form submit button to disable, change text, and then submit after 5 seconds. Can anyone help? I got this far.....


<form action="url" onSubmit="setTimeout (5000); return false;">
<input type="submit" value="Submit" onclick="this.disabled=true;this.value='Processing Form...';">
</form>


but it doesn't work... can anyone help?

Thanks ahead of time.

Arty Effem
12-09-2007, 08:08 PM
Hi. I am trying to get a form submit button to disable, change text, and then submit after 5 seconds. Can anyone help? I got this far.....


<form action="url" onSubmit="setTimeout (5000); return false;">
<input type="submit" value="Submit" onclick="this.disabled=true;this.value='Processing Form...';">
</form>


but it doesn't work... can anyone help?

Thanks ahead of time.

Assuming you have only one form, try:

onSubmit="setTimeout('document.forms[0].submit()', 5000); return false;"You're welcome ahead of time.

nobackseat88
12-09-2007, 08:15 PM
Okay, thanks, will try.

nobackseat88
12-09-2007, 08:18 PM
Nope, it doesn't do anything after five seconds. When clicked, it changes text, disables and then does nothing :(

chump2877
12-09-2007, 08:24 PM
<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>TITLE</title>
</head>
<body>

<form action="" method="post" id="form1">
<input type="button" value="Submit" onclick="submitForm(this)">
</form>

<script type="text/javascript">
function submitForm(buttonObj)
{
buttonObj.disabled = true;
buttonObj.value = 'Processing Form...';
setTimeout('document.getElementById("'+buttonObj.parentNode.id+'").submit()',5000);
}
</script>

</body>
</html>

Arty Effem
12-09-2007, 08:53 PM
Nope, it doesn't do anything after five seconds. When clicked, it changes text, disables and then does nothing :(


<html>
<body>
<form action="http://m-w.com/dictionary/slander" onSubmit="setTimeout('document.forms[0].submit()', 5000); return false;">
<input type="submit" value="Submit" onclick="this.disabled=true;this.value='Processing Form...';">
</form>
</body>
</html>

chump2877
12-09-2007, 09:19 PM
<html>
<body>
<form action="http://m-w.com/dictionary/slander" onSubmit="setTimeout('document.forms[0].submit()', 5000); return false;">
<input type="submit" value="Submit" onclick="this.disabled=true;this.value='Processing Form...';">
</form>
</body>
</html>


Arty, this solution is better than mine because it still uses a conventional submit button to submit the form (which means the form will submit with or without JS enabled).

I noticed that problem earlier with my code and tried to fix it, but it appears you beat me to it...

I tried doing something similar to what you did, but I get an error: "document.getElementById("form1").submit is not a function." on the line highlighted in red...Can you see the problem with my code?


<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>TITLE</title>
</head>
<body>

<form action="" method="post" id="form1" onsubmit="submitForm('submit'); return false;">
<input type="submit" value="Submit" id="submit">
</form>

<script type="text/javascript">
function submitForm(id)
{
var submitObj = document.getElementById(id);
submitObj.disabled = true;
submitObj.value = 'Processing Form...';
submitObj.parentNode.setAttribute("onsubmit","");
setTimeout('document.getElementById("'+submitObj.parentNode.id+'").submit()',5000);
}
</script>

</body>
</html>

Arty Effem
12-09-2007, 10:11 PM
I tried doing something similar to what you did, but I get an error: "document.getElementById("form1").submit is not a function." on the line highlighted in red...Can you see the problem with my code?
If you call the button 'submit', it overwrites the function.

chump2877
12-09-2007, 11:13 PM
If you call the button 'submit', it overwrites the function.

Ahh, good eye....that fixed it...

Here's my revised code...personally, I prefer less inline javascript in my markup (makes the HTML easier to read)...


<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>TITLE</title>
</head>
<body>

<form action="" method="post" id="form1" onsubmit="submitForm('submit_but'); return false;">
<input type="submit" value="Submit" id="submit_but">
</form>

<script type="text/javascript">
function submitForm(id)
{
var submitObj = document.getElementById(id);
submitObj.disabled = true;
submitObj.value = 'Processing Form...';
setTimeout('document.getElementById("'+submitObj.parentNode.id+'").submit()',5000);
}
</script>

</body>
</html>

nobackseat88
12-10-2007, 03:46 AM
Thanks guys! Thread resolved.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum