/    Sign up×
Community /Pin to ProfileBookmark

incomplete POST array…..due to dynamic DOM?

Copy linkTweet thisAlerts:
Aug 28.2006

Hey guys!

I developed some control widgets using javscript and DOM. One such widget put a textbox and a button onto a form. When the button is clicked, a popup appears with a color cube to select from. After the user selects a color, the hex value is written to the textbox’s value attribute, and the textbox background and foreground set to the same color so that the text is not visible, just the color. This all works fine, but when I submit the form, none of the color text data is in the POST array.

Is this due to the fact that the text boxes are added to the DOM/form dynamically?

If this is so, is there a way around it?

I mean, surely anything you add dynamically to the form that has a value, should be in the POST array, right?

Any help greatly appreciated.

Merlin!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorAug 28.2006 — can we see the code?
Copy linkTweet thisAlerts:
@CrazyMerlinauthorAug 29.2006 — the php code is simply
[code=php]
$tbl->addCell('Border Color:', 'left');
$tbl->addCell('<script type="text/javascript">var colorChooser = new ccObject("", "border_color", "Border Color:");</script>', 'left');
[/code]

and the js function that creates the objects appends them is:
<i>
</i>function ccObject(defaultColor, name, owner)
{
this.instanceOf = Math.floor(Math.random()*99);
this.colorBox = document.createElement('input');
this.colorBox.type = 'text';
this.colorBox.disabled = 'true';
this.colorBox.size = '1';
this.colorBox.internalName = 'ccObject_' + this.instanceOf;
this.colorBox.style.display = 'inline';
this.colorBox.style.border = '1px solid #000000';

<i> </i>if(defaultColor)
<i> </i>{
<i> </i> this.colorBox.style.backgroundColor = defaultColor;
<i> </i>}
<i> </i>else
<i> </i>{
<i> </i> this.colorBox.style.backgroundColor = "#ece9d8";
<i> </i>}

<i> </i>if(name)
<i> </i>{
<i> </i> this.colorBox.name = name;
<i> </i>}
<i> </i>else
<i> </i>{
<i> </i> this.colorBox.name = this.colorBox.internalName;
<i> </i>}

<i> </i>var name = this.colorBox.name;

<i> </i>this.colorButton = document.createElement('input');
<i> </i>this.colorButton.type = 'button';
<i> </i>this.colorButton.value = '...';
<i> </i>this.colorButton.linkItem = this.colorBox.name;
<i> </i>this.colorButton.onclick = function(event){ createColorCube(event, name) };
<i> </i>this.colorButton.style.display = 'inline';

<i> </i>var locations = document.getElementsByTagName('script');
<i> </i>location_index = locations.length;

<i> </i>for(i = 0; i &lt; location_index; i ++)
<i> </i>{
<i> </i> if(locations[i].textContent.indexOf('ccObject') != - 1)
<i> </i> {
<i> </i> if(!locations[i].nextSibling)
<i> </i> {
<i> </i> locations[i].parentNode.appendChild(this.colorBox);
<i> </i> locations[i].parentNode.appendChild(this.colorButton);
<i> </i> break;
<i> </i> }
<i> </i> }
<i> </i>}

<i> </i>return;
}


the objects appear on the document visually and they work. They also appear in the DOM.

but when I submit the form they are on and check the post array, they are not there.

I guess they are not being set as objects of that form.

thx!
Copy linkTweet thisAlerts:
@TheBearMayAug 29.2006 — Please don't cross post.
Copy linkTweet thisAlerts:
@KravvitzAug 29.2006 — It's not working because the <input type="text"> is [url=http://www.w3.org/TR/html401/interact/forms.html#adef-disabled]disabled (read this)[/url]. Set it to readOnly instead.

Change
this.colorBox.disabled = 'true';
to
this.colorBox.readOnly = true;
Copy linkTweet thisAlerts:
@CrazyMerlinauthorAug 29.2006 — lol....I just found that out.

not an issue, I just created a hidden field along with the object and use that to pass my value instead.

@TheBearMay...I cross posted as I wasn't sure if this was a php problem or a js problem.
×

Success!

Help @CrazyMerlin 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.1,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...