1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Change Forms

Changing forms within a form

         

LVSoftware

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

10+ Year Member



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:
<form>...
<tr>
<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>
</select></td>
<td><div id="txtACTION"></div></td>
</tr>
...
<submit>
</form>

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?

Thanks,
LVSoftware

daveVk

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

WebmasterWorld Senior Member 10+ Year Member



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.

rainborick

2:37 pm on May 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form Dump Utility</title>
</head>
<body>
<p>Request Method: <?=$_SERVER['REQUEST_METHOD']?></p>
<br><pre>
<?php
 if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  print_r($_POST);
 }

 if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  print_r($_GET);
 }

?>
</pre><br>
</body>
</html>

Between those, you should be able to see what the problem is.

LVSoftware

2:20 pm on May 14, 2012 (gmt 0)

10+ Year Member



daveVK and rainborick - thanks!

rainborick,

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.

Thanks!
LVSoftware
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026