jQuery Javascript组合列表

时间:2011-06-16 14:50:14

标签: php jquery html

我正在尝试创建一个表单,其中我可以有一个列表和一个输入框/文本框。我想要的是当用户在文本框中键入一个值并单击添加到列表时,该值应该添加到列表中。然后,当该人按下提交时,PHP代码应该能够使用从列表中获取的值来执行过程。我试图用PHP和HTML来做,但有一些人在JS中提出了jQuery。请帮助您了解您的知识或我如何做到这一点。

如果你不明白,我有一张关于我想做的事情的图表......

enter image description here

<?php
    $Fname = $_POST["Fname"];


    if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
    ?>


    <html>
    <head>
    <title>Personal INFO</title>


    <style type="text/css">
      body {
      background-image: url("http://dev.icalapp.rogersdigitalmedia.com.rogers-test.com/rogers_blackberry_8900.jpg");
      background-position: 50% 50%;
      background-repeat: repeat;
    }
    </style>



    </head>




    <body>
    <form method="post" action="<?php echo $PHP_SELF;?>">



    <span style="font-family:Helvetica;font-size:22px;font-style:normal;font-weight:bold;text-decoration:underline;text-transform:capitalize;color:FFFFFF;background-color:990033;">Amount of Numbers</span> <input type="text" style="text-align:center" size="12" maxlength="50" name="Fname" ><br />


    <input type="submit" value="submit" name="submit">
    </form>
    <?
    } 

    ?>

2 个答案:

答案 0 :(得分:3)

使用jquery,你可以像这样快速解决: http://jsfiddle.net/7qTWd/1/

$("document").ready(function(){

    $("span.add").click(function(){
        $("textarea").val( $("textarea").val()+"\n"+$("input").val());
    });
});

<input default="put text"/>
<span class="add">addText</span>
<textarea></textarea>

答案 1 :(得分:2)

尝试这样的事情:

JS:

$('#add').click(function(){

    var input = $('#addInput');
    var display = $('#display');
    var form = $('#addForm');

    if($.trim(input.val()).length > 0){ //is there input?
        display.append($('<p>',{text: input.val()}));
        form.append($('<input>',{value: input.val(), type: 'hidden', name: 'added[]'}));
        input.val('');
    }

})

HTML:

<input id="addInput"/> <button id="add">Add</button>

<div id='display'></div>

<form action="something.php" id="addForm">
    <input type="submit" value="SUBMIT"/>
</form>

然后,您添加的所有内容都应位于名为$_POST['added']

的数组中

DEMO:http://jsfiddle.net/maniator/aksEw/