0

I'm using this script to create a food & drinks menu, I just found this javascript on a website i don't know much about it but it works really well.

Im going to have a button to input entries for lots of different meal types, for example, Breakfast, Drinks, Dinner, Dessert etc etc.

How can i edit this so the textbox name is breakfast_selection[] or dinner_selection[]?

Also when i click the "Add Option" button, How can i have it so it says "Option 1: Textbox" then when they hit another textbox it says "Option 2: Textbox"

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

1 Answer 1

1

How can i edit this so the textbox name is breakfast_selection[] or dinner_selection[]?

Change

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

to

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

Also when i click the "Add Option" button, How can i have it so it says "Option 1: Textbox" then when they hit another textbox it says "Option 2: Textbox"

Add a variable i to keep track of number of options. See the code below-

Update as per OP comment

Change

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

to

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

Update the script

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

See demo at JSFiddle

3
  • Thanks it is working well, However im going to have many buttons, Like a button for dinner, a button for dessert a button for drinks later on. Once ive added that how can i change the dinner_selection[] based on which button they've pressed?
    – Exoon
    Oct 28, 2013 at 12:24
  • Add a parameter to the add() function, e.g. "form_name". You'd then have the event call the function with the form name you wish to add. E.g. <input ... onclick="add('dinner_selection')"> / function add(form_name) { /*...*/ element.setAttribute("name", form_name+"[]"); /*...*/ }
    – erKURITA
    Oct 28, 2013 at 12:35
  • thanks that works great, Is there a way to have separate options for each of the selections, for example, Breakfast: Option 1, Option 2, then Dinner: Option 1, Option 2. At the moment when i click add breakfast it says option 1, but then when i click add lunch it says option 2. Can i keep the options for each food course, if that makes sense.
    – Exoon
    Oct 28, 2013 at 13:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.