Prześlij formularz bez ponownego ładowania strony

Question

Mam wbudowaną funkcję javascript, którą chcę wykonać po otrzymaniu zgłoszenia. Zasadniczo całkowicie zmienia wygląd strony. Ale potrzebuję zmiennej z pola wyszukiwania, aby nadal przejść do javascript. W tej chwili miga i resetuje to, co było, ponieważ odświeża stronę.

Tak więc ustawiam funkcję false false w mojej funkcji, która uniemożliwia wykonanie tej czynności, ale zmienna, którą chcę, nie zostanie przesłana za pośrednictwem formularza. Jakieś pomysły na to, co powinienem zrobić, żeby je zdobyć? (To jest w porządku dla strony, aby odświeżyć dopóki updateTable() działa funkcyjnych i nie jest resetowany przez reset strona)

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

Jest to funkcja 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

Można” t zrobić to za pomocą formularzy w normalny sposób. Zamiast tego chcesz używać AJAX.

Przykładowa funkcja, która prześle dane i ostrzeże odpowiedź strony.

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

Można użyć funkcji jQuery serializacji wraz z get/post następująco:

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

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

jQuery serializacji Dokumentacja: http://api.jquery.com/serialize/

Proste AJAX przedstawienia za pomocą 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

Myślę, że to jest to, czego potrzebujesz. Spróbuj tego .

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

i Twój kod javascript jest taka sama

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

Zrobiłem mu inny sposób na to, czego się chce zrobić ... dała mi wynik potrzebne. Zdecydowałem się nie przesyłać formularza, a jedynie pobrać wartość pola tekstowego i użyć go w javascript, a następnie zresetować pole tekstowe. Przepraszam, jeśli przeszkadzam komukolwiek z tym pytaniem.

zasadzie tylko to zrobił:

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