Form Submission via Ajax.Updater

[eluser]Narkboy[/eluser]
Yeah, sorry - should have been clearer - i is used in a loop to specify a given element. The only way I can actually access the form elements is by their position in the document order, which is fine up until I have more than one form on a page and then the current system will require me to pass in the position of the form too..

That said, I'm working on the order method which is working atm and will do throuhout this site as I won't have more than one form on a page at a time.

Still can't seem to get the form data (now working in js) to be passed through to the php function - something to do with the Ajax.Updater and the format I'm feeding it data.. *sigh*

/B

EDIT:

Scratch that lst bit - dumb syntax error in my params string - FYI it's '=' not ':'...

Coding 101 please!

[eluser]TheFuzzy0ne[/eluser]
Please can you show me the latest revision of your function?

[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!

[eluser]TheFuzzy0ne[/eluser]
If I remember correctly, it's a query string you need to send:

Code:

query_string = "title=" + encodeURI(title) + "&arg1;=" + encodeURI(arg1) + "&arg2;=" + encodeURI(arg2) // and so on...

EDIT: Without the semi-colons. The forum thought it would be a laugh to stick those in there...