Dynamiskt tillagda input-fält

PHPportalen Forum Index » Tips och Trix
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
bubach



Medlem i: 5897 dagar
Från: Lilla Edet (söder om Trollhättan)
Status: Offline



#717351
Inlägg Skrivet: 2011-12-01 15:44      Ämne: Dynamiskt tillagda input-fält Citera

Hej, hittade denna kodsnutt som jag gjorde åt en kompis för att demonstrera hur man dynamiskt kan lägga till fler fält till ett formulär och hur man sedan på serversidan hanterar dessa eftersom antalet är okänt.

Tänkte att jag slänger upp den här också ifall någon söker på hur man gör detta. Exemplet använder sig av jQuery för javascript biten, men det går naturligtvis i ren javascript eller med ett annat lib också.

PHP:
1:
<html>
2:
<body>
3:
<title>test</title>
4:
 
5:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
6:
 
7:
<script type="text/javascript">
8:
    $(document).ready(function(){
9:
        $("#addField").click( function() {
10:
            $("#variantFields").append('<label>Name <input type="text" name="variant_name[]" /> Price <input type="text" name="variant_price[]" /></label><br/>');
11:
        });
12:
    });
13:
</script>
14:
 
15:
</head>
16:
<body>
17:
 
18:
    <form method="get" action="" id="nameForm">
19:
       <p>Other form elements for adding product</p>
20:
        <div id="variantFields">
21:
            <h2>Variant names and prices (like family-size, 15)</h2>
22:
            <label>Name <input type="text" name="variant_name[]" /> Price <input type="text" name="variant_price[]" /></label><br/>
23:
 
24:
        </div>
25:
        <a href="#" onclick="return false;" id="addField">+ Add New Field</a><br /><br />
26:
        <input type="submit" value="submit" name="s" />
27:
    </form>
28:
 
29:
 
30:
    <br /><br />
31:
    <?php
32:
      foreach ($_GET['variant_name'] as $key=>$value)
33:
      {
34:
          print " name: ".$value;
35:
          print " - ";
36:
          print " price: ".$_GET['variant_price'][$key];
37:
          print "<br />\n\n";
38:
      }
39:
    ?>
40:
 
41:
</body>
42:
</html>
 

_________________
http://bos.asmhackers.net - http://förklara.se
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
Figgy



Medlem i: 4802 dagar

Status: Offline



#717353
Inlägg Skrivet: 2011-12-01 16:38      Ämne: Citera

För att hålla det lite mer dynamiskt kan du även göra på detta viset, om textfält osv. inte ska behöva defineras i JS:

KOD:
1:
$.fn.newRow = function (){
2:
    $(this).clone(true).insertAfter($(this));
3:
}
4:
 
5:
$("div.row:last").newRow();
6:
 
7:
<div class="row">
8:
    <p>
9:
         <label for="name[]">Namn</label><br />
10:
         <input type="text" name="name[]" />
11:
    </p>
12:
    <p>
13:
         <label for="price[]">Pris</label><br />
14:
         <input type="text" name="price[]" />
15:
    </p>
16:
</div>
 

_________________
Vebut.se
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget
PHPportalen Forum Index » Tips och Trix
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic