Hi,
This is not just a simple input form made with javascript. This is the code:
In this code, some of the elements in the function (del(elmnt, InputButton) and etc...) are not used, but they are used in the actual code for different purpose.
The problem is that I need not only 1 input to be inserted, but 2 or 3 inputs with same ID. This code actually works fine in FF, but it the part with the deleting of the inputs doesn't work in IE.
Could somebody give me a hand with this one ? I'll appreciate it very much!
Thanks in advance,
The Devil
This is not just a simple input form made with javascript. This is the code:
Code:
<html><head>
<script language="JavaScript">
var i=0;
function add(inputEvent, inputDur, inputCode, placeEvent, placeDur, placeCode, placeDel, elmnt, inputButton) {
var event = document.getElementById(inputEvent);
var val = document.getElementById(inputDur);
var code = document.getElementById(inputCode);
if (event.value == null || val.value == null || event.value == "" || val.value == "")
{
alert("Please set Event and Duration before clicking Add !");
return;
}
if (document.getElementById(inputCode))
{
if (code.value == null || code.value == "")
{
alert("Please set Event,Duration and Code before clicking Add !");
return;
}
}
/* Define ID of input */
i++
var elem = document.createElement("input");
elem.setAttribute("type", "text");
elem.setAttribute("class", "box");
elem.setAttribute("value", event.value);
elem.setAttribute("id", i);
elem.setAttribute("disabled", "");
elem.setAttribute("style", "width: 100px ! important;padding: 3px 5px;")
var elemh = document.createElement("input");
elemh.setAttribute("type", "hidden");
elemh.setAttribute("value", event.value);
elemh.setAttribute("name", "code");
elemh.setAttribute("id", i);
var elem2 = document.createElement("input");
elem2.setAttribute("type", "text");
elem2.setAttribute("class", "box");
elem2.setAttribute("value", val.value);
elem2.setAttribute("id", i);
elem2.setAttribute("disabled", "");
elem2.setAttribute("style", "width: 100px ! important; padding:3px 5px;")
var elemh2 = document.createElement("input");
elemh2.setAttribute("type", "hidden");
elemh2.setAttribute("value", val.value);
elemh2.setAttribute("name", "value");
elemh2.setAttribute("id", i);
var elem3 = document.createElement("input");
elem3.setAttribute("type", "button");
elem3.setAttribute("value", "Delete");
elem3.setAttribute("id", i);
elem3.setAttribute('onclick', 'del("' + i + '","' + elmnt + '","' + inputButton + '")');
elem3.setAttribute("style", "width: 60px ! important;")
if (inputCode != 'false')
{
var elem4 = document.createElement("input");
elem4.setAttribute("type", "text");
elem4.setAttribute("class", "box");
elem4.setAttribute("value", code.value);
elem4.setAttribute("name", "value");
elem4.setAttribute("id", i);
elem4.setAttribute("disabled", "");
elem4.setAttribute("style", "width: 100px ! important;")
var elemh4 = document.createElement("input");
elemh4.setAttribute("type", "hidden");
elemh4.setAttribute("value", code.value);
elemh4.setAttribute("name", "value");
elemh4.setAttribute("id", i);
}
document.getElementById(placeEvent).appendChild(elem);
document.getElementById(placeEvent).appendChild(elemh);
document.getElementById(placeDur).appendChild(elem2);
document.getElementById(placeDur).appendChild(elemh2);
if (inputCode != 'false')
{
document.getElementById(placeCode).appendChild(elem4);
document.getElementById(placeCode).appendChild(elemh4);
}
document.getElementById(placeDel).appendChild(elem3);
child1 = elem;
childh1 = elemh;
child2 = elem2;
childh2 = elemh2;
child3 = elem3;
document.getElementById(inputEvent).value = "";
document.getElementById(inputDur).value = "";
if (document.getElementById(inputCode))
document.getElementById(inputCode).value = "";
}
function del(id, elmnt, inputButton)
{
while (document.getElementById(id) != null)
{
parentObject = document.getElementById(id).parentNode;
childObject = document.getElementById(id);
parentObject.removeChild(childObject);
}
if(navigator.navigator.userAgent.match(/MSIE/gi))
{
parentObject = document.getElementById(id).parentNode;
childObject = document.getElementById(id);
parentObject.removeChild(childObject);
}
}
</script>
</head>
<body>
<table cellspacing="0" width="260px">
<tr>
<td>Event</td>
<td>Duration</td>
<td> </td>
</tr>
<tr>
<td style="width: 100px !important;">
<input id="event_input" value="" name="event_play" type="text" style="width: 100px !important;">
</td>
<td style="width: 100px !important;">
<input id="duration_input" value="" name="duration_play" type="text" style="width: 100px !important;">
</td>
<td style="width: 60px !important;">
<input value="Add" onclick="add('event_input','duration_input','false','event','duration','false','del','playGame','playGameButton')" type="button" style="width: 60px !important;">
</td>
</tr>
<tr>
<div style="overflow-y: scroll;">
<td id="event">
</td>
<td id="duration">
</td>
<td id="del">
</td>
</div>
</tr>
</table>
</body>
</html>
The problem is that I need not only 1 input to be inserted, but 2 or 3 inputs with same ID. This code actually works fine in FF, but it the part with the deleting of the inputs doesn't work in IE.
Could somebody give me a hand with this one ? I'll appreciate it very much!
Thanks in advance,
The Devil
Comment