Dynamically added form inputs don't post !!!! 2

[Sleidia]

Hello,

I've spent a lot of time to make a function that adds text inputs to a form with the use of innerHTML but I have just found out that those dynamic text fields are totally absent from the POST request!

The created input have all the same name, like this :

... name="dyna_field[0]" ...
... name="dyna_field[1]" ...
... name="dyna_field[2]" ...

Here is the Javascript code anyway :

// template of the fields to be added dynamically

var cats_html_temp = new Array();

cats_html_temp[0] = '┕━━';

cats_html_temp[1] = ' ';
cats_html_temp[1] += '<input type=\"hidden\" name=\"form_ecom_cat_ID[{row_num}]\" value=\"\">';
cats_html_temp[1] += '<input type=\"hidden\" name=\"form_ecom_cat_parent_ID[{row_num}]\" value=\"{cat_parent_ID}\">';
cats_html_temp[1] += '<input type=\"text\" name=\"form_ecom_cat_name[{row_num}]\"  value=\"{cat_parent_ID}\" class=\"field1\" maxlength=\"55\" style=\"background: #fd2f16; color: #ffffff\">';
cats_html_temp[1] += ' <input type=\"checkbox\" name=\"form_ecom_cat_status[{row_num}]\" value=\"show\" onclick=\"defocus(this)\">';

cats_html_temp[1] += '<a href=\"javascript:';
cats_html_temp[1] += 'elem_div_add( \'before\' , {row_num} , {cat_parent_ID} , {pixel_num} , cats_html_temp );';
cats_html_temp[1] += 'defocus(this);';
cats_html_temp[1] += '\" class=\"warnlinknorm\"> &nbsp; [ + &#8593; ] </a>';

cats_html_temp[1] += '<a href=\"javascript:';
cats_html_temp[1] += 'elem_div_add( \'after\' , {row_num} , {cat_parent_ID} , {pixel_num} , cats_html_temp );';
cats_html_temp[1] += 'defocus(this);';
cats_html_temp[1] += '\" class=\"warnlinknorm\"> &nbsp; [ + &#8595; ] </a>';

cats_html_temp[1] += '&nbsp; . ';

cats_html_temp[1] += '<a href=\"javascript:';
cats_html_temp[1] += 'elem_div_del( {row_num} );';
cats_html_temp[1] += '\" class=\"warnlinknorm\"> &nbsp; [ - ] </a>';

// function that creates the fields

function elem_div_add ( method , parent_num , cat_parent_ID , pixel_num ) {

parent_id = 'row_' + parent_num;

    if ( !row_num ) var row_num = document.getElementById( 'root' ).getElementsByTagName( 'div' ).length;
    if ( method == 'before' ) var next_elem = document.getElementById( parent_id );
    if ( method == 'after' ) var next_elem = document.getElementById( parent_id ).nextSibling;

row_num++;

    if ( pixel_num > 0 ) {
    
    var prefix = cats_html_temp[0];
    
    } else {
    
    var prefix = '';
    
    }

var cell_content_new = '';
cell_content_new = prefix + cats_html_temp[1];

cell_content_new = cell_content_new.replace( /{cat_parent_ID}/g , cat_parent_ID );
cell_content_new = cell_content_new.replace( /{row_num}/g , row_num );
cell_content_new = cell_content_new.replace( /{pixel_num}/g , pixel_num );
cell_content_new = cell_content_new.replace( /{parent_id}/g , parent_id );


var div = document.createElement( 'div' );
div.setAttribute( 'id' , 'row_' + row_num );

    if ( method == 'inside' ) {
    
    var parent_node = document.getElementById( parent_id );
    parent_node.appendChild( div );
        
    } else {
    
    var parent_node = document.getElementById( parent_id ).parentNode;
    parent_node.insertBefore( div , next_elem );

    }

document.getElementById( 'row_' + row_num ).style.padding =  '0px 0px 0px ' + pixel_num + 'px';
document.getElementById( 'row_' + row_num ).innerHTML = cell_content_new;

}

// the ways the function is called 

