Как изменить HTML атрибута значения для поля ввода?

Question

Что я хочу сделать, это изменить "значение =" текстового поля ввода, используя jQuery . Конечная цель - получить форму с помощью .html (), чтобы у меня был весь код, а также значения, введенные в поля ввода.

В качестве примера у меня есть это:

<span id="example">
<input type="text" value="" id="rate" />
</span>

Если пользователь вводит в поле ввода, я могу сохранить данные, используя .val, но я хочу захватить HTML, чтобы я мог снова отобразить поле ввода со значением.

Если пользователь вводит «bob» во ввод. Тогда я использую:

var test = $('#example').html();

Переменная 'test' содержит следующее:

<input type="text" value="" id="rate" />

То, что я хочу, это:

<input type="text" value="bob" id="rate" />

Как мне этого добиться?

Answer 1

Конечная цель - получить форму с помощью .html (), чтобы у меня был весь код, а также значения, введенные в поля ввода.

Вы проиграли с этой стратегией. Значения формы - это отдельный слой данных, который хранится отдельно от атрибутов HTML. Атрибут HTML value отражается в свойстве defaultValue объекта, не , свойство value.

Установка значения или отмеченного / выбранного элемента управления формы не изменяет атрибуты HTML DOM; следовательно, сериализация формы с использованием innerHTML или html() не даст вам значений формы - за исключением IE, из-за ошибки.

(И в IE есть и другие ошибки, связанные с сериализацией форм с измененными именами. Просто избегайте использования сериализации; запоминание самих значений из value или val() гораздо надежнее.)

Answer 2

Я считаю этот вопрос дубликатом: SO138893: jQuery html () в Firefox (использует .innerHTML) игнорирует изменения DOM . Ответ там должен решить вашу проблему. Я не думаю, что этот новый вопрос должен быть удален, хотя - он может помочь кому-то найти свой путь к другому.

Answer 3

Как насчет того, чтобы не сохранять фактический HTML, а сохранять атрибуты?

var attr = {
'value' : $('#rate').val(),
'type' : $('#rate').attr('type') }
//later on in the code or something:
var inp = $('<input />').attr('id', 'rate').attr(attr);

Answer 4

Я проверил ваш код и он работает нормально. Единственное, чего не хватает, - это типа входных данных. Вы можете попробовать следующие вещи

$('#example')[0].innerHTML

И второй это

$("#rate")[0].outerHTML

Надеюсь, это поможет.

Answer 5

Чтобы изменить значение элемента ввода с идентификатором, вы можете использовать это.

$("#rate").val(newvalue);

Для установки значения bob используйте

$("#rate").val("bob");