php Question posted in
Official manual can be found here.

Php – I want a message box to appear once i click submit

<form name="contactForm" class="customform" action="contact.php" method="post">
            <div class="s-12">
              <div class="margin">
                <div class="s-12 m-12 l-6">
                  <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
                  <p class="name-error form-error">Please enter your name.</p>
                </div>
                <div class="s-12 m-12 l-6">
                  <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
                  <p class="email-error form-error">Please enter your e-mail.</p>
                </div>
              </div>
            </div>
            <div class="s-12"> 
              <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
              <p class="subject-error form-error">Please enter the subject.</p>
            </div>
            <div class="s-12">
              <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
              <p class="message-error form-error">Please enter your message.</p>
            </div>
            <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
            </form>
            
            <script> 
            function A1()
            {
                alert("Thank You!");
                return true;
            }   
            </script>

Everything in the form is working properly but the message box is not showing after clicking submit! I simply want a message box to pop up saying "Submission has been sent!" to appear once the user clicks submit. I tried onclick="active" but the problem with this one is that even if the whole form is left empty it pops.

Tags:

2

Answers


  1. 0

    to make the message box pop up after the user clicks submit, you need to adjust the onsubmit attribute in the tag to call the A1() function correctly. currently, it’s just setting the attribute to "A1", but it should be onsubmit="return A1()" to properly invoke the function and handle the form submission. Here’s the corrected form with the message box:

    <form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="return A1()">
  <div class="s-12">
    <div class="margin">
      <div class="s-12 m-12 l-6">
        <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
        <p class="name-error form-error">Please enter your name.</p>
      </div>
      <div class="s-12 m-12 l-6">
        <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
        <p class="email-error form-error">Please enter your e-mail.</p>
      </div>
    </div>
  </div>
  <div class="s-12"> 
    <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
    <p class="subject-error form-error">Please enter the subject.</p>
  </div>
  <div class="s-12">
    <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
    <p class="message-error form-error">Please enter your message.</p>
  </div>
  <div class="s-12"><button class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
</form>

<script> 
function A1() {
    alert("Submission has been sent!");
    return true;
}   
</script>

    this change will ensure that the message box pops up only when the form is successfully submitted.

    Login or Signup to reply.
  2. 0

    The correct placement for the onsubmit event is within the <form> tag rather than on the button element. When using a button or input with the type submit inside a form, it’s essential to attach the ‘onsubmit’ event to the <form> tag itself.

    Here’s the corrected version form:

    <form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="A1()">
    <div class="s-12">
      <div class="margin">
        <div class="s-12 m-12 l-6">
          <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
          <p class="name-error form-error">Please enter your name.</p>
        </div>
        <div class="s-12 m-12 l-6">
          <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
          <p class="email-error form-error">Please enter your e-mail.</p>
        </div>
      </div>
    </div>
    <div class="s-12"> 
      <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
      <p class="subject-error form-error">Please enter the subject.</p>
    </div>
    <div class="s-12">
      <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
      <p class="message-error form-error">Please enter your message.</p>
    </div>
    <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
    </form>
    
    <script> 
    function A1()
    {
        alert("Thank You!");
        return true;
    }   
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search