Soumettre le formulaire sans recharger la page

Question

J'ai une fonction construite en javascript que je veux exécuter après l'envoi de submit. Cela change fondamentalement l'aspect de la page complètement. Mais j'ai besoin d'une variable de la boîte de recherche pour continuer à javascript. Au moment où il clignote et réinitialise ce qui était là parce qu'il recharge la page.

Donc, je configure un retour faux dans ma fonction qui l'empêche de le faire mais la variable que je veux ne sera pas soumise à travers le formulaire. Des idées sur ce que je devrais faire pour l'obtenir? (Il est correct de la page pour rafraîchir tant que les travaux de la fonction UpdateTable() et est pas remis à zéro par la remise à zéro de la page)

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

Ceci est 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; // here is check if number of cells 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; 

Answer 1

Vous pouvez » Le faire en utilisant les formes normales. Au lieu de cela, vous voulez utiliser AJAX.

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); 
    } 
} 

Answer 2

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

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

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

jQuery sérialisation Documentation: 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. 
}); 

Answer 3

Je suppose que c'est ce dont tu as besoin. Essaye ça .

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

et votre code javascript est le même

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; // here is check if number of cells 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; 
} 

Answer 4

Je l'ai fait d'une manière différente de ce que je voulais faire ... m'a donné le résultat que je avais besoin. J'ai choisi de ne pas soumettre le formulaire, plutôt d'obtenir la valeur du champ de texte et de l'utiliser dans le javascript, puis de réinitialiser le champ de texte. Désolé si j'ai dérangé quelqu'un avec cette question.

En gros, juste fait ceci:

var search = document.getElementById('search').value; 
    document.getElementById('search').value = "";