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!

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!

• javascript
• jquery
• ajax
• codeigniter

• 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 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 Commented Oct 9, 2012 at 21:29
• I am sorry about that Anthony. I shall definitely keep that in mind, here after. – idok Commented Oct 10, 2012 at 2:22

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

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

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.

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.