✔ JQuery und onsubmit funktioniert nicht

[schoko]

Hey,

ich habe eine kleine Seite in der ich die JQuery geladen habe.

Beim abschicken des Formulars möchte ich eine PHP Datei ausführen und die dort generierten Daten in einem DIV ausgeben lassen.
Das ganze habe ich zurzeit folgendermaßen realisiert:

    <script type="text/javascript" src="inc/jquery.js"></script>       
    <script language="JavaScript">      
       
    function add() {
       $.ajax({ 
          type: "GET", 
          url: "ajaxWork.php", 
          data: "city1=John&city2=Boston", 
          success: function(msg){ 
                      $('#contentLeft').html(msg); 
                    } 
        });
        
    }
    </script>

Das oben ist mein JS-Teil im HEAD-Bereich wobei hier die ajaxWork.php meine PHP-Datei ist welche eine Ausgabe zurückgibt. #contentLeft ist das DIV in dem die Daten erscheinen soll.

Das ganze ruf ich folgendermaßen auf:

<form action="" name="form1" onsubmit="add();">

Nun mein Problem... es funktioniert nicht!
Es funktioniert NUR wenn die Funktion noch zusätzlich ein alert("test"); enthält, dann sehe ich auch, dass die Daten in das DIV geladen werden.

Was mache ich falsch? Oder warum klappt es nur mit zusätzlichem alert() Aufruf in der Funktion?

Danke für die Hilfe

schoko

 

[Quaese]

Hi,

wenn du die Ajax-Routine im onsubmit-Event aufrufst, wird sie zwar ausgeführt, aber das Ergebnis ist nicht zu sehen, weil das Formular abgesendet und das Dokument neu geladen wird.

Zwei Möglichkeiten - entweder zu verhinderst das Senden, indem du im onsubmit-Event false zurück lieferst

<form action="" name="form1" onsubmit="add(); return false;">

oder du sendest das Formular an ein neues Fenster, indem du ein Ziel (target) angibst.

<form target="_blank" action="" name="form1" onsubmit="add();">

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[schoko]

Perfekt, der Vorschlag mit dem "false" hat geklappt.

Nun habe ich aber noch eine andere Frage und zwar wie bekomme ich hier:

data: "city1=John&city2=Boston",

die Eingaben aus den Input Feldern rein?

Ich habe versucht eine bzw. zwei Variablen mit document.getElementById(id der felder) zu belegen, hat aber leider nicht geklappt. Dann ladet er die Seite wieder neu und ich seh in meinem DIV nix mehr.

Wie bekomme ich nun die Eingaben in die AJAX-Funktion?

Danke

 

[Quaese]

Hi,

wenn die beiden Felder die IDs city1 und city2 haben,

<input type="text" id="city1" name="city1" value="John">
<input type="text" id="city2" name="city2" value="Boston">

sollte es wie nachstehend funktionieren.

function add() {
  $.ajax({
    type: "GET",
    url: "ajaxWork.php",
    data: "city1="+document.getElementById("city1").value+"&city2="+document.getElementById("city2").value,
    success: function(msg){
      $('#contentLeft').html(msg);
    }
  });
}

Ciao
Quaese