javascript - CodeIgniter Javascript 表单提交

Question

首先我想说我对 javascript 和 jQuery 还很陌生。我想这是一个非常愚蠢和简单的问题，而且我知道有很多关于这个的问题，我确实尝试了所有这些问题。虽然我似乎无法解决我的问题。

我有一个输入框和一个提交按钮。单击提交后，我想将输入字段的内容保存到数据库中，并继续保持在同一页面中，页面上的内容保持原样。

我的Javascript代码如下:

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

我的html代码如下(我用的是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();

如果有人能指出我的愚蠢之处，我将不胜感激。谢谢!

Answer 1

你正在使用

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

在这种情况下 submit是button/input的 id它没有像submit这样的事件, 而不是你可以使用 click事件，例如

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

或

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

否则，您可以更改以下行

echo form_open();

到

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

而不是

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

你可以使用

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

或

$('#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);
    });
});