Dynamically Changing Form

Development Web Development
1

I have an accounts creation form I'm constructing. Depending on what type of staff member is being created, the person filling out the form needs to fill out different fields. My form has a "basic info" section all accounts need. Then depending on what type of employee you select from a drop down list, it calls a JQuery function that loads the "dynamic" fields from one of four different html files into the current form. However, when I tried testing to see if the appended form fields could talk to my php script --- they can't. Only the "basic" info can be accessed.

Here is my JQuery function:

var appendIt= function (staffType)
{
    var file = "view/" + staffType + ".html"

    $.get(file, function(data){
        $("#appendToThis").append(data);
     });
}

I've also tried using load.

This will make it "appear" on the page, however the source isn't changed when viewing the "view source." I feel like it is giving the illusion of updating the page, but it really isn't.

Basically my question is how can I actually update the source code of a webpage to allow a dynamic page to pass it's values on to a script to be processed. Any advice?

3

Thanks for responding @B1gbadwo1f!

Not sure I fully understand what you mean -- like have the entire form on the page, and hide/unhide elements depending on the drop-down option selected?

5

I don't understand why the appendChild method would work, but the jQuery append doesn't.

6

Is there any reason you use the $.get function ? I usually use the $.load function to load a subform to a div element and works.

However, I don't know that you forms look like, so I can't say for sure.

7

Thanks for the response @nakamura:

I've used both $.get and $.load to fetch the html sub-form sections. However, even though I append the sub-form sections, even with the proper "name" attributes, when I try to access the values of these sub-form fields with a php script, I get an index error for that field. On the other hand, form fields from the original form can be accessed: It's only the "appended" sub-form fields which return the index error.

9

I still can't figure out why my PHP script can't get the data from the dynamically loaded "sub-form."

10

Just to make sure:

  • Is the form tag properly closed ?
  • Is the appendToThis inside of the form tag ?
  • Does the subform files contain a form tag that might interfere with the tag of the main form ?

Without showing more code, it pretty much a guess.

However, you might try using the firefox firebug extension (or inspect element for chrome as mentioned by @B1gbadwo1f ) to see what data is sent via post or try the jQuery Form Plugin that usually helps with dynamic forms.