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;
});

score 1 · Answer 1 · edited May 23 '17 at 11:57

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?

edited May 23 '17 at 11:57

Community

1
1

answered Oct 07 '14 at 20:38

GramThanos

3,572
1
22
34

I tried that and its still the same result. Form posts but it does not alert a message or reset itself. – user3015195 Oct 07 '14 at 20:59
Hit F12 and go to Network tab. Then analyze your request, see if was successful an what the response was. – GramThanos Oct 07 '14 at 21:01
I get a Method 'Post' Status 200 – user3015195 Oct 07 '14 at 21:02
Try using console.log other than alert. – GramThanos Oct 07 '14 at 21:06
I suppose you have a server side mistake and your json in not valid. Check it by removing the "dataType: 'json'," and the allert will pop up. – GramThanos Oct 07 '14 at 21:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62633/discussion-between-user3015195-and-thanasis-grammatopoulos). – user3015195 Oct 07 '14 at 21:16

score 0 · Answer 2 · answered Dec 17 '14 at 17:41

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...

Submit form button stuck after ajax post

2 Answers2