чтение innerHTML HTML-формы с атрибутом VALUE (и его значением) тегов INPUT - PullRequest
Новая
       14

чтение innerHTML HTML-формы с атрибутом VALUE (и его значением) тегов INPUT

7 голосов
/ 29 сентября 2011

У меня есть html form с некоторыми полями ввода.

Вместо чтения и отправки значений полей input с помощью document.ipForm.userName.value мне нужно отправить весь html-контент в html-анализатор и извлечь пару <name ,value> каждого поля ввода другой программой (и другая информация тоже).

Но когда я сделал это в JavaScript (я хочу чистый JavaScript, а не другую библиотеку) 

var contents=document.getElementById("formArea").innerHTML;
alert(contents);

В нем не отображаются value="enteredValue" из <input/> полейдаже если я ввел некоторые значения.

Мой HTML-файл: 

<html>
<head>
    <script type="text/javascript">
    function showInnerHtml(){
        var contents=document.getElementById("formArea").innerHTML;
        alert(contents);
    }
    </script>
</head>
<body>
    <div id="formArea">
        <form name="ipForm" >
          UserName : <input type="text" name="userName"> 
        </form>
    </div>
    <div> other contents.....   </div>
    <div onclick="showInnerHtml()">Show InnerHTML</div>
</body>
</html>

Я что-то здесь упускаю или это невозможно.

Не называйте меня СУМАШКИ.но я борюсь с этим странным состоянием.

Ответы [ 2 ]

13 голосов
/ 29 сентября 2011

Это потому, что value - это свойство, когда текстовое поле заполнено, а не атрибут. Это означает, что .value работает нормально, но это не часть фактического DOM как атрибут (например, <input value="...">).

Вам нужно установить его явно: http://jsfiddle.net/BkjhZ/.

var elems = document.getElementsByName("ipForm")[0].getElementsByTagName("input");

for(var i = 0; i < elems.length; i++) {
    // set attribute to property value
    elems[i].setAttribute("value", elems[i].value);
}
0 голосов
/ 23 ноября 2015

Вы также можете написать ввод, который сам изменит свой атрибут, например: 

(...)

UserName : <input type="text" name="userName" onChange="this.setAttribute('value', this.value);">

И для флажков: 

onClick="if (this.checked) { this.setAttribute('checked', null); } else { this.removeAttribute('checked'); }"

Наслаждайтесь:)

...