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!

Answer 1

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