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:

<html>
<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>
<?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.

Re: Getting values from forms nested within forms

The W3C standard says that it is invalid to put a form inside a form.  Some browsers may not fully enforce the rules of the standard, but most modern browsers will fail in some way / shape or form when you try to put a form in a form.  Instead, you may want to simply put your 'inner' form inside a formatted DIV tag and then use the new feature of xajax.getFormValues('divID') to retrieve the 'inner' form portion.

// Joe

xajax Developer
Connect to me on LinkedIn:
http://www.linkedin.com/in/calledtoconstruct

Re: Getting values from forms nested within forms

Thanks, that works!

Re: Getting values from forms nested within forms

hunkomeat wrote:

Thanks, that works!

Excellent!

I'm glad to be able to help.  Also, I'm sorry that feature is not better documented.

// Joe

xajax Developer
Connect to me on LinkedIn:
http://www.linkedin.com/in/calledtoconstruct

Re: Getting values from forms nested within forms

Thank you for making this post sticky!!!
It saved me hours of research (xajax.getFormValues('divID')) and coding.