TypeError：值未实现接口 HTMLInputElement答案

【问题标题】：TypeError: Value does not implement interface HTMLInputElementTypeError：值未实现接口 HTMLInputElement
【发布时间】：2013-10-25 04:14:57
【问题描述】：

我正在尝试使用 jQuery-ajax 发布表单，但在点击发布表单时出现此错误。 TypeError: Value does not implement interface HTMLInputElement 这是我的 JavaScript 代码：

 $('document').ready(function () {
    $('#update').click(function () {
        jQuery.post("update_category", {
            c_id: c_id,
            c_name: c_name,
            c_description: c_description
        },

        function (data, textStatus) {
            if (data == 1) {
                $('#response').html("Thank You!!..We Will Get Back To You Soon..!!");
                $('#response').css('color', 'green');
            } else {
                $('#response').html("Some Error Occurred");
                $('#response').css('color', 'red');
            }
        });
    });
});

我的表格：

<div id="form">
    <form>
    <!-- PRONT DROP DOWN HERE !-->
        <input type="text" name="c_id" id="c_id" disabled="disble" placeholder="'.strtoupper($r['c_id']).'" value="'.strtoupper($r['c_id']).'" ></input>
        <input type="text" name="c_name" id="c_name" disabled="disble" placeholder="'.strtoupper($r['c_name']).'" value="'.strtoupper($r['c_name']).'"></input>
        <textarea rows="4" class="field span10" name="c_description" id="c_description"  disabled="disble" placeholder="Description">'.strtoupper($r['c_description']).'</textarea>

    </form> 
</div>

【问题讨论】：

.strtoupper($r['c_description']). 应该是服务器端代码吗？！
你为什么用 $('document') 而不是 $(document) ??
yaa .strtoupper($r['c_description']) 我也将它视为服务器端，它是如此......我将它放在我的表单字段中，现在发布它以供更新查询
如何从表单中获取c_id、c_name、c_description的值

标签： php ajax jquery

【解决方案1】：

如果您在 ajax 请求中发送 jQuery 对象，则可能会生成此错误。因此，在您的情况下，c_id、c_name 或 c_description 中的一个很可能是表示输入字段而不是输入元素的 .val() 值的 jQuery 对象。

【讨论】：

这是一个旧答案，但我想谢谢你。它应该被标记为好的答案。
刚刚赞成你的答案，因为它解决了我自己的问题......我引用的是元素而不是值......+1 @milo-lamar

【解决方案2】：

您的表单在 HTML 代码中包含服务器端 PHP 代码。

PHP 代码应如下编写。

<input type="text" name="c_id" id="c_id" disabled="disble" placeholder="<?php echo strtoupper($r['c_id']) ; ?> " value="<?php echo strtoupper($r['c_id']) ; ?> " ></input>

还可以查看以下链接以获取 Jquery 参考。

Javascript: TypeError: Value does not implement interface FormData

【讨论】：

朋友我正在使用codeigniter，我已经给了你控制器方法代码，所以不需要写我

【解决方案3】：

试试这个

jQuery.post

使用这个

$.post

这里有完整代码

$(document).ready(function () {
    $('#update').click(function () {
        $.post("update_category", {
            c_id: c_id,
            c_name: c_name,
            c_description: c_description
        },

        function (data, textStatus) {
            if (data == 1) {
                $('#response').html("Thank You!!..We Will Get Back To You Soon..!!");
                $('#response').css('color', 'green');
            } else {
                $('#response').html("Some Error Occurred");
                $('#response').css('color', 'red');
            }
        });
    });
});

希望对你有帮助

【讨论】：

@user2488557 使用前是否定义了 c_id 等变量？

【解决方案4】：

检查以下代码。您的代码中缺少 id="response" 的 span 或 div 并将 jquery.post 替换为 $.post。给文件名 update_category 加上扩展名

<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
        $('document').ready(function(){
            var c_id = '1', c_name = 'test', c_description = 'testing';
            $('#update').click(function(){
                $.post("update_category.php", {
                    c_id:c_id,
                    c_name: c_name,
                    c_description: c_description                                       
                    }, function(data){
                        if(data == 1){
                            $('#response').html("Thank You!!..We Will Get Back To You Soon..!!");
                            $('#response').css('color','green');
                        }
                        else
                        {
                            $('#response').html("Some Error Occurred");
                            $('#response').css('color','red');
                        }
                });
            });
        });
        </script>
    </head>
<body>
    <div id="form">
        <form>
            <!-- PRONT DROP DOWN HERE !-->
            <input type="text" name="c_id" id="c_id" placeholder="" value="" />
            <input type="text" name="c_name" id="c_name" placeholder="" value="" />
            <textarea rows="4" class="field span10" name="c_description" id="c_description"  placeholder="Description"></textarea>
            <input type="button" id="update" value="Update" />
            <span id="response"></span> <!-- This is missing in your form -->
        </form> 
    </div>
</body>
</html>

【讨论】：

我正在使用 codeigniter，所以不需要 .php 扩展名，只需给出控制器的方法名称...我尝试使用 $.post 仍然没有将 vlue post 发送到控制器
如何从表单中获取c_id、c_name、c_description的值

【解决方案5】：

尝试在变量中使用值

$('document').ready(function () {
$('#update').click(function () {
    jQuery.post("update_category", {
        c_id: c_id.val(),
        c_name: c_name.val(),
        c_description: c_description.val()
  },
    function (data, textStatus) {
        if (data == 1) {
            $('#response').html("Thank You!!..We Will Get Back To You Soon..!!");
            $('#response').css('color', 'green');
        } else {
            $('#response').html("Some Error Occurred");
            $('#response').css('color', 'red');
        }
    });
});

【讨论】：