php - Ajax / input felter - Udvikleren.dk - Programmering, webdesign og grafik

Tags: ajax php

Bruger #5395 @ 23.06.14 13:15

Hejsa, jeg er i gang med at lave en formular

hvor jeg ønsker at have en knap til at tilføje flere input felter til en form...

dvs.

"klik her for at tilføje flere varer"

jeg har brugt følgende kode fra w3schools

JScript kode

 function showUser(str) {
     
   if (str=="") {
     document.getElementById("txtHint").innerHTML="";
     return;
   } 
  
   if (window.XMLHttpRequest) {
     // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
   } else { // code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
       
     }
   }
   xmlhttp.open("GET","info_ajax.php?antal="+str,true);
   xmlhttp.send();
 
  
 }

resultat vises så i

HTML kode

 <div id="txtHint"></div>

indhold i info_ajax.php

PHP kode

 <table id="vareinfo">
 <body onload="showUser(1)">    
 <form>
             <tr><th>Fakturanummer</th><th>Varenummer</th><th>Antal</th><th>Fejlbeskrivelse</th></tr>
             
             <?php while($x < $new){
             
                 echo '
                     <tr>
                 <td><input type="text" name="Fakturanummer[]" value="" id="fakturanummer"></td>
                 <td><input type="text" name="Varenummer[]" id="varenummer"></td>
                 <td><input type="text" name="Antal[]" id="antal"></td>
         
                 <td><textarea name="Fejlbeskrivelse" id="fejlbeskrivelse"></textarea></td>
                 
             </tr>';
             $x++;    
             }
             ?>
             
             
             
         </table>
 <table><tr><td><input type='button' value='Tilføj vare'  onclick="showUser('<?php echo $knap;?>')" style="float: right;margin-right: 20px;"></td></tr></table></body>

det funker også helt fint, problemet er bare at værdien af input felterne mistes, hvis der trykkes på knappen (da værdien ikke bliver postet, før Formen endeligt sendes igennem...

jeg har søgt rundt for at finde ud af hvordan det skulle løses, men uden held...

jeg ønsker blot at inputfelterne bevarer deres værdi når siden loades igen med anden getværdi...

antal=1
en række af input felter
antal=2
2 rækker af input felter

osv...

alternativt så skal jeg gå væk fra ajax og bare lave alm. submit og reloade siden helt... men tænkte det kunne være sjovt at prøve ajax en smule..

3 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 8 karma

Sorter efter stemmer Sorter efter dato

Bruger #8782 @ 27.06.14 11:24

Du er halvvejs i mål! Der er nogle små ting jeg ville ændre, først og fremmest så bruger du en <div> som du opdaterer hele indholdet i - dette er umiddelbart ikke det du vil.

Main side (tabel)

HTML kode

 <body onload="javascript:indsaetRaekke()">    
 <form>
 <table id="varer">
 <thead>
 <tr>
 <th>Fakturanummer</th>
 <th>Varenummer</th>
 <th>Antal</th>
 <th>Fejlbeskrivelse</th>
 </tr>
 </thead>
 <tbody>
 <!-- Dine rækker kommer her -->
 </tbody>
 </table>
 </form>
 <button onclick="javascript:indsaetRaekke()">Indsæt vare</button>

vare_raekke.php

HTML kode

 <tr>
                  <td><input type="text" name="Fakturanummer[]" value="" /></td>
                  <td><input type="text" name="Varenummer[]" /></td>
                  <td><input type="text" name="Antal[]" /></td>
          
                  <td><textarea name="Fejlbeskrivelse[]"></textarea></td>
              </tr>

Javascript (jQuery)

JScript kode

 function indsaetRaekke(){
 $.get( "vare_raekke.php", function( data ) {
   $( "#varer tbody" ).append( data ); // Indsætter data i tbody
   console.log("Ny række indsat" );
 });
 }

EDIT: har tilføjet en knap efter tabellen

Indlæg senest redigeret d. 28.06.2014 11:21 af Bruger #8782

Bruger #16075 @ 27.06.14 16:31

1.223

hvad er det der står serverside du gerne vil have med over ??
umildbart vil jeg mene det skal laves med rent JS/Jquery
eks

Kode

<!DOCTYPE html>
<html>
<head>
<title>test</title>   
   <meta charset="utf-8">
      <script type="text/javascript">
         function AddRow() {
            var table = document.getElementById("vareinfo");
            var row;
            var cell;
            row = table.insertRow(table.rows.length);
            cell = row.insertCell(0);
            cell.innerHTML = '<input type="text" name="Fakturanummer[]" value="" >';            
            cell = row.insertCell(1);
            cell.innerHTML = '<input type="text" name="Varenummer[]" >';            
            cell = row.insertCell(2);
            cell.innerHTML = '<input type="text" name="Antal[]" >';            
            cell = row.insertCell(3);
            cell.innerHTML = '<textarea name="Fejlbeskrivelse" rows="3" cols="5"></textarea>';
         }
      </script>

   </head>

   <body onload="AddRow()">
      <form action="#" method="post">
      <table id="vareinfo">
         <tr><th>Fakturanummer</th><th>Varenummer</th><th>Antal</th><th>Fejlbeskrivelse</th></tr>
      </table>
      <table><tr><td>
               <input type='button' value='Tilføj vare' onclick="AddRow()" >
            <input type='submit' value='send' >
            </td></tr></table>
      </form>
      </body>
</html>

prøv at skimme simons guide igennem
http://www.udvikleren.dk/artikler/374/dynamisk-indhold-med-ajax-og-php/

at overfører HTML formateret code fra serveren har aldrig været meningen med AJAX, (det virker ja, men serveren arbejder hurtigere uden at skulle spille tid på det) men kun overfører de rå data i XML format (nu ved at blive udkonkurreret af JSON)

AJAX er ca 75% js, så det skal du have styt på først.

Bruger #5395 @ 01.07.14 14:45

Hej Ronny, tak for det, det funker som ønsket ;-)

Indlæg senest redigeret d. 01.07.2014 14:47 af Bruger #5395

Ajax / input felter

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler