Ajax function aus einer foreach schleife aufrufen und ID übergeben


MathiasP

Grünschnabel
Heyho,

vielleicht könnt ihr mir helfen. Ich habe folgendes Problem:

Ich habe mehrere forms, welche aus einer Datenbank generiert werden. Nun möchte ich, nach absenden der Form eine Ajax function aufrufen.
Aktuell ist der stand, dass nur die erste generierte Form übergeben wird (werden kann), da keine ID übergeben wird. Da ich nicht wirklich weiter weiss bitte ich um Hilfe.

Hier mal mein Code:

Meine Form:
Code:
foreach ($data AS $key => $value){
    <form name="myForm">
    <input type="text" id="bla" name="bla" value="<?php echo $value['bla']; ?>">
    <input type="button" onclick="ajaxFunction()" value="Speichern">
    </form>
}

und hier die Ajax Funktion:
Code:
function ajaxFunction(){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.
 var bla = document.getElementById('bla').value;
 var queryString = "?bla=" + bla;
 ajaxRequest.open("GET", "ajax-example.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}

in der ajax-example.php lasse ich mir einfach $_GET zurück geben..

Wie müsste ich das umändern, dass bei Klick auf speichern der verschiedenen generierten Forms auch nur die gewählten IDs der Form angesprochen werden?

Ich hoffe, dass das Problem verständlich beschrieben wurde.

Grüße Mathias
 

Quaese

Moderator
Moderator
Hi,

du kannst der Funktion ajaxFunction den auslösenden Button als Parameter übergeben. Von diesem aus kannst du dich zum zugehörigen Eingabefeld navigieren.

Beispiel:
Code:
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<script type="text/javascript">
  <!--
function ajaxFunction(source){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
       // Opera 8.0+, Firefox, Safari
       ajaxRequest = new XMLHttpRequest();
    }catch (e){
       // Internet Explorer Browsers
       try{
          ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
       }catch (e) {
          try{
             ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
          }catch (e){
             // Something went wrong
             alert("Your browser broke!");
             return false;
          }
       }
     }

     // Create a function that will receive data
     // sent from the server and will update
     // div section in the same page.
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }

    // Now get the value from user and pass it to
    // server script.
    var bla = source.form.elements['bla'].value;
    var queryString = "?bla=" + bla;
    ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
    ajaxRequest.send(null);
}
 //-->
</script>
</head>
<body>
    <div id="ajaxDiv"></div>
    <form name="myForm">
        <input type="text" id="bla" name="bla" value="eins">
        <input type="button" onclick="ajaxFunction(this)" value="Speichern">
    </form>
    <form name="myForm">
        <input type="text" id="bla" name="bla" value="zwei">
        <input type="button" onclick="ajaxFunction(this)" value="Speichern">
    </form>
    <form name="myForm">
        <input type="text" id="bla" name="bla" value="drei">
        <input type="button" onclick="ajaxFunction(this)" value="Speichern">
    </form>
</body>
</html>
Ciao
Quaese
 

MathiasP

Grünschnabel
Hey Quaese,

genial genau das habe ich gesucht.. ich hatte es soweit, dass ich ajaxFunction() eine ID übergeben hatte -> ajaxFunction(id) und dann in den Forms z.B. onclick="ajaxFunction(<?php echo $value['id']; ?>)" aber dann war da noch das Problem mit den Input feldern.. da wusste ich nicht wie ich die von den einzelnen Forms übergeben kann..

So klappts aber super.

Vielen Dank.
 

Neue Beiträge