web-dev-qa-db-fra.com

Soumettre le formulaire sans recharger la page

J'ai une fonction construite en JavaScript que je veux exécuter après l'envoi d'un formulaire. Cela change fondamentalement l'apparence de la page. Mais il me faut une variable de la boîte de recherche pour passer au JavaScript. Au moment où il clignote et réinitialise ce qui était là, car il recharge la page.

J'ai donc mis en place un retour false dans ma fonction, ce qui l'empêche de le faire, mais la variable que je veux n'est pas soumise via le formulaire. Des idées sur ce que je devrais faire pour l'obtenir? La page peut s'actualiser sans problème tant que la fonction updateTable() fonctionne et n'est pas réinitialisée par la réinitialisation de la page.

<form action="" method="get" onsubmit="return updateTable();">
  <input name="search" type="text">
  <input type="submit" value="Search" >
</form>

Voici la fonction updateTable:

function updateTable() { 
  var photoViewer = document.getElementById('photoViewer');
  var photo = document.getElementById('photo1').href;
  var numOfPics = 5;
  var columns = 3; 
  var rows = Math.ceil(numOfPics/columns);
  var content="";
  var count=0;

  content = "<table class='photoViewer' id='photoViewer'>";
  for (r = 0; r < rows; r++) {
    content +="<tr>";
    for (c = 0; c < columns; c++) {
      count++;
      if(count == numOfPics) break; // check if number of cells is equal number of pictures to stop
      content +="<td><a href='"+photo+"' id='photo1'><img class='photo' src='"+photo+"' alt='Photo'></a><p>City View</p></td>";
    }
    content +="</tr>";
  }
  content += "</table>";
  photoViewer.innerHTML = content;
}
javascriptform-submit
23
Butterflycode

Vous ne pouvez pas faire cela en utilisant des formulaires de la manière habituelle. Au lieu de cela, vous voulez utiliser AJAX.

Un exemple de fonction qui soumettra les données et alertera la réponse de la page.

function submitForm() {
    var http = new XMLHttpRequest();
    http.open("POST", "<<whereverTheFormIsGoing>>", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}
32
Matt Bryant

Vous pouvez utiliser la fonction de sérialisation jQuery avec get/post comme suit:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theform').serialize())

documentation jQuery Serialize: http://api.jquery.com/serialize/

Simple AJAX soumettre en utilisant jQuery:

// this is the id of the submit button
$("#submitButtonId").click(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
29
Ahsan Shah