Help with adding a jquery alert box after form is correctly submitted

[eluser]LuckyFella73[/eluser]
I allready wrote that in the comments. When your callback
function returns something then your js function gets the data
as "data" array. In my example your array has a key "message".
So you can access the returned values via writing data.message
inside the function

Code:

function(data){

Did you try to implement the code and do you get the alert
with a message from your calback function when submitting the
form?

I didn't answer one of your questions:

1. What’s the json_encode function for?

In your js function you set how the data has to be encoded when
communicating with view and callback function. The js has to know
in what kind of format the data will be returned. In my example
we defined "json" as the format. You could change that - see jquery
user guide. Json is just very simple to use. That's why you have to
json encode the data in your callback function before returning it.
If you have PHP4 installed you can do it like in my example, if you
have PHP5 installed you can use the PHP function json_encode() which
is not available in PHP4. I think there are some classes outside which
emulate the json_encode() function and make it easier to format the
data json encoded (what I did manually in my example). Here are more
informations about json:
http://www.json.org/

[eluser]iwillsoarlikeaneagle[/eluser]
Now I'm enlightened with the data parameter. I forgot to ask it from you.

Yes, I tried to implement it.. But, after I submitted the form correctly, it just printed $array as what (echo $array in the last line does. No alert box was displayed containing the message. What could be the problem??

Thanks also for enlightening me about json. However, I use PHP 5, is it okay to use your example?

[eluser]LuckyFella73[/eluser]
For the json encoding you can do it like Posted but
when running PHP 5 you can write something like

Code:

$json = json_encode(array('message' => 'your data has been saved'));
echo $json;

// instead of:
$array = '{ "message" : "Your data has been saved" }';
echo $array;

after I submitted the form correctly, it just printed $array as what (echo $array in the last line does.

Sounds like you get a white page just with exactly this output?

{ "message" : "Your data has been saved" }

Try this in your js:

Code:

// ...
$.post("form/add_person", { "fname" : item, "email" : item },
        
        function(data) {
            alert("The callback function returned somthing");
        }, 'json');
// ...

Don't you get a js alert box when submitting the form correctly
while the page containing the form stays like before submitting?

[eluser]iwillsoarlikeaneagle[/eluser]
Yes, you're right. After I submitted the form correctly it just displayed a white page that displayed '{ "message" : "Your data has been saved" }'.

Here's what I've got after applying json_encode() and changing the js:
1. If I submit the form with invalid values (empty text fields), it displays the alert box (which shouldn't be, right?).
2. The same happens when I submit the form correctly..it displays the alert box AND the page with just '{ "message" : "Your data has been saved" }' as the other output.

[eluser]LuckyFella73[/eluser]
I tested the code and realized that you have to load the form_validation
class in your callback function and that your form-tag has to be removed.

Here the complete code, tested:

view css:

Code:

<style type="text/css">
div.msg-hide {display:none;}
div.msg-show {display:block;}
</style>

view form:

Code:

Full Name:<br />
    &lt;?php
    $attrib = array('id' => 'fname', 'name' => 'fname');
    echo form_input($attrib).form_error('fname');
    ?&gt;
    <br />E-mail Address:<br />
    &lt;?php
    $attrib = array('id' => 'email', 'name' => 'email');
    echo form_input($attrib).form_error('email');
    ?&gt;
    <br /><br />
    &lt;?php
    $attrib = array('id' => 'submit_item', 'name' => 'submit_item', 'value' => 'Add Person');
    echo form_submit($attrib);
    echo form_reset('reset', 'Reset Fields');
    echo form_close(); ?&gt;

global . js:

Code:

$(document).ready(function()
{
    $("#submit_item").click(function ()
    {
        var fname = $('#fname').val();
        var email = $('#email').val();
        
        $.post("form/add_person", { "fname" : fname, "email" : email },
        function(data)
        {
            $('#box_message').removeClass("msg-hide");
            $('#box_message').addClass("msg-show");

            $("#box_message").html(data.message);
        }, 'json');

    });

});

controller:

Code:

<?php

class Form extends Controller {

    function Form()
    {
        parent::Controller();
        $this->load->helper('url');
        $this->load->helper('form');
        $this->load->library('form_validation');
    }
    
    function index()
    {
        $this->load->view('form_view');
    }
    
    function add_person()
    {
        $this->load->library('form_validation');
        
        $this->form_validation->set_rules('fname', ' ', 'trim|required|xss_clean');
        $this->form_validation->set_rules('email', ' ', 'trim|required|valid_email');
            
        if ($this->form_validation->run() == FALSE)
        {
            $array = '{ "message" : "Input not valid" }';
            echo $array;
        }
        else
        {
            #$this->load->model('Form_model', '', TRUE);
            #$this->Form_model->add_person();
            
            $array = '{ "message" : "All data has been saved" }';
            echo $array;
        }
    }
}

/* End of file form.php */
/* Location: ./system/application/controllers/form.php */

Don't forget to uncomment the 2 model-calls I had to deactivate ..

[eluser]iwillsoarlikeaneagle[/eluser]
It didn't work for me. I'm still figuring out what could be the problem.

Here's my case: when I click the submit button, it does nothing. It remains on the same page and the inputs are still kept intact. It doesn't seem to go to the #submit_item.click function. My reset button doesn't also work anymore.

[eluser]LuckyFella73[/eluser]
Are you sure you copied all the code? I tested it on my localhost
and there is no magic stuff that require special server settings
or that kind of stuff.

Please copy and paste the complete code blocks and try again. If
it still doesn't work post your complete controller and view code
and I'll try to correct the errors. But I'm pretty sure that my code
is ok.

[eluser]iwillsoarlikeaneagle[/eluser]
Yes, I just finished testing using your codes. But it still doesn't work, I can't figure out why.
I'm attaching the controller and view, can you check it please?

[eluser]LuckyFella73[/eluser]
Hi,

everything was ok, you just had an css "error" which forced
the div to stay invisible. Before posting all the code here again
I'll attach the files for you. I added some js lines for resetting
the form.
Sorry for replying that late, I didn't have time this weekend to
check your files.

Have a nice week

PS: you will have to uncomment the calls to your methods in your
controller - I had to deactivate them for testing ...

[eluser]iwillsoarlikeaneagle[/eluser]
It's finally working! Thanks man! :-)

But, can I ask one more thing? Why is it that when I remove the comments for loading the model and running the insert query lines in the controller, the page displays the success msg but doesn't run the query (when I checked the database, it contained no new record). Did the callback function skip/disregard those two lines?