Question

I’m having trouble to display data after form submition using JS and AJAX here is my code:

<script type="text/javascript">
    $(function() {
      $(".button").click(function() {
      var name = $("#name").val();
      var message = $("#message").val();
      var dataString = 'name='+ name + '&message=' + message;

      if (name == '' || message == ''){
      $('#rez').html("Empty fields");

      }else{
          $.ajax({
              type: 'post',
              url: "post.php",
              data: datastring,
              success: function() {
                 $('#rez').html(name + " " + message);
              }
          });
      }

   return false;

    });
    });
</script>

I’m getting only error message when I leave some empty fields, but when I fill all fields, I cant see printed result. What I’m doing wrong? If I delete ajax query and leave only result string like in the code below all working fine. Thanks for advices.

}else{      
            $('#rez').html(name + " " + message);
        }

Answer 1

You need to use a capital letter here:

data: dataString

 <script type="text/javascript">
        $(function() {
          $(".button").click(function() {
              var name = $("#name").val();
              var message = $("#message").val();
              var dataString = 'name='+ name + '&message=' + message;

              if (name == '' || message == ''){
                $('#rez').html("Empty fields");
              }
              else {
                 $.ajax({
                    type: 'post',
                    url: "post.php",
                    data: dataString,
                    success: function() {
                        $('#rez').html(name + " " + message);
                    }
                 });
                }
           return false;

        });
        });
    </script>