Invia modulo senza ricaricare la pagina

Question

Ho una funzione incorporata in javascript che desidero essere eseguita dopo aver inviato submit. In pratica cambia completamente l'aspetto della pagina. Ma ho bisogno di una variabile dalla casella di ricerca per passare ancora al javascript. Al momento lampeggia e ripristina quello che c'era perché ricarica la pagina.

Così ho impostato un return false nella mia funzione che gli impedisce di farlo ma la variabile che voglio non viene inviata tramite il modulo. Qualche idea su cosa dovrei fare per ottenerlo? (E 'bene per la pagina per aggiornare fino a quando l'updateTable() opere di funzione e non viene resettato dal ripristino pagina)

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

Questa è la funzione 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

si puo' Lo faccio usando le forme nel modo normale. Invece, vuoi usare AJAX.

Una funzione di esempio che invierà i dati e avviserà la risposta della pagina.

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

È possibile utilizzare jQuery funzione di serializzare insieme a get/post come segue:

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

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

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

Simple AJAX presentare utilizzando 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

Immagino che questo sia ciò di cui hai bisogno. Prova questo .

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

e il codice JavaScript è lo stesso

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

ho fatto un modo diverso di quello che mi mancava di fare ... mi ha dato il risultato che mi serviva. Ho scelto di non inviare il modulo, piuttosto di ottenere il valore del campo di testo e usarlo in javascript e quindi reimpostare il campo di testo. Scusa se ho infastidito qualcuno con questa domanda.

Fondamentalmente appena fatto questo:

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