Использование JavaScript для изменения HTML-элемента и создания нового элемента

Question

У меня есть фрагмент кода ниже

<input type="text" />
<button> Submit </button>

Теперь, когда пользователь вводит некоторые данные и нажимает кнопку отправки, я хочу, чтобы вводимый текст стал недоступным для редактирования, но текст все еще должен быть там. Также кнопка отправки должна исчезнуть. Кроме того, под текстовым полем ввода я хочу создать еще один текст ввода, аналогичный исходному, с кнопкой отправки. Итак, это нечто вроде системы комментирования. Любая идея о том, как сделать это с помощью JavaScript.

Answer 1

Очень простой способ сделать это ниже.Однако для ненавязчивого Javascript вы должны привязать событие onclick к кнопке программно.Или, что еще лучше, используйте jQuery, который всегда абстрагирует события, поэтому мы так любим его.

 <script>
 function disableInput() {
  document.getElementById("foo").disabled = true;
  document.getElementById("bar").style.display = "none";
 }
 </script>

<input id="foo" type="text" value="Some Text" />
<button id="bar" onclick="disableInput();"> Submit </button>

Answer 2

Попробуйте это решение на jsFiddle

Если вы будете дублировать контент, обязательно удалите идентификаторы.Они должны быть уникальными для каждой страницы.Вот HTML:

<p class="comment">
  <input type="text" value="Initial Text" />
  <button>Submit</button>
</p>

Используя jQuery, мы связываемся со всеми будущими кнопками, используя live.Когда кнопка нажата, клонируйте строку, отключите поле и удалите кнопку.Наконец, снова вставьте клонированный абзац после этого:

// Execute when document is ready
$(function() {
  // Bind click handler to all current and future button elements
  $('.comment button').live('click', function() {
    // Find the paragraph this button is in and clone it
    var p = $(this).closest('p'), 
        row = p.clone();

    // Disable text field
    $(this).prev().attr('disabled',true);

    // Hide submit button for this row
    $(this).hide();

    // Insert a new field/button pair below this one
    p.after(row);
  }); 
});

Answer 3

<input type="text" />
<button> Submit </button>


$('button').click(function() {
    $(this).hide();
    $('input').prop('disabled', true);
})

Пример