Question 173193 in Html Question posted in
Some basic documentation can be found here.

Html – to get a popup box with a link on submit click

I am trying to get a popup box with an application accepted message and a link to home page on submit button click, but only after validation .popup box is not coming on button click.

Now I want a popup box on submit button. But popup window doesn’t appear when clicked on button. What did I miss or do wrong?

This is the part i have to show when submit button click:

<h2>Application Accepted</h2>
<span class="close">&times;</span>
<div class="modal-body">
  <p>Go Back To Home Page <a href="home">Home</a></p>
</div>

i have to validate every field only after i want that popup box form:

<form method='post' name='f1'>
  <h2 style="padding-left:50px">Application Form</h2>
  <table>
    <tr>
      <td>
        <label for="uname">Name</label>
      </td>
      <td>
        <input type="text" id="uname" name="username" required>
      </td>
    </tr>
    <tr>
      <td>
        <label for="date">Date Of Birth</label>
      </td>
      <td>
        <input type="date" id="date" name="date" required> </td>
    </tr>
    
    <tr>
      <td>
        <label>Gender</label>
      </td>
      <td>
        <label>
          <input type="radio" value="female" name="gender" required> Female</label>
        <label>
          <input value="male" type="radio" name="gender"> Male</label>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <button type="submit" id="myBtn" onclick="return valid()">SUBMIT</button>
      </td>
    </tr>
  </table>
</form>

validation part:

function valid() {

  if (f1.username.value == "") {
    alert('enter the name');
    f1.username.focus();
    return false;
  } else if (f1.date.value == "") {
    alert('enter your date of birth');
    f1.date.focus();
    return false;
  } else if (f1.gender.value == "") {
    alert('Select gender');
    f1.gender.focus();
    return false;
  } else {
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function () {
      modal.style.display = "block";
    }

    span.onclick = function () {
      modal.style.display = "none";
    }

    window.onclick = function (event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  }
}
Tags:

2

Answers


  1. 0

    I can’t be sure but you shouldnt put backleashe on this part of you code (at least with my JS knowledge) change this
    var span = document.getElementsByClassName("close")[0];

    to

    var span = document.getElementsByClassName("close")[0];

    also in your form "f1" you are not deffining it as a variable so it will not be able to access it
    you can do it like this:

      var f1 = document.forms["f1"];
    Login or Signup to reply.
  2. 0

    In this example the submit button will be disabled until the form is valid. I use the oninput event on the form and checkValidity() to test if the form is valid. If so, I change the button to enabled. I don’t know if you need more checks and alerts. I like the build in stuff.

    Then clicking the submit button I made a dialog box. It is nice because it has all the build in functionality like showing and hiding.

    const dialogElm = document.getElementById('dialog');

document.forms.f1.addEventListener('input', e => {
  if (e.target.form.checkValidity()) {
    e.target.form.submit.disabled = false;
  }
});

document.forms.f1.addEventListener('submit', e => {
  e.preventDefault();
  dialog.showModal();
});
    form {
  display: flex;
  flex-direction: column;
  width: 400px;
}

form>label {
  display: flex;
}

label>span {
  flex-grow: 1;
}

dialog {
  border: thick solid green;
  border-radius: .2em;
}
    <form method="post" name="f1">
  <h2 style="padding-left:50px">Application Form</h2>
  <label>
    <span>Name</span>
    <input type="text" id="uname" name="username" required>
  </label>
  <label>
    <span>Date Of Birth</span>
    <input type="date" id="date" name="date" required></label>
  <label>
    <span>Gender</span>
  <label>
    <input type="radio" value="female" name="gender" required> Female</label>
  <label>
    <input value="male" type="radio" name="gender"> Male</label>
  </label>
  <label>
    <button name="submit" type="submit" disabled>SUBMIT</button>
  </label>
</form>
<dialog id="dialog">
  <p>Go Back To Home Page <a href="home">Home</a></p>
</dialog>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search