js获取容器innerHTML得到输入控件值

  如果输入控件放在容器里面,当然输入控件输入值后,获取容器的innerHTML时,标准浏览器如firefox,chrome时,innerHTML中input的html代码value属性是没有的,也没有包含输入的值。同理checkbox,radio,textarea也没有对应的值和checked属性,示例代码如下

js获取容器innerHTML得到输入控件值

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<div id="dv">text:<input type="text" /><br />
    radio:<input name="r" type="radio" checked />r1 <input name="r" type="radio" />r2<br />
    checkbox:<input type="checkbox" checked />c1 <input type="checkbox" />c2<br />
    select single:<select><option>1</option><option>2</option></select><br />
    select multiple:<select multiple size="2"><option>1</option><option>2</option><option>3</option></select><br />
    textarea:<textarea></textarea></div>
<input type="button" value="获取DIV容器innerHTML" onclick="getHTML()"/>
<script>
    function getHTML() {
        alert($('#dv').html())
    }
</script>

  解决办法就是遍历所有输入控件,重新设置过value属性。其他对象重置selected、checked属性等。。

js获取容器innerHTML得到输入控件值

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<div id="dv">text:<input type="text" /><br />
    radio:<input name="r" type="radio" checked />r1 <input name="r" type="radio" />r2<br />
    checkbox:<input type="checkbox" checked />c1 <input type="checkbox" />c2<br />
    select single:<select><option>1</option><option>2</option></select><br />
    select multiple:<select multiple size="2"><option>1</option><option>2</option><option>3</option></select><br />
    textarea:<textarea></textarea></div>
<input type="button" value="获取DIV容器innerHTML" onclick="getHTML()"/>
<script>
    function getHTML() {
        $('#dv :input').each(function () {
            ///////////获取容器innerHTML要想包含输入的值,需要设置过value属性。其他对象重置selected、checked属性
            switch (this.type) {
                case 'text': this.setAttribute('value', this.value); break;
                case 'checkbox':
                case 'radio':
                    if(this.checked)this.setAttribute('checked', 'checked');
                    else this.removeAttribute('checked');
                    break;
                case 'select-one':
                case 'select-multiple':
                    $(this).find('option').each(function () {
                        if(this.selected)this.setAttribute('selected', 'selected');
                        else this.removeAttribute('selected');
                    });
                    break;
                case 'textarea': this.innerHTML = this.value; break;
            }
        });
        alert($('#dv').html())
    }
</script>

 


原创文章,转载请注明出处:js获取容器innerHTML得到输入控件值

评论(0)Web开发网
阅读(103)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