如何编辑此动态输入文本区域 javascription

How to edit this dynamically input textarea javascription

本文关键字：输入 动态 文本 区域 javascription 何编辑 编辑      更新时间：2023-09-26

我正在使用这个脚本来创建食物和饮料菜单，我刚刚在一个我不太了解的网站上找到了这个javascript，但它运行得很好。

我将有一个按钮来输入许多不同膳食类型的条目，例如，早餐，饮料，晚餐，甜点等。

如何编辑文本框名称为 breakfast_selection[] 或 dinner_selection[]？

另外，当我单击"添加选项"按钮时，我怎么能让它显示"选项1：文本框"，然后当他们点击另一个文本框时，它说"选项2：文本框"

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<SCRIPT language="javascript">
function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("name", "selection[]");

    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
    foo.appendChild(element);
    var br = document.createElement("br");
    foo.appendChild(br);    
}
</SCRIPT>
</head>
<body>
<form method="POST" action="testforms.php">
<p><b>Add a Menu Set</b></p>
<table border="0" width="100%" cellspacing="5" cellpadding="5">
    <tr>
        <td width="25%">Menu Set Name</td>
        <td width="75%">
            <p><input type="text" name="setname" size="50"></p>
        </td>
    </tr>
    <tr>
        <td width="25%">&nbsp;</td>
        <td width="75%">&nbsp;</td>
    </tr>
    <tr>
        <td width="25%">&nbsp;</td>
        <td width="75%">&nbsp;</td>
    </tr>
    <tr>
        <td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>
    </tr>
    <tr>
        <td width="100%" colspan="2">
        <span id="fooBar"> </span>
        </td>
    </tr>
</table>
</form>
</body>
</html>

如何编辑文本框名称为 breakfast_selection[] 或 dinner_selection[]？

改变 

element.setAttribute("name", "selection[]");

自 

element.setAttribute("name", "breakfast_selection[]");

另外，当我单击"添加选项"按钮时，我怎么能让它显示"选项1：文本框"，然后当他们点击另一个文本框时，它说"选项2：文本框"

添加变量i以跟踪选项数。请参阅下面的代码-

根据OP评论进行更新

改变

<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add(document.forms[0].text)"/></td>

自

<td width="100%" colspan="2"><b>Breakfast <INPUT type="button" value="Add Option" onclick="add('breakfast')"/><br>
Lunch <INPUT type="button" value="Add Option" onclick="add('lunch')"/></td>

更新脚本

<SCRIPT language="javascript">
var i = 1;
function add(orderType) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("name", orderType + "_selection[]");

var foo = document.getElementById("fooBar");
//Append the element in page (in span).
//Create the option text
var a = document.createTextNode("option " + i + ": ");
foo.appendChild(a);
foo.appendChild(element);
var br = document.createElement("br");
foo.appendChild(br);
i++;    
}
</SCRIPT>

在 JSFiddle 上查看演示

相关文章：