javascript - Prevent page from refreshing after an ajax call

I have a bootstrap form the info from which I am saving to a json file using an ajax call.

My problem is that when I press the Submit button the page seems to refresh after the call(executed after the submit button is clicked), which is something i'd definitely like to avoid.

I tried to investigate the problem, but my knowledge is insufficient for that as I don't have an indepth understanding of any of these concepts.

Here is my BS form :

<form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="name">Full Name:</label>
        <div class="col-sm-2">
          <input type="name" class="form-control" id="nameFull">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="phone">Phone:</label>
        <div class="col-sm-2">
          <input type="phone" class="form-control" id="phoneApp">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-2">
          <input type="email" class="form-control" id="emailApp">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="date">Date:</label>
        <div class="col-sm-2">
          <input type="date" class="form-control" id="date">

        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="text">Hour:</label>
        <div class="col-sm-2">
          <select class="form-control" id="time">
            <option value="Time" class="">Time</option>
                        <option value="10am" class="">10:00-10:30</option>
                        <option value="1030am" class="">10:30-11:00</option>
                        </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="reason">Reason:</label>
        <div class="col-lg-3">
          <textarea class="form-control" id="reason" name="ments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button id="saveAppt" class="btn btn-default">Submit</button>
        </div>
      </div>
    </form>

And here is the ajax call :

$(document).ready(function() {
    $("#saveAppt").click(function(){
         var fullName = $("#nameFull").val();
         var userName = $("#cpr").val();
         var phone = $("#phoneApp").val();
         var email = $("#emailApp").val();
         var date = $("#date").val();
         var time = $("#time").val();
         var reason = $("#reason").val();
         console.log(time);
         console.log(date);
         console.log(reason);

         var jAppointment= {};
        jAppointment.fullName = fullName;
        jAppointment.userName = userName;
        jAppointment.phone = phone;
        jAppointment.email = email;
        jAppointment.date = date;
        jAppointment.time = time;
        jAppointment.reason = reason;

        console.log(JSON.stringify(jAppointment));

      $.ajax
      ({
        type: "GET",
        dataType : 'json',
        async: false,
        url: 'save-appointments.php',
        data: { data: JSON.stringify(jAppointment) },
        success: function () {console.log("Thanks!"); },
        failure: function() {console.log("Error!");}
      });
    });
});

I have a bootstrap form the info from which I am saving to a json file using an ajax call.

My problem is that when I press the Submit button the page seems to refresh after the call(executed after the submit button is clicked), which is something i'd definitely like to avoid.

I tried to investigate the problem, but my knowledge is insufficient for that as I don't have an indepth understanding of any of these concepts.

Here is my BS form :

<form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="name">Full Name:</label>
        <div class="col-sm-2">
          <input type="name" class="form-control" id="nameFull">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="phone">Phone:</label>
        <div class="col-sm-2">
          <input type="phone" class="form-control" id="phoneApp">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-2">
          <input type="email" class="form-control" id="emailApp">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="date">Date:</label>
        <div class="col-sm-2">
          <input type="date" class="form-control" id="date">

        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="text">Hour:</label>
        <div class="col-sm-2">
          <select class="form-control" id="time">
            <option value="Time" class="">Time</option>
                        <option value="10am" class="">10:00-10:30</option>
                        <option value="1030am" class="">10:30-11:00</option>
                        </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="reason">Reason:</label>
        <div class="col-lg-3">
          <textarea class="form-control" id="reason" name="ments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button id="saveAppt" class="btn btn-default">Submit</button>
        </div>
      </div>
    </form>

And here is the ajax call :

$(document).ready(function() {
    $("#saveAppt").click(function(){
         var fullName = $("#nameFull").val();
         var userName = $("#cpr").val();
         var phone = $("#phoneApp").val();
         var email = $("#emailApp").val();
         var date = $("#date").val();
         var time = $("#time").val();
         var reason = $("#reason").val();
         console.log(time);
         console.log(date);
         console.log(reason);

         var jAppointment= {};
        jAppointment.fullName = fullName;
        jAppointment.userName = userName;
        jAppointment.phone = phone;
        jAppointment.email = email;
        jAppointment.date = date;
        jAppointment.time = time;
        jAppointment.reason = reason;

        console.log(JSON.stringify(jAppointment));

      $.ajax
      ({
        type: "GET",
        dataType : 'json',
        async: false,
        url: 'save-appointments.php',
        data: { data: JSON.stringify(jAppointment) },
        success: function () {console.log("Thanks!"); },
        failure: function() {console.log("Error!");}
      });
    });
});

Share Improve this question edited Nov 1, 2016 at 16:49 Zakaria Acharki 67.5k15 gold badges78 silver badges106 bronze badges asked Nov 1, 2016 at 15:05 Robert Ross 1,1893 gold badges20 silver badges48 bronze badges

w3schools./jsref/event_preventdefault.asp – Sergio Tx Commented Nov 1, 2016 at 15:08
1 Add this to your ajax call to get a more specific error message: error: function (request, status, error) { alert('Error: ' + error); } – Neo Commented Nov 1, 2016 at 15:12
This was answerd here:Disable form auto submit on button click – O_Z Commented Nov 1, 2016 at 15:14
This was already answered here: Disable form auto submit on button click – O_Z Commented Nov 1, 2016 at 15:15

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

Now what the submit action refresh your page the click event will never be raised since the <button> tag has type='submit' by defaul just add type='button' type to avoid submit/refresh :

<button type="button" id="saveAppt" class="btn btn-default">Submit</button>

Hope this helps.

$(document).ready(function() {
  $("#saveAppt").click(function(){
    var fullName = $("#nameFull").val();
    var userName = $("#cpr").val();
    var phone = $("#phoneApp").val();
    var email = $("#emailApp").val();
    var date = $("#date").val();
    var time = $("#time").val();
    var reason = $("#reason").val();
    
    console.log(time);
    console.log(date);
    console.log(reason);

    var jAppointment= {};
    jAppointment.fullName = fullName;
    jAppointment.userName = userName;
    jAppointment.phone = phone;
    jAppointment.email = email;
    jAppointment.date = date;
    jAppointment.time = time;
    jAppointment.reason = reason;

    console.log(JSON.stringify(jAppointment));

    $.ajax
    ({
      type: "GET",
      dataType : 'json',
      async: false,
      url: 'save-appointments.php',
      data: { data: JSON.stringify(jAppointment) },
      success: function () {console.log("Thanks!"); },
      failure: function() {console.log("Error!");}
    });
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="name">Full Name:</label>
    <div class="col-sm-2">
      <input type="name" class="form-control" id="nameFull">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="phone">Phone:</label>
    <div class="col-sm-2">
      <input type="phone" class="form-control" id="phoneApp">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-2">
      <input type="email" class="form-control" id="emailApp">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="date">Date:</label>
    <div class="col-sm-2">
      <input type="date" class="form-control" id="date">

    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="text">Hour:</label>
    <div class="col-sm-2">
      <select class="form-control" id="time">
        <option value="Time" class="">Time</option>
        <option value="10am" class="">10:00-10:30</option>
        <option value="1030am" class="">10:30-11:00</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-lg-2" for="reason">Reason:</label>
    <div class="col-lg-3">
      <textarea class="form-control" id="reason" name="ments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type='button' id="saveAppt" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
<br><br><br><br><br><br>

Crate a reference to your event in your click handler.

$("#saveAppt").click(function(e){

then call the preventDefault function on that event after your AJAX call.

     $.ajax
      ({
        type: "GET",
        dataType : 'json',
        async: false,
        url: 'save-appointments.php',
        data: { data: JSON.stringify(jAppointment) },
        success: function () {console.log("Thanks!"); },
        failure: function() {console.log("Error!");}
      });
      e.preventDefault();

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Prevent page from refreshing after an ajax call - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)