Submit form button stuck after ajax post

Question

Hi i have a form which uses Ajax to make a post in Rails 4. The javascript runs some validation and should return an alert message once the post is successful. Currently the submit button stays depressed and although the form posts no message gets alerted. I dont know what i'm doing wrong and just want the form to alert a message and then reset itself.

$('#submit1').click(function(e){
  e.preventDefault();
  var name = $('input#name').val();

  if (name == "") {
    alert("please enter a name!");
    $('input#name').focus();
    return false;
  }
  var email = $('input#email').val();

  if (email == ""){
    alert("please enter your email");
    $('input#email').focus();
    return false;
  }
  var content = $('textarea#text').val();

  if (content == ""){
    alert("please enter a comment");
    $('textarea#text').focus();
    return false;

  }

  var dataString = 'name=' + name + '&email=' + email + '&content=' + content;


  $.ajax({
    type: "POST",
    url: "emailer",
    data: dataString,
    dataType: 'json',
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
    success: function(){
      alert("mappy jappy");
      $('input#name').reset();
      $('input#email').reset();
      $('textarea#text').reset();
    }
  });
  return false;
});

Answer 1

You are preventing the wrong event. You need the 'onsubmit' event of the form not the 'onclick' event of the submit button.

$('#myform').on('submit', function(event){
  event.preventDefault();
  /* your code here */
});

For more info please read : How to prevent form from being submitted?

Answer 2

First of all the reset function is not for the text boxes..it will run for the form. So the corrected code would be...

<script>
$(function(){
$('#submit1').click(function(e){
  e.preventDefault();
  var name = $('input#name').val();

  if (name == "") {
    alert("please enter a name!");
    $('input#name').focus();
    return false;
  }
  var email = $('input#email').val();

  if (email == ""){
    alert("please enter your email");
    $('input#email').focus();
    return false;
  }
  var content = $('textarea#text').val();

  if (content == ""){
    alert("please enter a comment");
    $('textarea#text').focus();
    return false;

  }

  var dataString = 'name=' + name + '&email=' + email + '&content=' + content;


  $.ajax({
    type: "POST",
    url: "user_availability.php",
    data: dataString,
    dataType: 'json',
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
    success: function(){
      alert("mappy jappy");
      $('#contact-form')[0].reset();
    }
  });
  return false;
});
});
</script>

AND the html part would be like below-

<form id="contact-form" method="post" enctype="multipart/form-data">
<input type="text" id="email" name="email" />
<input type="text" id="name" name="name" />
<textarea name="text" id="text"></textarea>
<input type="submit" value="submit" id="submit1" />
</form>

Please Check and let me know...