How do you execute a new AJAX everytime a submit button is clicked?

Question

I have a form that is executed every time a submit button is clicked. When the submit button is clicked, a modal is shown and the modal is populated with JSON data. The application /addresschecker checks against the addresses posted and sends me an error message if I get a code return number of 2003. If not I select the return data via JSON using jQuery's $.each

The application works but when I close the modal, refill out the form and click submit, the form does not make a new call to /addresschecker I looked in my network tab of chrome and it seems to be using the old data. I am thinking that I need to force a new Ajax call everytime a user clicks on the submit button or clear the cache somehow. Not sure why I'm seeing old data

<form id="Validate">
  <input class="form-control" id="adr1" name="address1" type="text" placeholder="Address 1" />
  <input class="form-control" id="adr2" name="address1" type="text" placeholder="Address 1" />
  <button type="submit" >Submit</button>
</form>

<div class="modal hide">
  <!-- JSON Data returned -->
  <div id="Message_1"></div>
  <div id="Message_2"></div>
  <div id="error_message"></div>
</div>


// My main form code
submitHandler: function(form) {
  $.ajax({
    url: '/addresschecker',
    type: 'post',
    cache: false,
    dataType: 'json',
    data: $('form#Validate').serialize(),
    success: handleData
  });

  function handleData(data) {
    var mesgcheck = data.message;

    if (data.code == '2003') {
      $("#error_messag").html(mesgcheck);
    } else {
      // Display Modal
      $(".modal").removeClass("hide");
      $.each(data, function(i, suggest) {
        $(".adr1").val(suggest.address1);
        $(".adr2").val(suggest.address2);
      });                        
    }
  }
}

Answer 1

Let ajax handle your request.

Use this:

<input type="button" value="submit">

Instead of type submit.