I'm in the process of making a website for college and I need to have JavaScript in it, so I wanted to make a popup box appear when I click the 'Submit' button in my CSS but I'm not entirely sure how to do it. Currently I've got the following JavaScript for the popup box:
<button onclick="SubmitBtn">Hello</button>
<script>
function myFunction() {
alert("Your email has been sent!");
}
</script>
However it just creates another button and doesn't work. I'm not great at JavaScript as I've only been doing it a few weeks so any help would be greatly appreciated. The button I want to be pressed is in the form at the bottom of the page.
I'll put my plete code without CSS down below:
<!DOCTYPE html>
<html>
<head>
</body>
</html>
<button onclick="SubmitBtn">Hello</button>
<script>
function myFunction() {
alert("Your email has been sent!");
}
</script>
<title>OINK - Contact Us</title>
<body>
<div id="container">
<center><p>WELCOME TO THE OINK LAYOUT!</p></center></font>
<div id="menu">
<ul>
<center>
<li><a class="button_example" href="index.html">HOME</a></li>
<li><a class="button_example" href="piggybanks.html">PIGGY BANKS</a></li>
<li><a class="button_example" href="moosic.html">MOOSIC</a></li>
<li><a class="button_example" href="contact.html">CONTACT US</a></li>
<li><a class="button_example" href="pigtures.html">PIGTURES</a></li>
</center>
</ul>
<p> </p>
<p> </p>
<div>
<!-- <div id="footer">This is the footer</div> -->
</div>
<form id="form1" name="form1" method="post" action="#" onsubmit="return checkform(this);">
<label for="Name"><FONT FACE="ComingSoon">Name</label></FONT>
<input type="text" name="Name" id="Name" />
<br />
<label for="Email"><FONT FACE="ComingSoon">Email</label></FONT>
<input type="text" name="Email" id="Email" />
<br />
<label for="Message"><FONT FACE="ComingSoon"> Message<br /></FONT>
</label>
<textarea name="Message" id="Message" cols="45" rows="5"></textarea>
<input type="submit" name="SubmitBtn" id="SubmitBtn" value="Submit" />
</form>
<div id="footer">Copyright 2015-2024 by Y/N
<br>
All rights reserved<br>
OINK is a trademark of Y/N
<br>
This page was last updated on 22 January 2015</div>
</div>
</body>
</html>
I'm in the process of making a website for college and I need to have JavaScript in it, so I wanted to make a popup box appear when I click the 'Submit' button in my CSS but I'm not entirely sure how to do it. Currently I've got the following JavaScript for the popup box:
<button onclick="SubmitBtn">Hello</button>
<script>
function myFunction() {
alert("Your email has been sent!");
}
</script>
However it just creates another button and doesn't work. I'm not great at JavaScript as I've only been doing it a few weeks so any help would be greatly appreciated. The button I want to be pressed is in the form at the bottom of the page.
I'll put my plete code without CSS down below:
<!DOCTYPE html>
<html>
<head>
</body>
</html>
<button onclick="SubmitBtn">Hello</button>
<script>
function myFunction() {
alert("Your email has been sent!");
}
</script>
<title>OINK - Contact Us</title>
<body>
<div id="container">
<center><p>WELCOME TO THE OINK LAYOUT!</p></center></font>
<div id="menu">
<ul>
<center>
<li><a class="button_example" href="index.html">HOME</a></li>
<li><a class="button_example" href="piggybanks.html">PIGGY BANKS</a></li>
<li><a class="button_example" href="moosic.html">MOOSIC</a></li>
<li><a class="button_example" href="contact.html">CONTACT US</a></li>
<li><a class="button_example" href="pigtures.html">PIGTURES</a></li>
</center>
</ul>
<p> </p>
<p> </p>
<div>
<!-- <div id="footer">This is the footer</div> -->
</div>
<form id="form1" name="form1" method="post" action="#" onsubmit="return checkform(this);">
<label for="Name"><FONT FACE="ComingSoon">Name</label></FONT>
<input type="text" name="Name" id="Name" />
<br />
<label for="Email"><FONT FACE="ComingSoon">Email</label></FONT>
<input type="text" name="Email" id="Email" />
<br />
<label for="Message"><FONT FACE="ComingSoon"> Message<br /></FONT>
</label>
<textarea name="Message" id="Message" cols="45" rows="5"></textarea>
<input type="submit" name="SubmitBtn" id="SubmitBtn" value="Submit" />
</form>
<div id="footer">Copyright 2015-2024 by Y/N
<br>
All rights reserved<br>
OINK is a trademark of Y/N
<br>
This page was last updated on 22 January 2015</div>
</div>
</body>
</html>
- 1 Why don't you just put onclick="myFunction();" as attribute in your submit Button? <button onclick="SubmitBtn">Hello</button> is nonsense. – mondjunge Commented Feb 26, 2015 at 11:28
2 Answers
Reset to default 3Just try this one
<button onclick='foo();'>Hello</script>
<script>
function foo(){
alert('Your email has been sent');
}
</script>
You can retrieve the from and override the onsubmit function:
<script>
var form = document.forms.SubmitBtn;
form.onsubmit = function(){
alert("Your email has been sent!");
return true;
}
</script>
This should work.