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.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts

    Javascript help: Coding problem

    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.

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by nobackseat88 View Post
    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:
    Code:
    onSubmit="setTimeout('document.forms[0].submit()', 5000); return false;"
    You're welcome ahead of time.

  • #3
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Okay, thanks, will try.

  • #4
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Nope, it doesn't do anything after five seconds. When clicked, it changes text, disables and then does nothing

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,776
    Thanks
    19
    Thanked 155 Times in 146 Posts
    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">
        <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>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by nobackseat88 View Post
    Nope, it doesn't do anything after five seconds. When clicked, it changes text, disables and then does nothing
    Code:
    <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>

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,776
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Quote Originally Posted by Arty Effem View Post
    Code:
    <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?

    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>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #8
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by chump2877 View Post
    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.

  • #9
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,776
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Quote Originally Posted by Arty Effem View Post
    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)...

    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_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>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #10
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Thanks guys! Thread resolved.


  •  

    Posting Permissions

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