Question

我正在使用这个脚本创建一个食物＆amp;饮料菜单，我刚刚在一个网站上发现这个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>

Answer 1

如何编辑，以便文本框名称为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>

更新脚本</ p>

<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

上的演示

如何编辑这个动态输入textarea javascript

1 个答案: