kostenloser Webspace werbefrei: lima-city


Formular ohne Pagerefresh senden

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    everaffle

    everaffle hat kostenlosen Webspace.

    Hallo,
    ich habe folgendes Problem: Ich würde gerne den tag/inhalt">Inhalt eines Formulars mittels Ajax so abeschicken, dass ich keinen page-refresh bekomme. Da ich von dem unten stehenden Bsp. quasi n - verschiedene Formulare mit jeweils unterschiedlichen id's habe stehe ich ein bisschen aufm schlauch, denn alle Lösungen die ich gefunden habe implementieren eine Funktion die irgendwie nur für ein Formular läuft.

    Ich benutze übrigens das prototype.js Framework mit dem das angeblich einfacher geht.

    <form method="post" action="" enctype="multipart/form-data" name="place_bids{$data[rows].id}">
                        <input type="hidden" name="value" id="value{$data[rows].id}" />
                        <input type="text" name="place_bid" value="{$data[rows].id}" />
                        <input type="submit" value="Order" />
    </form>


    Ich bedanke mich jetzt schonmal für die Hilfe.
    mfg
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. h***e

    Du musst ajax benutzen.
    http://www.w3schools.com/ajax/default.asp

    Beitrag zuletzt geändert: 12.6.2013 22:02:11 von hpage
  4. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Was hindert dich daran eine allgemeine Funktion zu schreiben, die ein Formular auswertet, solange du ihr die ID des Formulars gibst? Natürlich funktioniert das nur wenn alle Formulare gleich aufgebaut sind und sich nur durch die ID unterscheiden. Die Funktion würdest du beim Formular (
    <form>
    -Tag) als
    onsubmit
    -Handler angeben und wenn dieser Handler
    false
    zurückgibt wird das Formular nicht abgeschickt. Das kannst du nutzen, wenn du bereits mit deiner Funktion die Daten verarbeitest / abschickst.
  5. Autor dieses Themas

    everaffle

    everaffle hat kostenlosen Webspace.

    Was hindert dich daran eine allgemeine Funktion zu schreiben, die ein Formular auswertet, solange du ihr die ID des Formulars gibst? Natürlich funktioniert das nur wenn alle Formulare gleich aufgebaut sind und sich nur durch die ID unterscheiden. Die Funktion würdest du beim Formular (<form>-Tag) als onsubmit-Handler angeben und wenn dieser Handler false zurückgibt wird das Formular nicht abgeschickt. Das kannst du nutzen, wenn du bereits mit deiner Funktion die Daten verarbeitest / abschickst.


    Ja genau so ist es aufgebaut.
    also musste ich

    <form method="post" action="" onsubmit="submitfunction({$data[rows].id})" enctype="multipart/form-data" name="place_bids{$data[rows].id}">


    und im verlauf der Seite dann irgendwo ne
    <script>
    function submitfunction(id){
    ...
    }
    </script>


    machen?

    Danke ich probier das schonmal aus.
  6. hpage schrieb:
    Du musst ajax benutzen.

    Lerne doch endlich mal lesen, bevor Du deinen Senf in einem Thread verteilst!

    Wie heißt es im Startbeitrag des Themas so schön?

    Ich würde gerne den Inhalt eines Formulars mittels Ajax so abschicken,


    Deine Antwort ist, wie üblich, an Innovation und Informationsgehalt kaum zu übertreffen. :wall:

    hackyourlife hat die sinnvolle Lösung für das Problem bereits genannt, so daß leider @topic nichts wesentliches zu schreiben ist.

    @mods: wenn dieser Kommentar, gemeinsam mit hpages Beitrag, ins Nirvana geschickt wird, kann ich das durchaus verstehen.*g*
  7. als ansatz:

    jQuery ajax format

    http://jsfiddle.net/Kd37e/

    vergleich Prototype ajax Format

    http://webdesign.torn.be/tutorials/javascript/prototype/forms-with-prototype/

    ich würde es aber nicht mischen (jQuery & Prototype)
    da "$" für beide der gleiche Alias ist, und dieses zu massiven Problemen führen kann
    du kannst aber einen anderen Alias setzen was dies behebt


    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
     
    var $j = jQuery.noConflict();
    // $j ist nun der alias für jQuery 
     
    $j(document).ready(function() {
        $j( "div" ).hide();
    });



    Ich würde mich aber eher auf jQuery stützen da die Community dort wesentlich größer ist als bei Prototype

    Beitrag zuletzt geändert: 13.6.2013 8:12:38 von n0tiert
  8. Hallo,

    die wesentlichen Punkte wurden hier schon genannt, damit du dir bei deiner Entwicklung aber nicht selbst auf den Füßen stehst solltest du dir überlegen, wie du die Funktion am besten aufrufst.

    Hierbei solltest du am besten den kompletten Aufruf über JS regeln, um dir zu zeigen, wie du das mit Prototype am besten regelst ist hier ein Beispiel, das auf deine Ausgangsstellung eingeht. Das einzige Problem ist, dass ich nicht genau weiß, wie welches deine ID ist, ist das die ID aus dem hidden-field?
    Wenn ja, dann passt diese Lösung.
    var doAjaxSubmit = function(form,id,params){
      form = $(this);
      id = $(form.select('input[type="hidden"]')[0]).readAttribute('id');
      params = {};
      form.select('input')).each(function(input){
        var name = input.readAttribute('name');
        if(!!name)
          params[name] = input.readAttribute('value');
      };
      new Ajax.Request(form.readAttribute('action'), {
        method:form.readAttribute('method'),
        parameters: params,
        onSuccess: function(response){
          alert('Request erfolgreich und wurde wie folgt beantwortet:\n'
                   + transport.responseText);
        }
      });
      return false;
    }
    $$('form').each(function(form){
      form.observe('submit', doAjaxSubmit);
    });


    Ich habe die Funktion jetzt nicht gestest, aber das Grundgerüst sollte damit ja gegeben sein und Fehler entsprechend leicht zu finden sein.

    Mit freundlichen Grüßen
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!