添加文本框或其他方式

时间:2013-09-19 08:46:53

标签: javascript php jquery html

我正在制作食谱搜索应用程序。我提供了一个功能,用户可以通过添加哪些食谱应包含我可能拥有或不拥有的某些成分来缩小搜索范围。

我在网上看过很多例子,目前为止看到的最好的例子被supercook.com使用

虽然这需要jquery(毫无疑问)我还没有知道jquery所以文本框会很好,但问题是用户有不同数量的成分,我将添加默认的5个文本框,如果用户有7,他/她应该只需点击一个添加功能,它会自动添加另外两个文本框。这可能需要也可能不需要jquery,我热衷于学习它...我需要建议并帮助解决最简单/最好的方法。

1 个答案:

答案 0 :(得分:0)

请参阅下面的代码,它将添加文本框。如果您只需要它,那么它可能对您有帮助。

html代码

<form method="post" action="">
    <div id="addTextBox">
        <input type="text" name="text1" id="text1" /><br />
    </div>
    <input type="hidden" value="1" name="hidText" id="hidText" />
</form>
<a href="javascript:void(0);" style="text-decoration: none;" id="add_more_txtbox">Add More</a>

javascript代码

<script type="text/javascript"    src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#add_more_txtbox").click(function(){
        var hidden_value=parseInt($("#hidText").val())+1;
        $("#hidText").val(hidden_value);
        var add_str='<input type="text" name="text'+hidden_value+'" id="text'+hidden_value+'" /><br />';
        $("#addTextBox").append(add_str);
    });
});
</script>

如果您需要任何进一步的帮助,请告诉我。