0

My form validate is working well, response message shows with form validate true / false, it's no problem but I want to add a condition in JavaScript to check if response is true then form input will be disabled until response true message will be shown then after few seconds form will be reset.

Here is my PHP code after validation and send response true:

$response = "form submitted successfully";

This is my form code sample:

<form action="" method="POST" id="headersignupform" onsubmit="return false;">
<div class="resultsignup toppage"></div>
<button type="submit" class="signupbtn">Submit</button>

and this is my JavaScript code:

<script type="text/javascript">
  $(function(){
  $('.signupbtn').click(function(){
  $('html, body').animate({
  scrollTop: $(".toppage").offset().top - 100
  },'slow');
  $.post("<?php echo base_url();?>account/signup",$("#headersignupform").serialize(), 

  function(response){
  if($.trim(response) == 'true'){
  document.getElementById("headersignupform").reset();
  $(".resultsignup").html(response).fadeIn("slow");
    }else{
  $(".resultsignup").html(response).fadeIn("slow");
  } }); });
  })
</script>

Thus can reset it but only one time. Please read more info in below; $('#headersignupform')[0].reset();

but the reset only work one time, I mean if I refresh the page, then I click on submit button then it will show response but lets see we had so false response, then for second time or more if I will click on submit button then it won't show response at all. so, what's the issue? By the way, however the above code line reset the form, but it won't disable form input as my mentioned question.

Jomla
  • 93
  • 1
  • 9

1 Answers1

0

Try this code

<script type="text/javascript">
  $(function(){
  $('.signupbtn').click(function(){
  $('html, body').animate({
  scrollTop: $(".toppage").offset().top - 100
  },'slow');

    $.post("<?php echo base_url();?>account/signup",$("#headersignupform").serialize(), 

      function(response){
          if($.trim(response) == true){
            document.getElementById("headersignupform").reset();
            $(".resultsignup").html(response).fadeIn("slow");
          }else{
            $(".resultsignup").html(response).fadeIn("slow");
          } 

      }); 
    });
  })
</script>
Vel
  • 9,027
  • 6
  • 34
  • 66
  • I've added $("headersignupform").reset(); and I used also window.location.replace(url); but it doesn't work, I mean, form validate is working and showing true/false message, but form doesn't reset and page doesn't redirect too. I'm sure it's related to this JavaScript. – Jomla Jan 23 '18 at 14:01
  • No even response and form validate not working with your updated code. :( – Jomla Jan 23 '18 at 14:14
  • Sorry, your code works, response message also shows, but form not reset. – Jomla Jan 23 '18 at 14:28
  • I've updated my question, the problem is related to the javascript. – Jomla Jan 23 '18 at 14:44
  • I found a solution here to reset it $('#headersignupform')[0].reset(); https://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method – Jomla Jan 23 '18 at 15:21