Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Change Forms

Changing forms within a form

5:45 pm on May 10, 2012 (gmt 0)

New User

5+ Year Member

joined:May 10, 2012
posts: 2
votes: 0

Hello all,

I'm thankful for such a great resource.

I'd like the visitor of the webpage to be able to click on a drop down box and choose which form they want to complete. For example:
<td valign="top"><select size="1" name="managment_options" onchange="showSUBaction(this.value)">
<option selected value="select">Select One</option>
<option value="unblock">Unblock</option>
<option value="reset">Reset Password</option>
<option value="new">New Account</option>
<option value="delete">Delete Account</option>
<td><div id="txtACTION"></div></td>

I wrote an ajax / javascript that calls the form fields that are determined by the select box above. One of the fields is a second drop down menu based on a mySQL table of User Accounts. Then they display nicely on the screen, but the form won't process. I believe it is because you can't pull form fields just using php AJAX. However, I've done similar things in the past without issues.

Is it possible to build form fields using AJAX and embed them into a form?

2:59 am on May 11, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
votes: 0

Better to include all forms in page and use select to make appropriate form visible.

Adding form fields or whole forms after page load is not a good idea, due to the way the form data is managed by the browser. That has been my experience, I assume storage is allocated for form data on page load or similar.
2:37 pm on May 13, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
votes: 28

There's nothing inherently wrong with dynamically changing a <form> with JavaScript. You can do it the quick-and-dirty way by using AJAX to fetch files containing or generating the HTML content and use .innerHTML to insert the code, or for maximum compatibility/reliability use DOM methods to add the needed elements with .appendChild().

But rather than rebuild your code from scratch, you might try debugging your current method. I'd suggest inserting an alert() to display the form.innerHTML after your AJAX code has inserted the new elements to see exactly what the form content looks like. If that doesn't help, set the form's action attribute to a script that displays the submitted form data. I use a simple formDump.php script for this purpose:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form Dump Utility</title>
<p>Request Method: <?=$_SERVER['REQUEST_METHOD']?></p>



Between those, you should be able to see what the problem is.
2:20 pm on May 14, 2012 (gmt 0)

New User

5+ Year Member

joined:May 10, 2012
votes: 0

daveVK and rainborick - thanks!


Your formDump.php takes me back to the simple debugging that I so quickly forget. Yes, that was exactly what was needed. The nested forms work fine using AJAX. One value wasn't passing due to a simple spelling error. Found it fast and fixed it.