Dynamic input form...

Hi,

This is not just a simple input form made with javascript. This is the code:

Expand|Select|Wrap|Line Numbers

 
<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>&nbsp;</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>

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

Jan 1 '08 #1

Subscribe Post Reply

2281

The Devil

Couldn't someone help me ?

Jan 2 '08 #2

gits

5,390

Expert Mod 4TB

you cannot have the same id in one page ... id has to be unique ... like the name id says:) ... you can have elements with the same names. having the same id for multiple elements then document.getElementById() will fail ...

kind regards

Jan 2 '08 #3

acoder

16,027

Expert Mod 8TB

IE doesn't like setting event handlers with setAttribute, so you'll have to replace it with the good old elem.onclick = ..., etc.

Jan 2 '08 #4

The Devil

Thanks !
That gave me an idea how to fix the problem ! Thanks a lot !

Best wishes !

Jan 2 '08 #5

acoder

16,027

Expert Mod 8TB

No problem, glad it helped.

Jan 3 '08 #6

by: propizzy | last post by:

Appreciate any help!!! PROBLEM: I have this form that allows the user to dynamically create additional fields (see javascript code bellow). I am trying to retrieve the values entered into these...

PHP

Loop to create an array from a dynamic form.

by: Nick | last post by:

Loop to create an array from a dynamic form. I'm having trouble with an application, and I'll try to explain it as clearly as possible: 1. I have a form with two fields, say Apples and...

ASP / Active Server Pages

get all value of all row of a dynamic html table

by: SAN CAZIANO | last post by:

I have create a dynamic html table by adding some rows where I have to put some value in an input field and now how can I get all value of all row ??? I try this but it doesn' work button...

Javascript

Dynamic Form with a Dynamic Form inside it...

by: pizzy | last post by:

INTRO: I tried to clean it up for easy reading. I hope I didn't make any mistakes. PROBLEM: WOW, this is some crazy sh!t. I can't get my checkbox (see "TAGSELECTED") to print my textboxes (see...

Javascript

ASP: Multiple page forms, with dynamic form elements - HELP!

by: Pat Patterson | last post by:

I'm having serious issues with a page I'm developing. I just need some simple help, and was hoping someone might be able to help me out in here. I have a form, that consists of 3 pages of...

ASP / Active Server Pages

Dynamic Controls on a Multi-Step Form

by: Leo J. Hart IV | last post by:

OK, here's another question for the experts: I am building a multi-step (3 steps actually) form using a panel for each step and hiding/displaying the appropriate panel/panels depending on which...

ASP.NET

Storing dynamic form values in Arrays for display & insert

by: assgar | last post by:

Hi Developemnt on win2003 server. Final server will be linux Apache,Mysql and PHP is being used. I use 2 scripts(form and process). The form displays multiple dynamic rows with chechboxs,...

PHP

Retrieving Dynamic Form Data?????

by: bmallett | last post by:

First off, i would like to thank everyone for any and all help with this. That being said, I am having a problem retrieving/posting my dynamic form data. I have a form that has multiple options...

ASP / Active Server Pages

Creating Dynamic User Friendly Form

by: yomadhu | last post by:

I created a dynamic form in javascript. Am unable to get those values in to php to display. I need all details. If i add 10 rows the i need to display those all values. Can any one help me for that...

PHP

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Dynamic input form...

Similar topics