Yeniden yükleme yapmadan formu gönder

Question

Gönderme vurulduktan sonra yürütülmesini istediğim javascript yerleşik bir işlev var. Temel olarak sayfanın görünümünü tamamen değiştirir. Ancak arama kutusundan hala javascript'e geçmek için bir değişkene ihtiyacım var. Şu anda yanıp söner ve orada olanı sıfırlar çünkü sayfayı yeniden yükler.

Bu nedenle işlevimde bunu yapmasını engelleyen bir yanlışlık döndürüyorum, ancak istediğim değişken form aracılığıyla gönderilmiyor. Onu almak için ne yapmam gerektiği hakkında bir fikrin var mı? '

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

Bu updateTable fonksiyon

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

Sen edebilirsiniz olduğu (sayfa updateTable() fonksiyonu eserleri sürece yenilemek için ve sayfa resetlenen değildir için tamam olduğu) Bunu normal yolla formları kullanarak yapın. Bunun yerine, AJAX kullanmak istersiniz.

Verileri gönderecek ve sayfa yanıtını bildiren örnek bir işlev.

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

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

jQuery serialize Belgeleri: http://api.jquery.com/serialize/

Basit AJAX kullanarak gönderim jQuery şu şekildedir:

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

jQuery get/yayınının yanı sıra işlevini serialize kullanabilirsiniz

// 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

Sanırım ihtiyacın olan şey bu. Bunu dene .

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

ve javascript kodu aynı

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

ben ... yapmak isteyen ne kadar bunu farklı bir yol yaptılar olduğunu bana ihtiyacım sonucunu verdi. Formu göndermemeyi tercih ettim, sadece metin alanının değerini al ve javascript'te kullan ve sonra metin alanını sıfırla. Üzgünüm, bu soruyla kimseyi rahatsız ettiysem.

Temelde sadece bu yaptı:

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