jQuery表单元素访问

Question

我是jquery新手，并尝试执行以下操作：

我有一个表格：

<form method="POST" class="add-product" >
...
<label name="message"></label>
...
</form>

和脚本：

$(document).ready(function() {
$(".add-product").submit(function(e) {
    e.preventDefault();
    var form = this;
    $.ajax({
        type: "POST",
        url: "/product/add/",
        data: $(this).serialize(),
        success: function(data) {
            $(form.elements["message"]).html(data.message);
        }
    });
});

}）;

我正在尝试使用消息更新标签，但是它不起作用。 似乎我在语法上有一些错误：

$(form.elements["message"]).html(data.message);

Answer 1

问题是因为label没有出现在form.elements集合中。 相反，您需要直接选择它：

 $(".add-product").submit(function(e) { e.preventDefault(); var form = this; // inside the AJAX callback... var data = { message: 'Foo bar' } $(form).find('label[name="message"]').html(data.message); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="POST" class="add-product"> <label name="message"></label> <button>Submit</button> </form> 

Answer 2

尝试使用选择器：

$("form.add-product label[name='message']").html(data.message)

您可以在此处阅读有关jQuery属性选择器的更多信息。 https://api.jquery.com/attribute-equals-selector/

如果您的页面上有多个标签，且标签的属性name='message'则上述标签将无效。

Answer 3

您使用了错误的jquery选择器，请尝试：

$('label[name="message"]').html(data.message);

希望有帮助