Jquery ajax html return not working

Question

I have written these 100+ times... so forgive my stupidity in advance.

Simple ajax -> php -> html

So far the beforeSend appears, and then nothing occurs from that point. Everything else works fine. I have tried on doc ready, using the ajax function within the main function, re writing the ajax 4 different ways... and each time it still acts the same... before send.. and then the page returns to what it was without the Ajax:success happening!?

The JQ/JS

$(function() {
  $('.error').hide();
  $(".add_item_btn").click(function() {
    // validate and process form here

    $('.error').hide();
    var itemTitle = $("input#add_item_item_title").val();
      if (itemTitle == "") {
      $("label#add_item_item_title_error").show();
      $("input#add_item_item_title").focus();
      return false;
    }

    //var groupID = $("input#add_item_unit_price").val();  
    var groupID = $("select#add_item_groupid option").filter(":selected").val();

    var unitPrice = $("input#add_item_unit_price").val();

    if (unitPrice == "") {
    $("label#add_item_unit_price_error").show();
    $("input#add_item_unit_price").focus();
    return false;
    }

    if (isNaN(unitPrice)) // this is the code I need to change
    {
        //alert("Must input numbers");
        $("label#add_item_unit_price_error2").show();
        return false;
    }

    var dataString = 'itemTitle='+ itemTitle  + '&groupID=' + groupID + '&unitPrice=' + unitPrice;
    //alert (dataString);return false;

    //add_item();
    nu();

  });
});


function nu(){
var a = "1";
var url = "test2.php";
$.ajax({
            type: 'POST',
            url: url,
            dataType: 'html',
            data: {
                a: a
            },
            beforeSend: function() {
                    document.getElementById("message").innerHTML="<span class='blink_me'>Sending..</span>"  ;
            },
            success: function() {
                    document.getElementById("message").innerHTML="<span class='blink_me'>Done</span>" ;

            }
});
}

The PHP

<?    
echo "Test Success";
?>

The Html

<form name='add_item_form'>
    <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">Add Item</h3>
          </div>
          <div class="panel-body">
            <div class="input-group">
              <span class="input-group-addon">Title</span>
              <input type="text" id='add_item_item_title' name="add_item_item_title" class="form-control" placeholder="Max 50 Chars" />
            </div>
            <label class="error" for="add_item_item_title" id="add_item_item_title_error">This field is required.</label>

            <br />

            <div class="input-group">
                <span class="input-group-addon">Select Group</span>
                <select id='add_item_groupid' class="form-control">
                    <option value="1">Drink</option>
                    <option value="2">Food</option>
                    <option value="3">Deli</option>
                    <option value="4">Shelf</option>
                </select>
            </div>

            <br />

            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-gbp"></span></span>
              <input type="text" id='add_item_unit_price' name='add_item_unit_price' class="form-control" placeholder="Unit Price" /> 
            </div>
            <label class="error" for="add_item_unit_price" id="add_item_unit_price_error">This field is required.</label>
            <label class="error" for="add_item_unit_price" id="add_item_unit_price_error2">This field must be a price!</label>

            <br />
            <button class='add_item_btn'>Add Item</button>
          </div>

          <div id='message'>
            message here
          </div>

    </div>  
</form>

Answer 1

Thanks to Barmar the solution was found.

I required to add

return false;

to the end of the click function.

JQ/JS Edited

$(function() {
  $('.error').hide();
  $(".add_item_btn").click(function() {
    // validate and process form here

    $('.error').hide();
    var itemTitle = $("input#add_item_item_title").val();
      if (itemTitle == "") {
      $("label#add_item_item_title_error").show();
      $("input#add_item_item_title").focus();
      return false;
    }

    //var groupID = $("input#add_item_unit_price").val();  
    var groupID = $("select#add_item_groupid option").filter(":selected").val();

    var unitPrice = $("input#add_item_unit_price").val();

    if (unitPrice == "") {
    $("label#add_item_unit_price_error").show();
    $("input#add_item_unit_price").focus();
    return false;
    }

    if (isNaN(unitPrice)) // this is the code I need to change
    {
        //alert("Must input numbers");
        $("label#add_item_unit_price_error2").show();
        return false;
    }

    var dataString = 'itemTitle='+ itemTitle  + '&groupID=' + groupID + '&unitPrice=' + unitPrice;
    //alert (dataString);return false;

    //add_item();
    nu();

    return false; // <-- added this


    });
    });

Answer 2

You have the return false; too high in the function. In Javascript nothing runs below a return statement. Also since all of your return false; statements are in conditionals there is a chance they never run and the browser redirects before the AJAX call has a chance to complete.