2009-08-14 22 views
5

Ich bin nicht viel von einem Webprogrammierer, aber ich erstelle eine einfache Webanwendung, die eine Form hat, wo der Benutzer eine Reihe von Punkten eingeben kann (x, y, z), aber ich weiß nicht, wie viele Benutzer wird eintreten. Ich möchte nicht das mögliche Maximum erraten (100 vielleicht?) Und 100 Felder auf das Formular setzen, weil es hässlich aussehen würde. Was ist die einfachste Möglichkeit, weitere Felder hinzuzufügen (oder Felder sichtbar zu machen), wenn der Benutzer Daten eingibt, ohne den Server zu kontaktieren?Wie kann ich dynamisch Eingabefelder zu einem Formular hinzufügen?

Momentan benutze ich nur html & php, aber ich nehme an, ich brauche Javascript?

Derzeit sieht mein Code wie folgt aus, da der Benutzer Daten eingibt, möchte ich eine andere Zeile angezeigt.

<form action="edit.php" method="post"> 
    <table border=1> 
    <tr> 
     <td> 
     <td>X 
     <td>Y 
     <td>Z 
    </tr> 
    <tr> 
     <td>1</td> 
     <td><input type=text name=x1 size=10 value="0.4318"></td> 
     <td><input type=text name=y1 size=10 value="0.0000"></td> 
     <td><input type=text name=z1 size=10 value="0.1842"></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td><input type=text name=x2 size=10 value="0.4318"></td> 
     <td><input type=text name=y2 size=10 value="0.0000"></td> 
     <td><input type=text name=z2 size=10 value="-0.1842"></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td><input type=text name=x3 size=10 value="-0.3556"></td> 
     <td><input type=text name=y3 size=10 value="0.0000"></td> 
     <td><input type=text name=z3 size=10 value="0.1636"></td> 
    </tr> 
    ... I want more to appear here... 
    </table> 
    <button name="submit" value="submit" type="submit">Save</button> 
</form> 

Irgendeine Idee der einfachste Weg? Danke ...

Antwort

7

Ich würde verwenden jQuery und append die neuen Eingänge: Verwendung als Referenz Sie können dies verwenden oder eigene schreiben.

+0

Es funktioniert super, danke. –

0

Was Sie sagen, dass Sie die Eingabe-Tags Hand schreiben? Oder möchten Sie eine dynamische Aktion, bei der ein Benutzer auf eine Schaltfläche klickt und weitere Tabellenzeilen hinzufügt?

In jedem Fall, für Ihren Code, brauchen Sie nur eine Schleife, so. Ich gehe davon aus $ Daten alle Daten, die Sie auf einem Array basierten setzen wollen, die wahrscheinlich aus der Datenbank oder etwas ist:

<?php 
for($i=0, $iMaxSize=count($data); $i<$iMaxSize; $i++) 
{ 
?> 
<tr> 
    <td><?= $i+1 ?></td> 
    <td><input type=text name=x1 size=10 value="<?=$data[$i]['something']"></td> 
    <td><input type=text name=y1 size=10 value="<?=$data[$i]['somethingelse']"></td> 
    <td><input type=text name=z1 size=10 value="<?=$data[$i]['somethingelseagain']"></td> 
</tr> 
<?php 
} // end for 
?> 

Natürlich können Sie nicht und vorbei an dem oben kopieren können, aber das ist ein guter Ausgangspunkt.

Um es dynamisch zu tun, können Sie nicht PHP verwenden. Was es klingt wie Sie wollen, ist Javascript Ajax und PHP-Kombination.

+0

Ich möchte es auf dynamische Art und Weise tun. –

1

Ich habe etwas ähnliches erstellt und ich denke, es würde Ihnen helfen. Ich habe jQuery verwendet, um Eingabefelder dynamisch zu erstellen. Bitte überprüfen Sie diesen Link: Dynamically add form fields

0

Fügt einige HTML zu allen Absätzen.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    p { background:yellow; } 
</style> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
    <p>I would like to say: </p> 
<script> 
    $("p").append("<strong>Hello</`enter code here`strong>"); 
</script> 

</body> 
</html> 
Verwandte Themen