CODEWITHSUNDEEP
javascripthtml
Samuel Overton
Samuel Overton

Reputation: 13

How to make a popup confirmation appear with Javascript after someone clicks a button on my website?

So I have a computer science college assignment where I have to make a website and one of the criteria is that it needs some amount of javascript. My teacher recommended I create a confirmation popup when someone clicks "submit" after they are finished with the contact us form.

The problem is I know absolutely nothing about javascript and just about nothing of HTML and CSS. The contact us form was taken from somewhere online and slightly edited to fit the theme of my website, and my buddies at college have helped me out a lot with aligning things, so needless to say I am VERY confused at this point and my assignment is due tomorrow.

I've tried looking online for a simple line of code. Basically when someone clicks this "submit" button that I already have on my website, I need a confirmation window to pop up. It needs to be written in Javascript tho. I haven't been able to find anything online that does this, they either request a popup confirmation when they are changing to another webpage, which would be the "a" tag? right? and it uses href= which I can't use here (I think.)

Heres the contact us form:

========================================================================

  <body>
    <header>
      <nav>
          <a href="./index.html">
            <img id="logo" src="./images/logo.jpg" href="./index.html"  title="Home">
          </a>

        <div id="navbuttons">
          <a class="navButton" href=./about.html>About</a>
          <a class="navButton" href=./services.html>Services</a>
          <a class="navButton" href=./products.html>Products</a>
        </div>
      </nav>
    </header>
    <div class="container">
  <form action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="UK">UK</option>
      <option value="China">China</option>
      <option value="Other">Other</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write your message here..." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>
</body>

========================================================================

and here is the CSS that came with it:

========================================================================

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical
}


input[type=submit] {
  background-color: #BB1B25;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

As you can see theres nothing here that would result in a confirmation window. So to paraphrase my question after this massive wall of text: How do I need add a confirmation window after someone hits "submit" ? I need to use javascript for it to count. Also, the form isn't meant to actually work, since this will never be hosted, so please don't try to fix the form itself as it works enough for me to get the pass... just need a confirmation window ;(

Please. And a thank you in advance for anyone reading this.

Upvotes: 1

Views: 269

Answers (1)

jeffjenx
jeffjenx

Reputation: 17457

<form action="action_page.php" onsubmit="return confirm('Are you sure?')">

The form element has an onsubmit event that can be attached to via JavaScript.

You can do this in a number of ways, but the easiest is to add an onsubmit attribute to your form element.

If the onsubmit event returns false, the form will not submit, so you can add a JavaScript confirmation dialog window and return the result of that as it will yield a true or false response based on the user's action.

Upvotes: 1

Related Questions