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＆＃39; id，它没有像submit这样的事件，而是可以使用click } event，like

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

Answer 2

似乎id为“提交”的元素是表单的提交按钮 - <input type="submit">。但是，submit事件是由表单触发的，而不是提交按钮，因此绑定的事件处理程序不会触发。

将“submit”id移动到表单上，或者在绑定submit事件处理程序时更改选择器：

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

Answer 3

你必须这样做：

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

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

和

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

            return false;
     });

提交事件始终转到表单而不是表单按钮。

Answer 4

也许是这样的：

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

这将停止发布表单，从而阻止页面刷新。但是，它需要您通过ajax提交表单。

CodeIgniter Javascript表单提交

4 个答案: