使用JavaScript修改HTML元素，当用户键入提交按钮一些输入和点击，我想输入的文字变得不创造新的元素

Question

我有下面一段代码

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

现在， - 可编辑，但文本应该仍然存在。另外，提交按钮应该消失。此外，在输入文本框下方，我想用提交按钮创建与原始输入文本类似的另一个输入文本。所以，这就像评论系统一样。任何想法如何使用JavaScript来做到这一点。

Answer 1

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


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

Example

Answer 2

一个非常简单的方法做，这是下面。然而，对于不引人注意的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 3

尝试jsFiddle

此解决方案，如果你将复制的内容一定要删除的ID。它们每页必须是唯一的。这里是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); 
    }); 
});