homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Change Forms
Changing forms within a form

Msg#: 4451907 posted 5:45 pm on May 10, 2012 (gmt 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?




WebmasterWorld Senior Member 5+ Year Member

Msg#: 4451907 posted 2:59 am on May 11, 2012 (gmt 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.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4451907 posted 2:37 pm on May 13, 2012 (gmt 0)

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.


Msg#: 4451907 posted 2:20 pm on May 14, 2012 (gmt 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.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved