Posted by: phillipnb | July 16, 2012

CodeIgniter: Submit a form using javascirpt


Click here for the CodeIgniter Multiple Choice and Interview Questions Ebook

There are instances where we have to submit a form using a javascript function. For example: we need to submit a form during a change in the drop down item selected of a html form or when we click a check box or when we select a radio button etc. How do we do that.? Let us demonstrate this using an example. Suppose we have a CodeIgniter form like the one shown below. We will use this form to submit the data that we need.

echo form_open('', array('id'=>'student_form'));
echo form_hidden('student_id', '');
echo form_hidden('student_name', '');
echo form_hidden('student_address', '');
echo form_hidden('student_mark1', '');
echo form_hidden('student_mark2', '');
echo form_close();

Let us code the input form


<!--?php echo form_open('', array('id' =--> 'dataentry_form')); ?>
<input id="sid" type="text" name="id" value="" />

<input id="sname" type="text" name="name" value="" />

<input id="saddress" type="text" name="address" value="" />

<input id="smark1" type="text" name="mark1" value="" />

<input id="smark2" type="text" name="mark2" value="" />


<!--?php  echo form_submit('submit_form','Submit', 'id="id_submit_form"'); echo form_close();  ?-->

Next, we’ll see the how JQuery handle’s the submit of this form. The click on the submit button will be handled like this:

<script type="text/javascript" language="javascript">// <![CDATA[
$(document).ready(function() {	
   $('#id_submit_form').click(function() {
		get_form_data_and_submit();
		return false;
	});
// ]]></script>

As you can see the click of the submit button is handled by the above JQuery handler which passes the control to the javascript function called get_form_data_and_submit. This method/function will look like this:

function get_form_data_and_submit()
{
    document.forms["student_form"].student_id.value = document.getElementById('sid').value;
    document.forms["student_form"].student_name.value = document.getElementById('sname').value;
    document.forms["student_form"].student_address.value = document.getElementById('saddress').value;
    document.forms["student_form"].student_mark1.value = document.getElementById('smark1').value;
    document.forms["student_form"].student_mark2.value = document.getElementById('smark2').value;
    document.forms["student_form"].submit();
    return false;
}

So, what does get_form_data_and_submit() do?. It picks the values entered in the data entry form and submits it. You can also use this without Code Igniter and with just plain php, javascript, jquery and html. Here is the complete code:

<!--?php $this--->load->config('phil_config');?> // this has configurations to translate my action uri, test_form_uri.


<!-- load your jquery lib here -->
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {	
   $('#id_submit_form').click(function() { 
		get_form_data_and_submit();
		return false;
	});
});
// ]]></script>
<script type="text/javascript">// <![CDATA[
function get_form_data_and_submit()
{	
    document.forms["student_form"].student_id.value = document.getElementById('sid').value;
    document.forms["student_form"].student_name.value = document.getElementById('sname').value;
    document.forms["student_form"].student_address.value = document.getElementById('saddress').value;
    document.forms["student_form"].student_mark1.value = document.getElementById('smark1').value;
    document.forms["student_form"].student_mark2.value = document.getElementById('smark2').value;
    document.forms["student_form"].method = 'post';
    document.forms["student_form"].action = '<?php echo site_url().$this->config->item('test_form_uri'); ?>';
    document.forms["student_form"].submit();
    return false;
}
// ]]></script>


<!--?php  echo form_open('', array('id'=-->'student_form'));
echo form_hidden('student_id', '');
echo form_hidden('student_name', '');
echo form_hidden('student_address', '');
echo form_hidden('student_mark1', '');
echo form_hidden('student_mark2', '');
echo form_close();

echo form_open('', array('id' => 'dataentry_form'));
?>
Student ID: <input id="sid" type="text" name="id" value="" />

Student Name:<input id="sname" type="text" name="name" value="" />

Student Address:<input id="saddress" type="text" name="address" value="" />

Student Grade for Course 100<input id="smark1" type="text" name="mark1" value="" />

Student Grade for Course 101<input id="smark2" type="text" name="mark2" value="" />
<!--?php  echo form_submit('submit_form','Submit', 'id="id_submit_form"'); echo form_close();  ?-->


Here is the input, of what was submitted: submit ci form using javascript.

If we display the $_POST array, we can see the following:

from test form
Array
(
    [student_id] => 1001
    [student_name] => Tom Watson
    [student_address] => 11 Greenland Park, Siberia
    [student_mark1] => A
    [student_mark2] => B
)

So, what did we do?. We used a form to collect data and used jquery/javascript to populate another form and submit it. I am not advocating that each one of us will use the exact same scenario in real life but we will definitely encounter some variation of the above scenario, some where in our day to day work/project.

Hope that was helpful to you to submit a form using javascript. Please try it out and post your comments.

Till next time,
it will be happy PHPing

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: