Empêcher le rechargement de la page et de les rediriger sur le formulaire de soumission ajax/jquery

J'ai regardé à travers les postes là, mais rien ne semble aider. C'est ce que j'ai

HTML:

<section>
  <form id="contact-form" action="" method="post">
    <fieldset>
      <input id="name" name="name" placeholder="Name" type="text" />
      <input id="email" name="email" placeholder="Email" type="text" />
      <textarea id="comments" name="comments" placeholder="Message"></textarea>
      <div class="12u">
        <a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a>
        <a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a>
      </div>
      <ul id="response"></ul>
    </fieldset>
  </form>
</section>

JavaScript/jQuery:

function sendForm() {
  var name = $('input#name').val();
  var email = $('input#email').val();
  var comments = $('textarea#comments').val();
  var formData = 'name=' + name + '&email=' + email + '&comments=' + comments;
  $.ajax({
    type: 'post',
    url: 'js/sendEmail.php',
    data: formData,
    success: function(results) {
      $('ul#response').html(results);
    }
  }); //end ajax
}

Ce que je suis incapable de le faire est de prévenir l'actualisation de la page lorsque le #form-button-submit est pressé. J'ai essayé return false; j'ai essayé preventDefault() et chaque combinaison, y compris return false; à l'intérieur de la onClick. J'ai aussi essayé d'utiliser input type="button" et type="submit" au lieu et au même résultat. Je ne peux pas résoudre cela, et c'est la conduite de noix. Si possible, je préfère utiliser le lien hypertexte dû à une certaine conception des choses.
J'apprécierais vraiment votre aide.

OriginalL'auteur Vettan Maximillion | 2014-10-25

22

Modifier la fonction comme ceci:
```
function sendForm(e){
  e.preventDefault();
}
```
Et comme le commentaire mentionne, transmettre l'événement:
```
onclick = sendForm(event);
```
Mise à jour 2:
```
$('#form-button-submit').on('click', function(e){
   e.preventDefault();

   var name = $('input#name').val(),
       email = $('input#email').val(),
       comments = $('textarea#comments').val(),
       formData = 'name=' + name + '&email=' + email + '&comments=' + comments;

    $.ajax({
      type: 'post',
      url: 'js/sendEmail.php',
      data: formData,
      success: function(results) {
        $('ul#response').html(results);
      }
    });
});
```
N'oubliez pas que l'objet de l'événement doit être transmis à l'appel de la fonction
pouah
onclick="sendForm(this)" pas event
Merci mais ça ne fonctionne pas. Chose, c'est juste avant qu'il actualise, je peux voir que ul a été peuplée. J'ai essayé de côté de preventDefault() à l'aide de return false dans le onClick comme "sendForm(); return false;" mettre de retour par défaut après l'ajax, ayant à la fois preventDefault() et return false; et toute combinaison de placements vraiment.
Se débarrasser de la ligne de gestionnaire d'événements, et puis voir mon "update 2"

OriginalL'auteur What have you tried

function sendForm(){
    //all your code
    return false;
}

OriginalL'auteur Samuel Cook

2

Avez-vous essayé d'utiliser
```
function sendForm(event){
    event.preventDefault();
}
```
Je vous remercie. Essayé déjà, mais ne fonctionne pas.

OriginalL'auteur stf
2

J'ai été aussi peu engagé dans la recherche de solution à ce problème, et ainsi de loin la meilleure méthode de travail que j'ai trouvé était ce-

Essayez d'utiliser XHR pour envoyer la demande à n'importe quelle url, au lieu de $.ajax()...je sais que cela semble peu bizarre, mais l'essayer!

Exemple
```
<form method="POST" enctype="multipart/form-data" id="test-form">
```
```
var testForm = document.getElementById('test-form');
testForm.onsubmit = function(event) {
event.preventDefault();

var request = new XMLHttpRequest();
//POST to any url
request.open('POST', some_url, false);

var formData = new FormData(document.getElementById('test-form'));
request.send(formData);
```
Ce serait envoyer vos données avec succès ...sans rechargement de la page.

OriginalL'auteur Kaif Khan

Simple et Complète code de travail

<script>
    $(document).ready(function() {
        $("#contact-form").submit(function() {
            $("#loading").show().fadeIn('slow');
                $("#response").hide().fadeOut('slow');
                 var frm = $('#contact-form');
                 $.ajax({
                     type: frm.attr('method'),
                     url: 'url.php',
                     data: frm.serialize(),
                     success: function (data) {
                         $('#response').html(data);
                         $("#loading").hide().fadeOut('slow');
                         $("#response").slideDown();
               }, error: function(jqXHR, textStatus, errorThrown){
              console.log(" The following error occured: "+ textStatus, errorThrown );
            } });
           return false;
        });
    });
</script>

#loading pourrait être une image ou quelque chose qui apparaît lorsque le formulaire est en cours de traitement, d'utiliser le code, il suffit de créer un formulaire avec l'ID contact-form

OriginalL'auteur firstmadcoding

Une autre façon d'éviter le formulaire de soumission est de placer le bouton à l'extérieur de la forme. J'ai eu un code existant qui a travaillé et créé une nouvelle page basée sur le code de travail et a écrit le html comme ceci:

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
    <button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
</form>

Ce formulaire cause indésirables rediriger décrit ci-dessus. Changer le code html à ce qui est indiqué ci-dessous résolu le problème.

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

OriginalL'auteur John

0

J'attends quelqu'un pour comprendre mon idée très bien que c'est une idée très simple.
1. donner votre formulaire lui-même un id ou vous pouvez l'obtenir par un autre moyen que vous préférez.
2. dans le formulaire de saisie "soumettre" l'appel d'une méthode onclick à partir de votre fichier javascript.
3. dans cette méthode une variable reportez-vous à votre à partir de l'id de la méthode addEventListener sur elle et de faire une méthode preventDefault sur "soumettre", pas sur "cliquez ici".
  
  À préciser que voir ceci:
```
//element refers to the form DOM after you got it in a variable called element for example:
element.addEventListener('submit', (e) => {
   e.preventDefault();
   //rest of your code goes here
});  
```
  L'idée en bref est de traiter avec le formulaire à soumettre des cas après traitement avec bouton envoyer, cliquez sur l'événement.
Quel que soit votre besoin à l'intérieur de cette méthode, il va maintenant fonctionner sans actualisation 🙂

Juste être sûr de traiter avec l'ajax dans le droit chemin et vous sera fait.

Bien sûr, il fonctionnera uniquement avec les formulaires.

OriginalL'auteur Ahmed Mabrouk

Vous devez vous connecter pour publier un commentaire.