Блог

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

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

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

Ниже приведен очень простой способ сделать это. Однако для ненавязчивого 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>
  

Попробуйте это решение в 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);
  }); 
});
  

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


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

Пример