/    Sign up×
Community /Pin to ProfileBookmark

Dynamic HTML Control Modification – multiple instances on one page?

I’ve been playing around with the code offered here:

[URL=”http://javascript.internet.com/forms/adding-html-controls.html?start_comment=10″]http://javascript.internet.com/forms/adding-html-controls.html?start_comment=10[/URL]

Right now I have 10 rows that are static, and each row has an “add/delete” button to add more text fields WITHIN the row.

The problem is this:

[LIST]

  • [*]

    Row 1: Add text field


  • [*]

    Row 2: Add text field (it now adds TWO text fields)


  • [*]

    Row 3: Add text field (it adds THREE)


  • [*]

    Delete functions in a similar manner


  • [/LIST]

    Online sample here: [URL=”http://music.manentia.com/”]test[/URL]

    So, it’s putting the extra text fields where I want them, but I can’t separate out each row and have the code treat them separately.

    Here’s the JS code. Of course, thank you to anyone that can help!

    [CODE]// JScript File
    var arrInput = new Array(0);
    var arrInputValue = new Array(0);
    var number; //ADDED, this is passed from the add/delete function to specify rows

    function addInput(i) {
    number = i
    arrInput.push(arrInput.length);
    arrInputValue.push(“”);
    display();
    }

    function deleteInput(i) {
    number = i
    if (arrInput.length > 0) {
    arrInput.pop();
    arrInputValue.pop();
    }
    display();
    }

    function display() {
    document.getElementById(‘parah’+number).innerHTML=””;
    for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById(‘parah’+number).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
    }
    }

    function saveValue(intId,strValue) {
    arrInputValue[intId]=strValue;
    }

    function createInput(id,value) {
    return id+2 + “. <input type=’text’ id=’name” + number + “-“+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value='”+ value +”‘ size=’40’><br>”;
    }[/CODE]

    to post a comment
    JavaScript

    18 Comments(s)

    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — You're going to find another problem when you get a little further in your testing. The reason is because your [B]createInput()[/B] function is creating an HTML string with an inline event coded in it . That inline event will not execute when added to the document via the [B]innerHTML[/B] property-- at least, that has been my experience. I'm working on a new script for you to solve both the problem you've found and the problem I've just pointed out.
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — OK, you had six of these:
    [code=html]<div id="parah1">
    </div>[/code]

    I changed all those to this (increment as needed) because I wanted the container to be completely empty (no text nodes):
    [code=html]<div id="parah1"></div>[/code]
    And, you had six of these:
    [code=html]<a href="javascript:addInput('1')" style="text-decoration: none;" title="Add Student">
    +</a>&nbsp;&nbsp;<a href="javascript:deleteInput('1')" style="text-decoration: none;"
    title="Remove Student">-</a>[/code]

    I changed all those to this (increment as needed):
    [code=html]<a href="#" onclick="return addCustomControl('parah1', 1)" style="text-decoration: none;" title="Add Student"> + </a>
    &nbsp;&nbsp;
    <a href="#" onclick="return delCustomControl('parah1')" style="text-decoration: none;" title="Remove Student"> - </a>[/code]

    Finally, this is the JavaScript which you can customize to suit your exact needs:
    [CODE]function CustomControl(props)
    {
    var obj = document.createElement("INPUT");
    obj.type = "text";
    // you can change the above, but don't change the following
    for (prop in props) { obj[prop] = props[prop]; }
    return obj;
    }
    function addCustomControl(id, i)
    {
    if (typeof id != 'string') var container = id;
    else var container = document.getElementById(id);
    if (!container.CustomControls) container.CustomControls = 0;
    if (container.childNodes.length > 0) container.innerHTML += "<br />";
    //
    var myname = 'name'+i+'-'+(container.CustomControls+2); // customize
    var myid = 'name'+i+'-'+(container.CustomControls+2); // customize
    container.appendChild(CustomControl({name:myname, id:myid, size:30})); // customize
    //
    container.CustomControls += 1;
    return false;
    }
    function delCustomControl(id)
    {
    if (typeof id != 'string') var container = id;
    else var container = document.getElementById(id);
    if (!container.CustomControls || container.CustomControls==0) return false;
    container.removeChild(container.childNodes[container.childNodes.length-1]);
    if (container.childNodes.length > 0)
    container.removeChild(container.childNodes[container.childNodes.length-1]);
    container.CustomControls -= 1;
    return false;
    }[/CODE]

    Though not shown, it also supports event handlers. Basically, the way this works is that you pass all the desired custom control properties in your call to the constructor function -- which is called [B]CustomControl()[/B]. The example used in this code is as follows:
    [CODE]CustomControl({name:myname, id:myid, size:30})[/CODE]
    To add an anonymous event handler (similar to an in-line HTML event attribute) to call your function, you could do this:
    [CODE]CustomControl({name:myname, id:myid, size:30, onchange:function() { return myfunction(this) }})[/CODE]
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — MrNobody -

    Absolutely amazing. Thank you for your charity, honesty, and thoughtfulness. I've learned a lot from you in the past simply by reading your other posts, and now you're more amazing than ever.

    Your code works.


    Sincerely,

    manentia ?
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — I hate reopening this, but can the code you provided also spit out a number before each new INPUT field? I've tried this but I run into problems when deleting the fields.

    Also, the original code I used was able to preserve the field's value after adding another field (and subtracting). I will continue fiddling with it to try to figure this out! Thanks so much again.

    [CODE]
    function CustomControl(props)
    {
    var obj = document.createElement("INPUT");
    obj.type = "text";
    // you can change the above, but don't change the following
    for (prop in props) { obj[prop] = props[prop]; }
    return obj;
    }
    function addCustomControl(id, i)
    {
    if (typeof id != 'string') var container = id;
    else var container = document.getElementById(id);
    if (!container.CustomControls) container.CustomControls = 0;
    if (container.childNodes.length > 0) container.innerHTML += "<br />";
    //
    var myname = 'name'+i+'-'+(container.CustomControls+2); // customize
    var myid = 'name'+i+'-'+(container.CustomControls+2); // customize
    container.appendChild(document.createTextNode((container.CustomControls+2) + '. ')); //HERE - am I going about this the right way?
    container.appendChild(CustomControl({name:myname, id:myid, size:30})); // customize
    //
    container.CustomControls += 1;
    return false;
    }
    function delCustomControl(id)
    {
    if (typeof id != 'string') var container = id;
    else var container = document.getElementById(id);
    if (!container.CustomControls || container.CustomControls==0) return false;
    container.removeChild(container.childNodes[container.childNodes.length-1]);
    if (container.childNodes.length > 0)
    container.removeChild(container.childNodes[container.childNodes.length-1]);
    container.CustomControls -= 1;
    return false;
    }[/CODE]
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — ... can the code you provided also spit out a number before each new INPUT field?[/QUOTE]
    Yes, similar to the BR tag it inserts (and deletes). Hold on a sec...
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — Here ya go:
    [code=html]<script language="javascript" type="text/javascript">
    function CustomControl(props)
    {
    var obj = document.createElement("INPUT");
    obj.type = "text";
    // you can change the above, but don't change the following
    for (prop in props) { obj[prop] = props[prop]; }
    return obj;
    }
    function addCustomControl(id, i)
    {
    if (typeof id != 'string') var container = id;
    else var container = document.getElementById(id);
    if (!container.CustomControls) container.CustomControls = 0;
    if (container.childNodes.length > 0) container.innerHTML += "<br />";
    //
    var seq = container.CustomControls+2;
    container.innerHTML += "<span>"+seq+". </span>";
    //
    var myname = 'name'+i+'-'+seq; // customize
    var myid = 'name'+i+'-'+seq; // customize
    container.appendChild(CustomControl({name:myname, id:myid, size:30})); // customize
    //
    container.CustomControls += 1;
    return false;
    }
    function delCustomControl(id)
    {
    if (typeof id != 'string') var container = id;
    else var container = document.getElementById(id);
    if (!container.CustomControls || container.CustomControls==0) return false;
    container.removeChild(container.childNodes[container.childNodes.length-1]);
    container.removeChild(container.childNodes[container.childNodes.length-1]);
    if (container.childNodes.length > 0)
    container.removeChild(container.childNodes[container.childNodes.length-1]);
    container.CustomControls -= 1;
    return false;
    }
    </script>[/code]
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — Brilliant! I understand the logic better now and should be able to make further modifications myself. You've put me on the right path.

    I have one final question (that I edited into a post a little farther up). The first block of code I posted here saved the entries in each field while adding and deleting, and now when adding a new field, all other entries are cleared.

    Can you help out with this too? I'm going to continue working on it and I'll post if I can come up with it myself.

    Thanks again man.
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — I understand the need for that using the old code. I don't see a need for that with the new code. The old code removed all fields before re-adding the current field count. That is not done with this new code. So why do you need to save field values?
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — I understand the need for that using the old code. I don't see a need for the with the new code. The old code removed all fields before re-adding the current field count. That is not done with this new code. So why do you need to save field values?[/QUOTE]

    I'm thinking ahead to the users of this form, who I believe will type in everything - say for 5 fields they've added, then realize they added one too many. So if they delete that last empty field, everything else they typed disappears.

    More an inconvenience really, but I'm designing this system to be used by teachers... who I [U]don't[/U] want to inconvenience! ?

    If it isn't possible that's fine, you've been an immense help already!
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — if they delete that last empty field, everything else they typed disappears.[/QUOTE]
    There is no reason for everything else to disappear. You have something else wrong.
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — There is no reason for everything else to disappear. You have something else wrong.[/QUOTE]

    Here is the working demo using the suggestions you've already given:

    http://music.manentia.com/default3.asp
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — I just tested it and lost nothing. Care to explain further?
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — I just tested it and lost nothing. Care to explain further?[/QUOTE]

    Aha! Maybe it's Firefox? In IE you're right, nothing is lost, but I've been developing with Firefox.
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — But I'm testing in Firefox.
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — But I'm testing in Firefox.[/QUOTE]

    :eek: I have no idea. IE works fine on my system, Firefox clears the values of each row when adding or subtracting a field.

    I'll continue testing. Please know that I am extremely grateful for all the help you've provided. Thanks again!!!!! ?
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — What version of FF do you have? I have FF 3.0.5.
    Copy linkTweet thisAlerts:
    @manentiaauthorJan 18.2009 — Same, 3.0.5. PC?
    Copy linkTweet thisAlerts:
    @MrNobodyJan 18.2009 — Yep, Win-XP SP3.
    ×

    Success!

    Help @manentia spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...