代码之家 › 专栏 › 技术社区 › ray

我可以用html()保存动态表单而不是通过INPUT迭代吗?

jquery javascript

ray · 技术社区 · 11 年前

我有一个动态创建的HTML页面,它添加了输入。

我希望能够使用html()函数捕获页面(以及所有表单输入值)。

不过,这似乎并不奏效。以以下页面为例:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready(function() {
        $( "#_create" ).click(function() {
            var myHtml = '<input class="my-input" val="">';
            $('#_input').html(myHtml);
        });
        $( "#_save" ).click(function() {
            alert($('#_masterDiv').html());

        });
        $( "#_saveIterate" ).click(function() {
            $("input").each(function(){
                alert(this.value);
            });
        });
    });
</script>
</head>
<body>
    <button id="_create">Create Dynamic Input</button><br>
    <button id="_save">Save by grabbing html</button><br>
    <button id="_saveIterate">Save by iterating</button><br>
    <div id="_masterDiv">
        <div id="_input">Input button here</div><br>
    </div>
</body>
</html>

单击“通过抓取html保存”可以获得表单,但不会获得值。单击“通过迭代保存”将获得输入的值。

在INPUT中获得最新的值之前,我是否需要调用类似“应用更改”的函数?

1 回复 | 直到 11 年前

WebNovice 11 年前

有些浏览器,如Firefox/Chrome,不会保存HTML输入值的当前状态。因此,您必须手动分配输入值:

$( document ).ready(function() {
        $( "#_create" ).click(function() {
            var myHtml = '<input class="my-input" value="">';
            $('#_input').html(myHtml);
        });
        $( "#_save" ).click(function() { 
         //if you have many input fields, loop through them all           
            $("input").each(function(){                
                //set the value manually
                this.setAttribute('value', this.value);                
            });            
            alert($('#_masterDiv').html());

        });
        $( "#_saveIterate" ).click(function() {
            $("input").each(function(){
                alert(this.value);
            });
        });
    });

这是jsfiddle链接: http://jsfiddle.net/urspz/1/