Dynamically Created Fields with Firefox

Discussion in 'Javascript' started by ogdenmd, Apr 5, 2006.

  1. ogdenmd

    ogdenmd Guest

    I want to give the user the abillity to add extra fields as needed.
    I've got it working in IE (surprsingly this works in IE but not in
    Firefox), however, basically I have an input field for a paragraph. If
    the user decides they want two paragraps then they can click an image
    and a new textarea field is show that allows them to add another
    paragraph. The fields are named as an array for example name="para[0]"
    the next one would then be name="para[1]". Firefox creates the field
    and shows it to the user however when you submit the form the new field
    does not come through. My array of paragraphs consists only of the
    original number I started with. Any added by the javascript are lost.
    Again IE this works fine, Firefox it works till you submit the form.
    Any ideas?
     
    ogdenmd, Apr 5, 2006
    #1
    1. Advertising

  2. ogdenmd

    RobG Guest

    ogdenmd said on 05/04/2006 9:38 AM AEST:
    > I want to give the user the abillity to add extra fields as needed.
    > I've got it working in IE (surprsingly this works in IE but not in
    > Firefox), however, basically I have an input field for a paragraph. If
    > the user decides they want two paragraps then they can click an image
    > and a new textarea field is show that allows them to add another
    > paragraph. The fields are named as an array for example name="para[0]"
    > the next one would then be name="para[1]". Firefox creates the field
    > and shows it to the user however when you submit the form the new field
    > does not come through. My array of paragraphs consists only of the
    > original number I started with. Any added by the javascript are lost.
    > Again IE this works fine, Firefox it works till you submit the form.
    > Any ideas?


    Show how you are adding the extra form controls - we can't fix what we
    can't see.

    Try this sample - I've used an input element, but you could use a
    textarea or whatever:


    <script type="text/javascript">

    function addInput(el)
    {
    var b, o, p;
    if ( document.createElement
    && (o=document.createElement('input'))
    && (p=el.parentNode)){
    o.type = 'text';
    o.name = 'para[' + (el.form.elements.length - 1) + ']';
    b = document.createElement('br');
    p.appendChild(b);
    p.appendChild(o);
    p.appendChild(document.createTextNode(o.name));
    }
    }

    </script>
    <form action="">
    <div>
    <input type="button" value="Add input"
    onclick="addInput(this);">
    </div>
    <div><input type="submit"></input>
    </form>



    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/FAQ>
     
    RobG, Apr 5, 2006
    #2
    1. Advertising

  3. ogdenmd

    RobG Guest

    Ian Collins said on 05/04/2006 11:29 AM AEST:
    > ogdenmd wrote:
    >
    >>I want to give the user the abillity to add extra fields as needed.
    >>I've got it working in IE (surprsingly this works in IE but not in
    >>Firefox), however, basically I have an input field for a paragraph. If
    >>the user decides they want two paragraps then they can click an image
    >>and a new textarea field is show that allows them to add another
    >>paragraph. The fields are named as an array for example name="para[0]"
    >>the next one would then be name="para[1]".

    >
    >
    > Is that a legal value for an attribute? Have you tried 'para0' and 'para1'?


    Yes. The value of the name attribute for a form control is CDATA, i.e.
    almost anything.

    <URL:http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT>




    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/FAQ>
     
    RobG, Apr 5, 2006
    #3
  4. ogdenmd

    ogdenmd Guest

    My appologies for not adding my code :(. I'll give yours a try, however
    here's what I've used....

    function add_paragraph(curNum) {
    showNum = curNum + 1;
    var para_table =
    document.getElementById('desc_para').getElementsByTagName("TBODY")[0];
    var new_tr = document.createElement("TR");
    var new_td = document.createElement("TD");
    new_td.width = "15%";
    new_td.className = "form_lable";
    new_td.vAlign = "top";
    new_td.innerHTML = "Description " + showNum + ":";
    new_tr.appendChild(new_td);
    new_td = document.createElement("TD");
    txt_area_name = 'item[item_details][long_desc][' + curNum + ']';
    new_td.innerHTML = "<textarea name='" + txt_area_name + "' cols='40'
    rows='5' wrap='virtual'></textarea>&nbsp;<a href='javascript:void()'
    onClick='javascript:add_paragraph(" + curNum + ");'><img
    src='modules/constancontact/xarimages/add_para.gif' border='0' /></a>";

    new_tr.appendChild(new_td);
    para_table.appendChild(new_tr);
    }
     
    ogdenmd, Apr 5, 2006
    #4
  5. ogdenmd

    ogdenmd Guest

    okay tracked the error down.....Turns out is all goes back to not
    closing my original Form tag. I had started the form, then after a
    couple of includes the document that actually contains the form is
    called and then it should have closed it....I got the example above
    working just fine outside my original program which then told me that
    it wasn't Firefox that was the problem :). Big surprise there.
     
    ogdenmd, Apr 5, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. guido
    Replies:
    3
    Views:
    500
    Yuriy Solodkyy
    Jun 16, 2007
  2. call_me_anything
    Replies:
    4
    Views:
    473
    Pete Becker
    Sep 30, 2007
  3. Cyril.Liu
    Replies:
    0
    Views:
    459
    Cyril.Liu
    Dec 2, 2008
  4. msimmons
    Replies:
    0
    Views:
    514
    msimmons
    Jul 16, 2009
  5. Thomas
    Replies:
    6
    Views:
    178
Loading...

Share This Page