The following code snippet generates the output:
Apple,Orange Sliced,Diced Option1 Option2 Option3 Option4 ,Option1 Option2 Option3 Option4
Desired output:
Apple Sliced Option1 Option2 Option3 Option4
Orange Diced Option1 Option2 Option3 Option4
The function addOptions() creates arrays from a form, and showOptions() replaces elements with the array data.
To achieve the desired output, what changes should be made in the following snippet?
var fruit
var prep
var saladsArr = [];
var salad = {
"theFruit": []
, "thePrep": []
, "theOpt": []
};
// Code omitted for brevity
function resetForms() {
document.getElementById("theTable").reset();
} /* CSS styles omitted for brevity */<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=stylesheet type="text/css" href="temp.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="temp1.js"></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="left">
<form id="theTable"> <b><u>Fruit</u></b>
/* Form fields omitted for brevity */
</form>
</div>
<div id="right">
<div id="finResults"></div>
<center>
<input id="inputButton" type="button" value="Add" onClick="addOrder()" />
<input id="inputButton" type="button" value="test" onClick="test()" />
<input id="inputButton" type="button" value="Show Results" onClick="showOptions(document.getElementById('theTable'))" /> </center>
</div>
</body>
</html>