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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2012
    Location
    Belgium
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Click on button then show another text

    Hi,

    I already search it on google and yes i found something but it not working correctly. So i made a code for verification an email, but after people click on "Submit" button i want there another text on the button like "please wait..."

    Here is the code:

    Code:
    <script type='text/javascript'>
    function emailValidator(element, alertMsg){
        var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(element.value.match(emailvalid))
        {
            alert("Email Validation: Successful.");
            return true;
        }else{
            alert(alertMsg);
            element.focus();
            return false;
    		
        }
    	
    }
    
    </script>
    
    <form>
    Enter Your Email: <input type='text' id='emailid'/>
    <input type='submit'
        onclick="emailValidator(document.getElementById('emailid'), 'This is Not a Valid Email')"
        value='Submit'  />
    </form>
    And here is the button another text code:

    Code:
    <input type="submit" onClick="this.disabled=true;this.value='please wait...';this.form.submit();" >
    So how i can place the code above to the email code ?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    
    <body>
    <form action="">
    Enter Your Email: <input type='text' id='emailid'/>
    <input type='submit' onclick="this.value = 'please wait...'; emailValidator()" value='Submit'  />
    </form>
    
    <script type='text/javascript'>
    function emailValidator(){
        var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(document.getElementById('emailid').value.match(emailvalid))
        {
            alert("Email Validation: Successful.");
            return true;
        }else{
            alert('This is Not a Valid Email');
            element.focus();
            return false;
    
        }
    
    }
    </script>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    pcwolf (10-30-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Location
    Belgium
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks, it works.

    How i can show now an label after button is clicked. So after "Please wait..." wait 3 seconds then show the label.

    Code:
    <html>
    <body>
    
    <button onclick="myFunction()">Click</button>
    
    <script>
    function myFunction()
    {
    setTimeout(function(){alert("Hello")},3000);
    window.setInterval("someFunction()", 5000);
    }
    </script>
    
    </body>
    </html>
    
    <html>
    <body>
    It must the same button and not an window like where is "Hello" text in the window. I want this in a label down.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    I think this is what you want:
    Code:
    <html>
    <body>
    <input type="button" id="changer" value="PUSH" onclick="myFunction()">
    <script>
    function myFunction()
    {
    document.getElementById('changer').value = "please wait...";
    setTimeout(function(){document.getElementById('changer').value = "The Label";},3000);
    window.setInterval("someFunction()", 5000);
    }
    </script>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    pcwolf (10-31-2012)

  • #5
    New Coder
    Join Date
    Oct 2012
    Location
    Belgium
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks. But how i can set the code that you gived my to one button, not 2 buttons:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    
    <body>
    <form action="">
    Enter Your Email: <input type='text' id='emailid'/>
    <input type='submit' onClick="this.value = 'please wait...'; emailValidator()" value='Submit'  />
    </form>
    
    <p>Text <b id='boldStuff'>change</b> </p> 
    
    <script type='text/javascript'>
    function changeText(){
    	document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
    	
    }d
    function myFunction()
    {
    document.getElementById('changer').value = "please wait...";
    setTimeout(function(){document.getElementById('changer').value = "The label";},3000);
    window.setInterval("someFunction()", 5000);
    }
    function emailValidator(){
        var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(document.getElementById('emailid').value.match(emailvalid))
        {
            alert("Email Validation: Successful.");
            return true;
        }else{
            alert('This is Not a Valid Email');
            element.focus();
            return false;
        }
    
    }
    </script>
    </body>
    </html>
    I have added the javascript that you gived my to one line.
    You can see the text "Text Change". So if i click on "Submit" then the text button change to "Please wait..." After 3 seconds, it change the text down to "text Changed" (example) and the text that still stands on the button should change back to submit.

    Thats all what i needed.

    Code for change the text down:
    Code:
    <script type="text/javascript">
    function changeText(){
    	document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
    	
    }d
    </script>
    <p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
    <input type='button' onclick='changeText()' value='Change Text'/>
    The code that you gived my:

    Code:
    function myFunction()
    {
    document.getElementById('changer').value = "please wait...";
    setTimeout(function(){document.getElementById('changer').value = "We cannot lanch the file, please see the file.";},3000);
    window.setInterval("someFunction()", 5000);
    }
    I place this all to one javascript but i not work.


  •  

    Tags for this Thread

    Posting Permissions

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