CodeIgniter Javascript form submission

Question

I would first want to say that I am very new to javascript and jQuery. Its a very silly and simple problem I suppose, and I am aware there are plenty of questions on this, and I did try all of them. Though I cant seem to solve my problem.

I have an input field and a submit button. On clicking submit I would like to save the content of the input filed into the database, and continue to remain in the same page with content on page as is.

My Javascript code is as follows:

 <script type="text/javascript">
        $(document).ready(function()
        {
            $('#submit').submit(function(e)
            {

                e.preventDefault();
                var msg = $('#uname').val();
                $.post("c_test/test_submit", {uname: msg}, function(r) {
                   console.log(r);
                });
            });
        });
    </script>

And my html code as follows ( I use codeigniter):

$this->load->helper('form');
echo form_open();
$data =array ('name'=>'uname','id'=>'uname');
echo form_input($data) . '<br />';
$data=array('name'=>'submit','id'=>'submit','value'=>'Submit');
echo form_submit($data);
echo form_close();

I would be very grateful if anyone could point out my stupidity. Thanks!

While I was able to deduce what the problem was from the code, it's generally useful if you explain in the question precisely what the problem you're having is. If you're getting functionality that you're not expecting, say what that functionality is. — Anthony Grist
– Anthony Grist, Commented Oct 9, 2012 at 21:26
Also, not everybody uses the same language for generating HTML that you do (personally I've never used codeigniter, though it's possible to suss out what the code you've posted is supposed to do), so it's often helpful to include the actual, generated HTML when asking questions related to jQuery or regular JavaScript. — Anthony Grist
– Anthony Grist, Commented Oct 9, 2012 at 21:29
I am sorry about that Anthony. I shall definitely keep that in mind, here after. — idok
– idok, Commented Oct 10, 2012 at 2:22

The Alpha · Accepted Answer · 2012-10-09 21:51:29Z

4

You are using

$('#submit').submit(function(e){ ... });

In this case submit is the button/input's id and it has no such an event like submit, instead you can use click event, like

$('#submit').click(function(e){ ... });

or

$('#submit').on('click', function(e){ ... });

Otherwise, you can change the following line

echo form_open();

to

echo form_open('c_test/test_submit', array('id' => 'myform'));

and instead of

$('#submit').click(function(e){ ... });

you can use

$('#myform').submit(function(e){
    e.preventDefault();
    var msg = $('#uname').val();
    var url=$(this).attr('action');
    $.post(url, {uname: msg}, function(r) {
        console.log(r);
    });
});

or

$('#myform').on('submit', function(e){
    e.preventDefault();
    var msg = $('#uname').val();
    var url=$(this).attr('action');
    $.post(url, {uname: msg}, function(r) {
        console.log(r);
    });
});

answered Oct 9, 2012 at 21:51

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

idok Over a year ago

Thanks a million for such descriptive answer.. It worked perfectly fine.. I am convinced I have a lot of reading to do, as far as jQuery is concerned.

Anthony Grist · Accepted Answer · 2012-10-09 21:25:51Z

1

It seems like the element with an id of "submit" is the submit button for the form - <input type="submit">. However, the submit event is fired by the form, not the submit button, so your bound event handler won't fire.

Either move the "submit" id onto the form, or change the selector when binding the submit event handler:

$('form').submit(function(e) {
    // handle submit event from the form
});

answered Oct 9, 2012 at 21:25

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Comments

John Skoubourdis · Accepted Answer · 2012-10-09 21:26:33Z

1

You have to do it like this:

<?php
$this->load->helper('form');

echo form_open('', array( 'id' => 'myform'));
..

and:

 $('#myform').submit(function(e)
     {
            e.preventDefault();
            var msg = $('#uname').val();
            $.post("c_test/test_submit", {uname: msg}, function(r) {
               console.log(r);
            });

            return false;
     });

The submit event always goes to the form and not to the form button.

answered Oct 9, 2012 at 21:26

John Skoubourdis

3,3201 gold badge31 silver badges40 bronze badges

2 Comments

idok Over a year ago

Thanks a lot. It was helpful.. Also may I know what is the significance of returning false?

John Skoubourdis Over a year ago

Returning false it is just to make sure that the form will never be submitted through your browser with the normal way. If you return true or don't return anything at all this means you have a possibility the form to be sent. With returning false you just make sure that the JavaScript will stop you for this to happen. It is not required but it happened many times to me and I always add it just to make sure that the form will not be sent :)

Travis J · Accepted Answer · 2012-10-09 21:23:14Z

0

perhaps like this:

$data=array('name'=>'submit','id'=>'submit','value'=>'Submit','onsubmit'=>'return false;');

This will stop the form from posting which will in turn stop the page from refreshing. However, it will require that you submit the form via ajax.

answered Oct 9, 2012 at 21:23

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Collectives™ on Stack Overflow

CodeIgniter Javascript form submission

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related