Success Message Pop-Up After from Submit Button Clicked

How can I disable the popup success message when the form is required to fill?

Consider hiding the message initially and display it only on successful submission

<div class="alert hide">
     <span class="message">Success: You Message Sent Successfully!</span>
</div>

you should show the alert only if the form validation returns true.

function validateForm() {
    var name =  document.getElementById('name').value;
    var email =  document.getElementById('email').value;
    if(name == '' || name == null || email == '' || email == null){
       alert("Please Fill All Required Field");
       return false;
      }
    return true;
  }

$('button').click(function(){
     if(validateForm()){
       // your code for submission
       // after successful submission display the alert message
       $('.alert').removeClass("hide");
       $('.alert').addClass("show");
       $('.alert').addClass("showAlert");    
     }
    
  });

I would suggest you to follow the standard format for form validation and form submission. link here

After success message popup window and disable Submit button

Use disabled attribute.

success:function(data){
     if (data == null) {
      alert("Try Again!");
     }else if(data == 'success'){
      alert("Transaction Sent Successfully...");
     $("#send").prop("disabled", true);
     }

successful/fail message pop up box after submit?

You are echoing outside the body tag of your HTML.
Put your echos there, and you should be fine.

Also, remove the onclick="alert()" from your submit. This is the cause for your first undefined message.

<?php
  $posted = false;
  if( $_POST ) {
    $posted = true;

    // Database stuff here...
    // $result = mysql_query( ... )
    $result = $_POST['name'] == "danny"; // Dummy result
  }
?>

<html>
  <head></head>
  <body>

  <?php
    if( $posted ) {
      if( $result ) 
        echo "<script type='text/javascript'>alert('submitted successfully!')</script>";
      else
        echo "<script type='text/javascript'>alert('failed!')</script>";
    }
  ?>
    <form action="" method="post">
      Name:<input type="text" id="name" name="name"/>
      <input type="submit" value="submit" name="submit"/>
    </form>
  </body>
</html>

After submitting form its showing success message on different page

Your message is on the an another page because you use action="contact.php".
Try to remove that part of code.Also remove the portion with form

<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<button type="submit" class="btn btn-success btn-send btn-danger-gradiant mt-3 mb-3 text-white border-0 py-2 px-3" onclick="addYourFunctionhere()" value="Send message"><span> SUBMIT NOW <i class="fa fa-paper-plane"></i></span></button> 
      <script>  
function addYourFunctionhere(){
  var getform_name= $("#form_name").val()

  //and here use ajax to send the var from top

      $.ajax({
            type: "POST",
            url: url,
            data: {"username":getform_name},
            success: function (data) {
                console.log(data);
            }
        });
 }
</script>

Success Message Pop-Up After from Submit Button Clicked

How can I disable the popup success message when the form is required to fill?

After success message popup window and disable Submit button

successful/fail message pop up box after submit?

After submitting form its showing success message on different page

Related Topics

Leave a reply