添加文本框或其他方式


Adding textboxes or other ways

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

在网上看到了很多例子,到目前为止我看到的最好的例子是 supercook.com

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

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

网页代码

<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>

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