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

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

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Help with adding a jquery alert box after form is correctly submitted (/showthread.php?tid=30234)

Pages: 1 2 3

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-07-2010

[eluser]iwillsoarlikeaneagle[/eluser]
Hi guys!

When my form (to add a person's data) is correctly submitted (no empty values and wrong input), my page should display a jquery alert to tell the user that it's successful and added to the database.

How do I do that using the M-V-C framework of CodeIgniter?

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-07-2010

[eluser]LuckyFella73[/eluser]
Do you have a special reason that you want to use jquery for that?
Usually you save the data after validating and redirect to an other
page -> on which you could state that the form was submitted correctly.
Here flash vars are very usefull.

If you don't want the page to change after submitting the form you
have to set up a callback function with the help of jquery and return a flag
that tells you if the form was saved and then write the success message
with js.

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-07-2010

[eluser]iwillsoarlikeaneagle[/eluser]
Yes, I don't want the page to change after submitting the form. That's exactly what I want to do. How do I do that?

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-07-2010

[eluser]LuckyFella73[/eluser]
would be nicer if you would start and post what you allready tried
and where to optimise ..

But I give you a starting point:

Your form could look like:

Code:
<p>

    &lt;input type="text" name="item" id="item" value="" /&gt;&lt;br />

    &lt;input type="submit" name="submit_item" id="submit_item" value="submit item" /&gt;

</p>

Place that js in your header (don't forget the js wrapping tags)
and include the jquery.js before this !

Code:
$(document).ready(function()

{

    $("#submit_item").click(function ()

    {

        var item = $('#item').val(); // for each form item you will need an entry here

        $.post("form/process", { "item" : item }, // extend the brackets {} with your items seperated with ","

        function(data) { // when your callback func. answers here we go

            // in this example your callback function returned variable "result"

            // in json encoded

            alert(data.result);

            // return a flag (from callback funct.) when the formdata is saved and everything is fine

            // print message here -> depending on the flag ("success" or "try again")

        }, 'json');

    });

});

Your submit item (submit button) has to have the id "submit_item"

In your controller (called "form" in this example) you need the callback
function. Could look like:

Code:
function process()

    {

        $item = $this->input->post('item');

        $item = 'From The Controller '.$item;

        $array = '{ "result" : "'.$item.'" }';

        echo $array;

    }

For I had no php 5 running and this I couldn't use "json_encode()"
I manually encoded the data ...

That should give you a good starting point - I hope.

The js function is more or less a example from the jquery website.

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-07-2010

[eluser]n0xie[/eluser]
Take a look at my message library and combine that with something like jQuery Growl or any of the other notification plugins for jQuery.

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-11-2010

[eluser]iwillsoarlikeaneagle[/eluser]
@LuckyFella73: Sorry for this late reply.

Here's a part of my form_view.php from the views folder:

Code:
&lt;?php echo form_open('Form');?&gt;

    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);

    ?&gt;

    &lt;?php echo form_reset('reset', 'Reset Fields'); ?&gt;

&lt;?php echo form_close(); ?&gt;

..the js found at the header(I've put the js tags and the source for the jquery.js):

Code:
$(document).ready(function()

{

    $("#submit_item").click(function ()

    {

        var item = $('#fname').val();

        var item = $('#email').val();

        $.post("Form/add_person", { "fname" : item, "email" : item }, // extend the brackets {} with your items seperated with ","

        function(data) { // when your callback func. answers here we go

            // in this example your callback function returned variable "result"

            // in json encoded

            alert(data.result);

            // return a flag (from callback funct.) when the formdata is saved and everything is fine

            // print message here -> depending on the flag ("success" or "try again")

        }, 'json');

    });

});

..here's the add_person function in my form.php controller:

Code:
function add_person()

    {

        $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)

        {

            $this->load->view('form_view');

        }

        else

        {

            $this->load->model('Form_model', '', TRUE);

            $this->Form_model->add_person();

            //

        }

}

Help:
1. What's the json_encode function for?
2. I'm confused. With the "starting pt." that you've shared (esp. for the callback function process()), I don't know what to do next with my codes.

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-11-2010

[eluser]iwillsoarlikeaneagle[/eluser]
After calling the $this->Form_model->add_person() function, I want to display the alert box to the user saying that data insertion in the database is a success.

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-11-2010

[eluser]LuckyFella73[/eluser]

Code:
function add_person()

    {

        $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)

        {

            $this->load->view('form_view');

        }

        else

        {

            $this->load->model('Form_model', '', TRUE);

            $this->Form_model->add_person();

            // when you got here your form submit was

    // valid and you have to send the message to

    // your view. FOR EXAMPLE:

    $array = '{ "message" : "Your data has been saved" }';

        echo $array;

        }

}

In the js part in your view file you do this:

Code:
$(document).ready(function()

{

    $("#submit_item").click(function ()

    {

        var item = $('#fname').val();

        var item = $('#email').val();

        $.post("Form/add_person", { "fname" : item, "email" : item }, // extend the brackets {} with your items seperated with ","

        function(data) { // when your callback func. answers here we go

            // in this example your callback function returned variable "result"

            // in json encoded

            alert(data.message);

            // return a flag (from callback funct.) when the formdata is saved and everything is fine

            // print message here -> depending on the flag ("success" or "try again")

        }, 'json');

    });

});

Instead of

Code:
alert(data.message);

you now define with js where to push the message. One way would be to set up
a DIV tag (maybe on to of the page) and first hide it (before submit) with css. set an id for
that DIV tag. now you can assign the message to the element and make the element visible with jquery via the id instead of alerting it like I did just for example.

Hope that helps you

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-11-2010

[eluser]LuckyFella73[/eluser]
a bit more info ...

Code:
$('#id_message_div').removeClass(className_hidden_div);

$('#id_message_div').addClass(className_display);

$("#id_message_div").html(data.message);

cheers

Help with adding a jquery alert box after form is correctly submitted - El Forum - 05-11-2010

[eluser]iwillsoarlikeaneagle[/eluser]
A question.

Code:
function(data) { // when your callback func. answers here we go

            // in this example your callback function returned variable "result"

            // in json encoded

            alert(data.message);

            // return a flag (from callback funct.) when the formdata is saved and everything is fine

            // print message here -> depending on the flag ("success" or "try again")

        }

What does the data parameter do in this function? Where does this come from?