Question

我正在尝试使用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>

Answer 1

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

Answer 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

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

希望它会有所帮助

Answer 4

检查以下代码。您的代码中缺少带有id =“response”的span或div，并将$ .post替换为jquery.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>

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

TypeError：Value未实现接口HTMLInputElement

5 个答案: