/    Sign up×
Community /Pin to ProfileBookmark

Dynamic form elements

I thought I’d see if I could find some “point me in the right direction” help here for a JavaScript problem I’m having. I’ve been programming for 20+ years, but I’ve never focused on JavaScript, I’ve only recently started using it more often.

I’ve got a PHP page that has a form on it. A button on the form calls a JavaScript function, which goes through some gyrations and “calls” a different PHP script, which puts together a string, which the JavaScript function then stuffs into a div tag on the original page (which is also inside the form) via the innerHTML. This was all written by someone else, and while I don’t understand every single thing that’s happening, I get the overall flow.

I’ve been tasked with adding some form elements (checkboxes, and potentially some selects) to the string that’s returned by the PHP script. The idea is that checking any of the checkboxes should trigger the same JavaScript function as the button, so that the string that’s returned (including the new form elements) is re-updated.

Getting the new form elements into the string was no problem. My problem is that the JavaScript function doesn’t seem to recognize them after they’ve been added to the form. I know that sometimes JavaScript can be included early on (e.g., in the head tag), and sometimes it has to be written in-stream; I’m wondering if the problem here is that the function recognizes the initial form elements but doesn’t recognize the elements that are added later for no other reason than that they weren’t there originally.

So if that’s the case, can anyone suggest an approach to be able to use the new form elements to call the same updating function? And if that’s not the case, what am I missing when it comes to the function recognizing the new form elements?

Thanks for any insight.

Cheers,
Rich

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@davidbaltAug 21.2008 — Hmm. Interesting problem. From what I understand, you are somehow adding new checkboxes to the page after the page load? Or are they hard-coded into the HTML (generated by PHP , maybe?)

Without an example, it's hard to know for sure how to help you. There are several general things I would try:

1) First, if you are trying to access the checkboxes using a DOM FORM Object (form.checkbox1 or similar) then you should confirm that the checkboxes are actually children of the FORM element.

2) If you want to bind the same event to each checkbox on the page (onChange, run function "xyz") then get a collection of checkboxes using document.getElementsByTagName("INPUT"), use a for() loop to iterate them ( for( x in collection){ if(collection[x].type=='checkbox') .... } ) and set their onChange event handler.

3) If all else fails and it's practical, you can use the ID of the checkbox to grab it's JS object using document.getElementById().

Finally, if you are serious about JS and are going to be using it every day or even remotely often, check out MooTools or another JS framework. It will make your life far easier.
Copy linkTweet thisAlerts:
@zergliciousSep 10.2008 — Did you ever work out a solution to your problem...I have a similiar situation where I have to build a form dynamically and submit it from Javascript and I'm not having much luck.

I'm can see the hidden fields have been added to the form element in FireBug -- I'm using DOM to build up the form but when I submit the form in Mozilla the app behaves like the form fields are blank or missing and in IE the form submission is entiredly ignored.
×

Success!

Help @richvoice 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.17,
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,
)...