Question posted in
You can find the official documentation here.

Jquery ajax – Jquery cannot access Form Submit

I have a form and input button; both an Ajax request and JQuery data validation code runs off of it. The Ajax request works fine but the data validation code is not picking up the form submission. I’m using the the enter key to submit the form.

$(document).ready(function() {
  $(":submit").click(function(e) {
    var msg = $("#search").val();
    $.ajax({
      url: 'search.php',
      method: 'POST',
      data: {
        msg: msg
      },
      dataType: 'json',
      success: function(response) {
        $(".content").html("")
        $.each(response, function() {
          $.each($(this), function(i, item) {
            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
    e.preventDefault();
  });

  $('form').submit(function() {
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }
  });
});

<form action="index.php" method="post" id="myForm" autocomplete="on">
  <pre>

<input name="msg" id="search" type="text" autofocus value= "<?php if(isset($_POST['msg'])) { 
 echo htmlentities ($_POST['msg']); }?>"></input> <span id="error"></span>

<input type="submit" style="border:0; padding:0; font-size:0">

</pre>
</form>

<div class="content">

</div>
Tags:

2

Answers


  1. 0

    Do not have two events. Have ONE event and let that event be the form submit

    They interfere with each other

    Move the preventDefault to the top or the form WILL be submitted if there are any errors in your code

    $(function() {
  $('form').on("submit", function(e) {
    e.preventDefault();
    $('#error').text(""); // reset
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }

    $.ajax({
      url: 'search.php',
      method: 'POST',
      data: {
        msg: name
      },
      dataType: 'json', 
      success: function(response) {
        $(".content").html("")
        $.each(response, function() {
          $.each($(this), function(i, item) {
            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
  });
});
    Login or Signup to reply.
  2. 0

    Your ajax call is done first because it is bound to the click event of the submit button. The e.preventDefault() prevents the submit event from being fired. That’s why your validation function is never executed.

    I would just use the validation function as it is with the addition of the e.preventDefault(); line and add the the ajax call when the validation is successful. I guess that is what you want?

    function doAjax() {
  console.log('look mom, i pretend i'm doing an ajax call');
}

$('form').submit(function(e) {
  e.preventDefault();
  console.log("look mom, im validating!")
  var name = $.trim($("#search").val());

  if (name.match(/[^a-zA-Z0-9 ]/g)) {
    $('#error').text('Please enter letters and spaces only');
    return false;
  }

  if (name === '') {
    $('#error').text('Please enter some text');
    return false;
  }

  if (name.length > 0 && name.length < 3) {
    $('#error').text('Please enter more letters');
    return false;
  }

  doAjax();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="index.php" method="post" id="myForm" autocomplete="on">
  <pre>
    <input name="msg" id="search" type="text" autofocus value="">
    <span id=error></span>
    <input type="submit" style="border:0; padding:0; font-size:12">
  </pre>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search