Click on button then show another text

pcwolf · 10-30-2012, 09:52 AM

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 ?

sunfighter · 10-30-2012, 04:19 PM

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>

pcwolf · 10-30-2012, 04:57 PM

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.

sunfighter · 10-30-2012, 06:51 PM

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>

pcwolf · 10-31-2012, 09:54 AM

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.