Topic: Getting values from forms nested within forms
I'm using version .5, and am trying to get values from a form within a form, such as to add values to an existing dropdown prior to posting the overall form. Typical, right? But getFormValues() returns an empty array when my inner form is posted. If I remove the outer form tags then it works! Is it possible to get the values from a form within a form?
My form shows a dropdown of project categories taken from the database, and allows the user to add new categories via xajax:
Code: PHP
<head>
<?php
$xajax->printJavaScript('js/');
?>
</head>
<body>
<form action="db_test.php" method="post">
<div>
Current names: <select name="project_category_id" id="project_category_id">
<option value="">Choose...</option>
<?php
echo createDropdownOptions("SELECT project_category_id, name FROM project_category ORDER BY name");
?>
</select>
</div>
<div>
<form id="new_name_form">
<input type="hidden" name="project_id" value="100">
Name: <input type="text" name="new_name" size="10" id="new_name">
<input type="button" value="Go" onclick="xajax_populate_dd(xajax.getFormValues('new_name_form'));">
</form>
</div>
</form>
</body>
</html>
Code: PHP
function populate_dd($data)
{
global $Db;
// insert new project name into database
$ProjectCategory = new DbStorage('project_category');
$ProjectCategory->set('name', $data['new_name']);
$ProjectCategory->set('project_id', $data['project_id']);
$new_id = $ProjectCategory->create();
// retrieve the new category list
$qry = "SELECT * FROM project_category ORDER BY name";
$cats = $Db->getResultSet($qry);
$objResponse = new myXajaxResponse(); // uses extended class
// refresh the dropdown content
$objResponse->newOptions('project_category_id', $cats, $new_id);
// clear the new name form, to accept another value
$objResponse->assign('new_name', 'value', '');
$objResponse->alert("'" . $data['new_name'] . "' has been added!");
return $objResponse;
}
$xajax->registerFunction("populate_dd");
$xajax->processRequest();
?>
Here's the debug info when embedded form is posted:
Mon Dec 31 2007 09:53:31 GMT-0500 (EST)
RECEIVED [status: 200, size: 954 bytes, time: 92ms]:
<?xml version="1.0" encoding="utf-8" ?>
<xjx>
<cmd n="js">project_category_id.options.length = 0;
</cmd>
<cmd n="js">var objOption = new Option('','81');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">document.getElementById('project_category_id').selectedIndex = 0;
</cmd>
<cmd n="js">var objOption = new Option('Activity Tracking','6');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">var objOption = new Option('Ad Module','4');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">var objOption = new Option('Photo Management','5');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">var objOption = new Option('Video Production','7');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="as" t="new_name" p="value"></cmd>
<cmd n="al">'' has been added!</cmd>
</xjx>
Mon Dec 31 2007 09:53:31 GMT-0500 (EST)
CALLING:
xjxfun: populate_dd
URI:
http://dev.webdev.com/db_test.php
Mon Dec 31 2007 09:53:31 GMT-0500 (EST)
POST: xjxfun=populate_dd
&xjxr=1199112811719
&xjxargs[]=
<xjxobj>
</xjxobj>
... and here it is after the outer form tags removed, showing sucess:
Mon Dec 31 2007 09:54:40 GMT-0500 (EST)
RECEIVED [status: 200, size: 1089 bytes, time: 105ms]:
<?xml version="1.0" encoding="utf-8" ?>
<xjx>
<cmd n="js">project_category_id.options.length = 0;
</cmd>
<cmd n="js">var objOption = new Option('','81');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">var objOption = new Option('Activity Tracking','6');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">var objOption = new Option('Ad Module','4');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">var objOption = new Option('Photo Management','5');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">var objOption = new Option('Test2','82');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="js">document.getElementById('project_category_id').selectedIndex = 4;
</cmd>
<cmd n="js">var objOption = new Option('Video Production','7');document.getElementById('project_category_id').options.add(objOption);</cmd>
<cmd n="as" t="new_name" p="value"></cmd>
<cmd n="al">'Test2' has been added!</cmd>
</xjx>
Mon Dec 31 2007 09:54:40 GMT-0500 (EST)
CALLING:
xjxfun: populate_dd
URI:
http://dev.webdev.com/db_test.php
Mon Dec 31 2007 09:54:40 GMT-0500 (EST)
POST: xjxfun=populate_dd
&xjxr=1199112880505
&xjxargs[]=
<xjxobj>
<e><k>project_id</k><v>100</v></e>
<e><k>new_name</k><v>Test2</v></e>
</xjxobj>
Thanks for any help you can provide.