How to make my successfull validation form pop up stay longer?

Question

I'm having an issue with pop up alert. Whenever I submit my form a pop up window shows saying that it was successfully submited, however it only appears for a second and I would like it to stay there. How do I do this? Here's what I've done so far:

$("#submit").click(function() {
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();
  var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else if (!emailPattern.test(email)) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
    event.preventDefault();
  } else {
    swal({
      title: "Good job!",
      text: "You're subscriptions has been registered",
      icon: "success",
      button: "Awesome!",
    });
    $('#testForm').submit();
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form id="testform">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

@aXuser264 it didn't mess up the code but the pop up window is still only appearing for a second — Andreia Gaspar, Jul 30 '20 at 13:46
@AnbarasiSelvaraj it worked. but the information on the form is still there. is it submitted anyway? — Andreia Gaspar, Jul 30 '20 at 13:47
If you like to process the submiting data with any server side programme.. you need to submit form data using any ajaxcall and then make the text field empty via javascript/jquery... If no need to process the data at server side.. then empty the text fields alone with javascript/jquery.. — GQ., Jul 30 '20 at 13:54
For submitting data with ajax - You can refer here https://www.formget.com/submit-form-using-ajax-php-and-jquery/ https://api.jquery.com/jquery.post/ To empty the field alone - i will update in my script ... you can check it out.... — GQ., Jul 30 '20 at 14:17
I updated my scripts.. you can check it out... for empty the fields you can use in jquery like this, $("#fullname").val('') in javascript like this, document.getElementById('fullname').value=""; — GQ., Jul 30 '20 at 14:28

ezio4df · Answer 1 · 2020-07-30T15:18:24.107

The only problem u have above i can see is to Stop form from submitting for amount of time, After searching a bit, i found the problem relevant to this post. AND made the code work accordingly. (Yep, it submits the form)

$("#submit").click(function() {
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();
  var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else if (!emailPattern.test(email)) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else {
    swal({
      title: "Good job!",
      text: "You're subscriptions has been registered",
      icon: "success",
      button: "Awesome!",
    });
  }

  window.setTimeout(() => {
    document.createElement('form').submit.call(document.forms['testform'])
  }, 2500);

  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form id="testform">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

that's great :D one of the main issues was if the form was being submitted. Thank you so much! — Andreia Gaspar, Jul 31 '20 at 08:33
@AndreiaGaspar hey, dont forget to mark answer & upvote if it helped — ezio4df, Jul 31 '20 at 09:00
@AndreiaGaspar thats ok, you can this checkout https://stackoverflow.com/help/someone-answers — ezio4df, Jul 31 '20 at 10:17

Simone Rossaini · Answer 2 · 2020-07-30T13:32:25.000

Add onSubmit="event.preventDefault();" prevent form submit that's why you have this issue.

$("#submit").click(function(){
    var name = $("#fullname").val();
    var email = $("#emailaddress").val();
    var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   
    if(name == '' || email == ''){
        swal({
            title: "Empty Fields!",
            text: "Please check the missing fields",
            icon: "warning",
            button: "Ok, thank you",
        });  
    }
    else if(!emailPattern.test(email)){
        swal({
            title: "Invalid Email!",
            text: "Please write a valid email address",
            icon: "warning",
            button: "Ok, thank you",
        }); 
        event.preventDefault();
    }
    else{
        swal({
            title: "Good job!",
            text: "You're subscriptions has been registered",
            icon: "success",
            button: "Awesome!",
        });
        $('#testForm').submit();
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
<form id="testform" onSubmit="event.preventDefault();">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

does the information in the form gets submitted even though it's still in the form? — Andreia Gaspar, Jul 30 '20 at 13:52

GQ. · Answer 3 · 2020-07-30T14:27:27.460

Need to change button type="submit" to type="button".... because submit form will be reload... or else we should prevent on form submission..

$("#submit").click(function(){
    var name = $("#fullname").val();
    var email = $("#emailaddress").val();
    var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   
    if(name == '' || email == ''){
        swal({
            title: "Empty Fields!",
            text: "Please check the missing fields",
            icon: "warning",
            button: "Ok, thank you",
        });  
    }
    else if(!emailPattern.test(email)){
        swal({
            title: "Invalid Email!",
            text: "Please write a valid email address",
            icon: "warning",
            button: "Ok, thank you",
        }); 
        event.preventDefault();
    }
    else{
    //$("#fullname").val(''); //empty value in jquery
    document.getElementById('fullname').value="";//empty value in javascript
$("#emailaddress").val('')
        swal({
            title: "Good job!",
            text: "You're subscriptions has been registered",
            icon: "success",
            button: "Awesome!",
        });
        $('#testForm').submit();


    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<form id="testform">
   <div class="box">
       <label for="fullname" class="form-tag">Name</label>
          <input type="text" name="name" id="fullname" class="form-control" required/>
        <label for="emailaddress" class="form-tag">Email</label>
        <input type="email" name="email" id="emailaddress" class="form-control" required/>
         <div class="button">
           <button id="submit" type="button" class="btn btn-light btn-lg">Submit</button>
        </div>
    </div>
</form>

How to make my successfull validation form pop up stay longer?

3 Answers3