Question

我有一个包含一些输入和组合框的表单。基于JQuery UI对话框，用户可以更改表单元素的名称或其他一些属性：

var targetEl = $('input[name="input_box_1"]'); //assume selected input name is "input_box_1"
targetEl.prop('name', $('#new_name').val());

这样可以正常工作，这样如果我将名称更改为其他内容并重新选择该元素，则会显示新名称问题是我希望在这些更改后得到整个表单的outerHTML，当我使用$('#my_custom_form').html()警告或打印整个表单时，它会显示输入和组合框的所有其他更改，除了它们的名称

这是来自alert($('#my_custom_form').html());

的内容

<TABLE>
<TR>
<TD><LABEL id=new_id_set name="new_name_set">Name:</LABEL></TD>
<TD><INPUT id=input_box_newID value= class="cstm_font1"></TD>
</TR>
</TABLE>

我期待的是

<TABLE>
<TR>
<TD><LABEL id=new_id_set name="new_name_set">Name:</LABEL></TD>
<TD><INPUT id=input_box_newID name="input_box_newName" value= class="cstm_font1"></TD>
</TR>
</TABLE>

有没有人知道如何使用输入名称通过jQuery或JavaScirpt获取完整的outerHTML？

提前致谢

Answer 1

您可以执行以下操作：

$('#input_box_newID').attr('name');

Javascript方法将是：

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
     var input = inputs[index];
/*
    input.value gives you the value
    input.id gives you the id
    input.name gives you the name
*/

}

希望这有帮助。

Answer 2

尝试

targetEl.attr('name', $('#new_name').val());

然后

alert($('#my_custom_form').html());

编辑：

http://jsfiddle.net/duq23/

From jQuery Docs:

“属性通常会影响DOM元素的动态状态，而不会更改序列化HTML属性。例如输入元素的value属性，输入和按钮的disabled属性，或复选框的checked属性。.prop（）方法应该用于设置disabled和checked而不是.attr（）方法。应该使用.val（）方法来获取和设置值。“

jQuery .html不显示元素名称

2 个答案: