Member Avatar for 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 ?

Edited by Dani because: Sorry bug caused post not to show
  • 3 Contributors
  • 2 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by pankaj_patel

Dani AI

Generated

A short, practical summary tied to the replies above:

The page refresh means the browser's native submit is still happening because the AJAX handler never runs. is right — the handler must be attached after jQuery is loaded and after the DOM is ready. In the posted snippet there are a few red flags that commonly kill the handler: the script that uses $ appears before the jQuery <script> include, there is a stray >/broken HTML in the snippet, and the inline onclick="res();" uses a global A variable and assigns A.style = "display:block" (that assignment is incorrect and fragile). Any JavaScript error before the preventDefault() call will stop the handler from attaching, so the form falls back to normal submit and refreshes.

A safe, modern pattern (no jQuery required) is to attach the submit listener on DOMContentLoaded and do a fetch POST; show the hidden section only after a successful response:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var form = document.getElementById('form1');
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var formData = new FormData(form);
    fetch('reservation.php', { method: 'POST', body: formData })
      .then(function (r) { return r.text(); })
      .then(function (text) {
         document.getElementById('A').style.display = 'block';
         // handle server response here
      })
      .catch(function (err) { console.error('AJAX error:', err); });
  });
});
</script>

Quick checklist: load jQuery before any code that uses it (or use DOMContentLoaded), keep the submit button inside the form, avoid fragile inline globals (use document.getElementById('A') or $('#A').show()), open DevTools and fix any console errors, and handle success/failure so the UI updates without a page reload. 's suggestion to read examples is useful — but first confirm there are no JS errors and the handler is actually attached.

Recommended Answers

All 2 Replies

Member Avatar for 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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.