Prevent page reload and redirect on form submit ajax/jquery

Question 1

I have looked through all the similar posts out there but nothing seems to help. This is what I have

HTML:

<section>
  <form id="contact-form" action="" method="post">
    <fieldset>
      <input id="name" name="name" placeholder="Name" type="text" />
      <input id="email" name="email" placeholder="Email" type="text" />
      <textarea id="comments" name="comments" placeholder="Message"></textarea>
      <div class="12u">
        <a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a>
        <a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a>
      </div>
      <ul id="response"></ul>
    </fieldset>
  </form>
</section>

JavaScript/jQuery:

function sendForm() {
  var name = $('input#name').val();
  var email = $('input#email').val();
  var comments = $('textarea#comments').val();
  var formData = 'name=' + name + '&email=' + email + '&comments=' + comments;
  $.ajax({
    type: 'post',
    url: 'js/sendEmail.php',
    data: formData,
    success: function(results) {
      $('ul#response').html(results);
    }
  }); // end ajax
}

What I am unable to do is prevent the page refresh when the #form-button-submit is pressed. I tried return false; I tried preventDefault() and every combination including return false; inside the onClick. I also tried using input type="button" and type="submit" instead and same result. I can't solve this and it is driving be nuts. If at all possible I would rather use the hyperlink due to some design things. I would really appreciate your help on this.

Question 2

Modify the function like this:

function sendForm(e){
  e.preventDefault();
}

And as comment mentions, pass the event:

onclick = sendForm(event);

Update 2:

$('#form-button-submit').on('click', function(e){
   e.preventDefault();

   var name = $('input#name').val(),
       email = $('input#email').val(),
       comments = $('textarea#comments').val(),
       formData = 'name=' + name + '&email=' + email + '&comments=' + comments;

    $.ajax({
      type: 'post',
      url: 'js/sendEmail.php',
      data: formData,
      success: function(results) {
        $('ul#response').html(results);
      }
    });
});

Question 3

I have worked with translations in my CMS and many times i require specific strings to be used in an otherwise static plain text as a javascript file. What i do:

en.php

return array(
   "id1"=>"translation 1",
   "id2"=>"translation 2"
);

HTML

...
$trans = require("en.php");
...
<input type="hidden" id="trans" data-trans='<?php echo json_encode($trans); ?>' />
...

JS

$(document).ready(function() {
   var id1 = $("#trans").data("trans")["id1"];   // contains the 'id1' string
});

This way your javascript would not need changing, which results many times in history caching related problems for your clients, as they need refreshing.

Question 4

add a class or ID to the form tag.

echo elgg_view_form('submission_form', array('class' => 'elgg-form-submission_form'), array());

then in your JS file

$(".elgg-form-submission_form").submit(function( event ) {
    $.post("service_comments/add_service_comment", $(this).serialize(), function(result) {

}

Question 5

You have an error in jQuery code:

Error:

buildingVal = $("#building").val();
levelVal = $("#level").val();
data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

Solution:

buildingVal = $("#building");
levelVal = $("#level");
data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();

Complete code js:

$('#submit_button').click(function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

   return false;

});

Edit

If your ever going to use this form to send data by ajax, the best way is to cancel the event "submit" the form:

HTML:

<form id="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >
...
</form>

JS:

$('#myform').bind('submit', function(event) {

     return false;
});

$('#submit_button').bind('click', function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

});

Question 6

You can bind an event handler to the "submit" JavaScript event using jQuery .submit method and then get trimmed #log text field value and check if empty of not like:

$('form').submit(function () {

    // Get the Login Name value and trim it
    var name = $.trim($('#log').val());

    // Check if empty of not
    if (name  === '') {
        alert('Text-field is empty.');
        return false;
    }
});

FIDDLE DEMO

Prevent page reload and redirect on form submit ajax/jquery

HTML:

JavaScript/jQuery:

Answers

javascript,php,jquery,html,ajax