2013-08-11 13 views
17

Ich habe eine Funktion in Javascript, die ich ausgeführt werden soll, nachdem submit getroffen wird. Es ändert grundsätzlich das Aussehen der Seite vollständig. Aber ich brauche eine Variable aus dem Suchfeld, um immer noch durch das Javascript zu gehen. Im Moment blinkt es und setzt das zurück, was da war, weil es die Seite neu lädt.Formular ohne Neuladen der Seite senden

Also habe ich eine Rückgabe false in meiner Funktion eingerichtet, die es davon abhält, aber die Variable, die ich will, wird nicht über das Formular gesendet. Irgendwelche Ideen, was ich tun sollte, um es zu bekommen? (Es ist in Ordnung, wenn die Seite, solange die updateTable zu aktualisieren() Funktion funktioniert und wird nicht zurückgesetzt von der Seite Reset)

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

Dies ist die updateTable Funktion

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; 
+0

können Sie die folgende jQuery-Plugin verwenden: https://github.com/jinujd/jQuery-Async-Form –

Antwort

22

Sie können‘ t machen dies mit Formen auf die normale Art und Weise. Stattdessen möchten Sie AJAX verwenden.

Eine Beispielfunktion, die die Daten übermittelt und die Seitenantwort alarmiert.

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

+1 für die AJAX mit auf JQuery – Dmitri

+2

^Sehr praktisch für diejenigen von uns, die Seiten auf eingebetteten Systemen machen. – Dmitri

+0

Dies scheint immer noch die Seite für mich neu zu laden. Irgendwer anders? – Jordan

21

können Sie verwenden jQuery-Funktion serialisiert werden zusammen mit get/Post wie folgt:

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

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

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

Einfache AJAX einreichen mit 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. 
}); 
+3

Die Frage ist nicht mit jQuery getaggt, obwohl 'serialize()' ziemlich ordentlich ist. –

+2

Warum der Downvote obwohl? Ich sehe Leute, die ständig jQuery-Antworten posten, auch wenn jQuery nicht getaggt ist ... –

+3

@AhsanShah Es gibt noch andere Frameworks. Vielleicht (und wahrscheinlich) lernt das OP Javascript und möchte wissen, wie es gemacht werden soll. –

0

Ich schätze, das ist was du brauchst. Versuche dies .

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

und Ihren JavaScript-Code ist der gleiche

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; 
} 
+2

Wie sieht es aus, wenn Sie 100 Radiobuttons beim Fliegen bekommen haben? –

-2

ich es geschafft habe, eine andere Art und Weise zu dem, was ich zu tun ... fehlte gab mir das Ergebnis, das ich brauchte. Ich entschied mich, das Formular nicht abzuschicken, sondern einfach den Wert des Textfelds zu erhalten und es im Javascript zu verwenden und dann das Textfeld zurückzusetzen. Tut mir leid, wenn ich jemanden mit dieser Frage belästigt habe.

Grundsätzlich habe gerade dies:

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