Form Submission via Ajax.Updater

[eluser]Narkboy[/eluser]
Sure!

Form is newPortForm.php (displayed in the 'cover' div over the page):

Code:

<h1>Add New Portfolio</h1>
&lt;?php echo $validError; ?&gt;
&lt;form name="newPort" id="newPort" action="&lt;?php echo site_url('/admin/insertPort');?&gt;" method="post"&gt;

<table class="adminTable">
    <tr>
        <th>Title</th>
        <td>&lt;input name="title" type="text" class="formText" size="20" maxlength="15" /&gt;&lt;/td>
    </tr>
    <tr>
        <th>Description</th>
        <td>&lt;textarea name="description" class="formText" rows="5" cols="80"&gt;&lt;/textarea></td>
    </tr>
    <tr>
        <th>Display Order</th>
        <td>&lt;input name="order" type="text" class="formText" size="3" maxlength="2" /&gt;&lt;/td>
    </tr>
    <tr>
        <th>Active</th>
        <td>&lt;input name="active" class="formText" type="checkbox" class="formText" /&gt;&lt;/td>
    </tr>
    <tr>
        <td>&lt;input name="reset" type="reset" class="formReset" value="Reset" /&gt;&lt;/td>
        <td>&lt;input name="subNewPort" id="subNewClient" type="submit" class="formSubmit" value="Add Client" /&gt;&lt;/td>
    </tr>
</table>

&lt;/form&gt;
<a href="[removed]changeCover('&lt;?php echo base_url();?&gt;index.php/admin/viewPorts');">View Portfolios</a>
<p class="closeCover">[ <a href="[removed]closeCover();">Exit</a> ]</p>

The onsubmit references a js function which sorts out the form data and fires Ajax.Updater:

(this is where I'm having trouble with accessing the form values using the form name rather than it's position in the document...)

Code:

function ajaxSubmit(url,formIdent)
{
    alert('ajaxSubmit called to "'+url+'" from form: "'+formIdent+'"'); // Debug

    // Loop through the form data and create the parameters section of the Ajax.Updater call:
    var theForm = document.forms[0];

    param = '';

    for(i=0; i<theForm.elements.length; i++)
    {
        param += theForm.elements[i].name + '='

        if(theForm.elements[i].type == "text" || theForm.elements[i].type == "textarea" || theForm.elements[i].type == "button")
        {
            param += theForm.elements[i].value;
        }
        else if(theForm.elements[i].type == "checkbox")
        {
            param += theForm.elements[i].checked;
        }
        else if(theForm.elements[i].type == "select-one")
        {
            param += theForm.elements[i].options[theForm.elements[i].selectedIndex].text;
        }

        param += ', ';

    }

    // Trim the last comma from the string:
    param = param.replace(/^\s+|,\s+$/g, '') ;

    alert(param); // Debug

    // Now perform the Ajax.Updater:

    new Ajax.Updater('cover',url,{method: 'post', postBody: param});

    return false; // Stop the form from actually submitting.
}

The onSubmit action calls a ajax-specific function in the admin controller called insertPort:

Code:

function insertPort()
    {
    print_r($_POST); // Debug - shows me whats in the post

                // Call validation and set the rules:
        $this->load->library('validation');

        $this->validation->set_rules('title', 'Title','required|min_length[3]|max_length[15]');
        $this->validation->set_rules('description','Description','required');
        $this->validation->set_rules('order','Display Order','required');

        // Validate the data passed in:
        if ($this->validation->run() == FALSE)
        {
            if($this->input->post('subNewPort') !== FALSE)
            {
                                // Validation failed - return a generic error message:
                $data['validError'] = '<p class="formError">We were unable to add a new portfolio.</p>';
            }
            else
            {
                // First view of form - blank the error msg:
                                $data['validError'] = '';
            }

                        // Validation failed - re-display the form:
            $out = $this->load->view('admin/ajax/newPortForm',$data,TRUE);
                        // Returned and echo'd as a string for ajax to insert into 'cover'
            echo $out;
        }
        else
        {

            // Validation passed - display a msg for the mo but this will be where we insert the record.
            echo 'validated ok!';
        }

    }

So - the only problem that I have now is formatting the Ajax.Updater postBody param - as it stands the js function ajaxSubmit calls ajax.Updater correctly, but the post data returned is as follows:

Code:

$_POST: Array ( [title] => , description=, order=, active=false, reset=, subNewPort= )

Which means that title has the value made of the rest of the actual post data.

I'm playing with the formatting - I think I may need to send these as seperate postBody parts in the options section of the Ajax.Updater?

Anyway - that's where I am!

/B

Edit - by adding a '&' after each postBody element rather than a ',' it works fine. Duh!

So - all working now except for the fact that I have to reference the form values by order rather than by name.. Oh well!