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

如果有人能指出我的愚蠢，我将非常感激。谢谢！

- idok

---

虽然我能够从代码中推断出问题所在，但如果您在问题中精确地解释问题，那通常会很有用。如果您得到了意外的功能，请说明该功能是什么。 - Anthony Grist

此外，并非每个人都使用与您相同的语言来生成HTML（个人而言，我从未使用过CodeIgniter，尽管可以弄清楚您发布的代码的作用），因此在涉及jQuery或常规JavaScript的问题时，包括实际生成的HTML通常是有帮助的。 - Anthony Grist

对不起，安东尼。我以后一定会记住的。 - idok

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

- The Alpha

---

非常感谢您提供如此详细的答案。它完美地解决了我的问题。我深信在jQuery方面，我还有很多需要阅读的内容。 - idok

Answer 2

看起来具有 id 为 "submit" 的元素是表单的提交按钮 - <input type="submit">。然而，submit 事件是由表单触发的，而不是提交按钮，因此您绑定的事件处理程序将不会触发。

要么将 "submit" id 移到表单上，要么在绑定 submit 事件处理程序时更改选择器：

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

- Anthony Grist

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

提交事件始终会发送到表单而不是表单按钮。

- John Skoumbourdis

---

非常感谢。这很有帮助。另外，我可以知道返回false的意义是什么吗？ - idok

返回false只是为了确保表单不会通过正常方式在浏览器中提交。如果您返回true或根本不返回任何内容，则意味着您有可能发送表单。通过返回false，您只需确保JavaScript会阻止此操作发生。这不是必需的，但我经常遇到这种情况，因此我总是添加它，以确保表单不会被发送 :) - John Skoumbourdis

Answer 4

可能是这样的：

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

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

- Travis J