Form submit with AJAX without page refresh

[Maryam_8]

**hello When I push submit the page refresh. Any suggestions to stop refresh ? I'm assuming it's something to do with the submit button but I can't figure it out

this is my script :**

<form id="form1" class="form-horizontal" method="POST" action="">

       <input type="hidden" name="action" value="ajouter_reservation" />
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Ajouter une reservation</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
          <label for="start" class="col-sm-2 control-label"> date debut     
</label>
          <div class="col-sm-10">
            <input type="text" name="start" class="form-control" id="start" readonly>
          </div>
          </div>
          <div class="form-group">
          <label for="end" class="col-sm-2 control-label">date fin       
          </label>
          <div class="col-sm-10">
            <input type="text" name="end" class="form-control" id="end" readonly>
          </div>
          </div>      
>  
          <div class="form-group">
          <label for="end" class="col-sm-2 control-label">Nombre de client 
                                   </label>
          <div class="col-sm-10">
            <input type="text" name="nb_client" class="form-control" id="nb_client" >
          </div>
          </div>

          <script type="text/javascript">
  function res(){ 
A.style="display:block"; 
  }

$('#form1').submit(function(e){

    e.preventDefault();// using this page stop being refreshing 
 // Prevent Default Submission

    $.ajax({
 url: 'reservation.php',
 type: 'POST',
 data: $(this).serialize(), // it will serialize the form data
        dataType: 'html'
    });

});

</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<center><input type="submit" onclick="res();" class="btn btn-primary text-center" value="suivant"></center>
<div style="display: none;" id="A">
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Chambre</label>

i'm in the page reservation.php and i need to stop refresh when i clic in input type = submit i tried the script above but it still refresh Any suggestions ?

[rproffitt]

I know folk hate to research such but I did read a few from https://www.google.com/search?q=Form+submit+with+AJAX+without+page+refresh&gl=US and don't see much new. As is, anything I can add to the prior solutions.

If you tried these and failed, post your code, where you got it from and why you think it failed.

[pankaj_patel]

Few Problems I can state here:

• Your form submit is handled by jQuery; so the script for form submit should come after you have included the jQuery
• Now as you have done the above step, problem is that the event handlers should be added when document is ready; which can be done in two following ways
• Vanill JS way i.e. DOMContentLoaded:
  document.addEventListenter('DomContentLoaded', function() { / do your stuff /}
• jQuery way: with document ready:
  $(document).ready(function() { / do your stuff / });

So on fifing your code; it should look like following:

<form id="form1" class="form-horizontal" method="POST" action="">
       <input type="hidden" name="action" value="ajouter_reservation" />
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Ajouter une reservation</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
          <label for="start" class="col-sm-2 control-label"> date debut     
</label>
          <div class="col-sm-10">
            <input type="text" name="start" class="form-control" id="start" readonly>
          </div>
          </div>
          <div class="form-group">
          <label for="end" class="col-sm-2 control-label">date fin       
          </label>
          <div class="col-sm-10">
            <input type="text" name="end" class="form-control" id="end" readonly>
          </div>
          </div>      
>  
          <div class="form-group">
          <label for="end" class="col-sm-2 control-label">Nombre de client 
                                   </label>
          <div class="col-sm-10">
            <input type="text" name="nb_client" class="form-control" id="nb_client" >
          </div>
          </div>
<center><input type="submit" class="btn btn-primary text-center" value="suivant"></center>
<div style="display: none;" id="A">
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Chambre</label>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function res(){ 
    A.style="display:block"; 
}
$('#form1').submit(function(e){
    e.preventDefault();// using this page stop being refreshing 
 // Prevent Default Submission
    $.ajax({
 url: 'reservation.php',
 type: 'POST',
 data: $(this).serialize(), // it will serialize the form data
        dataType: 'html'
    });
});
</script>