<a href="javascript:
elem_div_add ( 'before' , 0 , null , 0 );
defocus(this);
" class="warnlinknorm"> &nbsp; [ + &#8593; ] </a>

<a href="javascript:
elem_div_add( 'after' , 0 , null , 0 );
defocus(this);
"  class="warnlinknorm"> &nbsp; [ + &#8595; ] </a>


<a href="javascript:
elem_div_add( 'inside' , 0 , 1 , 40 );
defocus(this);
"  class="warnlinknorm"> &nbsp; [ + &#8594; ] </a>

Any help would be greatly appreciated !

 

[1DMF]

don't know if it will help, but do you have a <form> tag and are the dynamicly created inputs within the form tag?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Sleidia]

Hello 1DMF

Yeah, all the dynamic and non-dynamic fields can be found at the same place between the <form></form> tags.
Since they are all located in the same section and since the non-dynamic fields' values get posted normally, I don't see why the dynamic ones are getting ignored !

 

[1DMF]

can you do a loop over the form collection and check if JS see's the additions.

or some other type of debuging, to see if updating the innerHTML is more a visual thing rather than actually adding elements to the DOM

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Sleidia]

But I can equally loop through all the dynamic inputs either with
document.getElementById( this_name );
or
document.forms[this_name].elements;

Full function here :

// check/uncheck all checkboxes in a whole form or depending on existing div hierarchy

function elem_chkbox_multi ( method , this_name , checked_status ) {

    if ( method == 'div' ) {
    
    var this_div = document.getElementById( this_name );
    var elem_num = this_div.getElementsByTagName( 'input' );
    var elem_tot = elem_num.length;
    
    }
    
    if ( method == 'form' ) {
    
    var elem_num = document.forms[this_name].elements;
    var elem_tot = elem_num.length;

    }

var first_chkbox = -1;

    for ( i=0 ; i<elem_tot ; i++ ) {
    
        if ( elem_num[i].getAttribute( 'type' ) == 'checkbox' ) {
        
            if ( first_chkbox < 0 ) first_chkbox = i;
        
            if ( checked_status == null ) {
            
            checked_status = elem_num[first_chkbox].checked;
            
            }
        
        elem_num[i].checked = checked_status;
        
        }

    }

}

 

[Sleidia]

It's a browser issue.
It works on IE but not on Firefox and Opera.
Anyone has some info on this?

 

[cLFlaVA]

what errors are you getting in the firefox javascript console?



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Sleidia]

Hi cLFlaVA

Not a single error in the JS console!
It's just that the dynamic fields won't post in Firefox and Opera

 

[cLFlaVA]

see this:

http://www.w3.org/TR/html4/types.html#type-cdata

read this:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

yet your field names are of this format: [tt]form_ecom_cat_ID[n][/tt]

that could very well be the problem.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Sleidia]

Hmmm .... but the non-dynamic fields, the ones that work, have the same name as the dynamic ones.

The dynamic ones are just incrementations of the arrays inserted anywhere in the form, just like this :

... name="form_ecom_cat_name[0]" ... // non-dynamic field
... name="form_ecom_cat_name[3]" ... // inserted dynamic field
... name="form_ecom_cat_name[1]" ... // non-dynamic field
... name="form_ecom_cat_name[4]" ... // inserted dynamic field
... name="form_ecom_cat_name[2]" ... // non-dynamic field
... name="form_ecom_cat_name[5]" ... // inserted dynamic field

 

[cLFlaVA]

can you show your HTML? i bet 1dmf was right with his initial post...



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Sleidia]

Thanks for the help to you all

You were right : it was an HTML wrong-doing.

It's because I always place my form tags like this in order to prevent unwanted extra space :

<table>

<form>

<tr>
<td></td>
</tr>

</form>

</table>

From now, I'll do like this :

<form style="margin:0">

<table>

<tr>
<td></td>
</tr>

</table>

</form>

Thanks again anyway !

 

[jpadie]

@cLFlaVA

in fact the name attribute of a form control is cdata and NOT a name token. i accept this this is confusing but true, nevertheless.

see

http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT

for evidence that the name token is cdata.

thus you can have all the special characters that are acceptable in a CDATA string.