CODEWITHSUNDEEP
javascripthtmlcss
lxtrxi
lxtrxi

Reputation: 55

Popup window when specific button is pressed

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 complete 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>&nbsp;</p>
<p>&nbsp;</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>

Upvotes: 1

Views: 7303

Answers (2)

skay-
skay-

Reputation: 1566

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.

Upvotes: 1

Narendrasingh Sisodia
Narendrasingh Sisodia

Reputation: 21437

Just try this one

<button onclick='foo();'>Hello</script>
<script>
function foo(){
 alert('Your email has been sent');
}
</script>

Upvotes: 3

Related Questions