javascript - 如何使用jquery在输入字段的一行中创建多个显示

Question

我想使用按钮 onclick 或在 jquery 中显示的任何其他方法在各个 div id 中创建所有输入的显示。请指导我。在这里，我只能创建 onkeypress 事件。

function tkpreview(){
var a = document.getElementById("inp1").value;
document.getElementById("di1").innerHTML = a;

var b = document.getElementById("inp2").value;
document.getElementById("di2").innerHTML = b;

var c = document.getElementById("inp3").value;
document.getElementById("di3").innerHTML = c;

var d = document.getElementById("inp4").value;
document.getElementById("di4").innerHTML = d;

}

<form>
<h3> display preview of my form</h3>
<div id="" class="">
    <label for="inp1">First Name</label>
    <input type="text" id="inp1" class="myinp" onkeypress="tkpreview()" required/>
    
    <label for="inp2">Last Name</label>
    <input type="text" id="inp2" class="myinp" onkeypress="tkpreview()" required/>
    <br> <br>
    <label for="inp3">Email</label>
    <input type="text" id="inp3" class="myinp" onkeypress="tkpreview()" required/>
    
    <label for="inp4">Contact</label>
    <input type="text" id="inp4" class="myinp" onkeypress="tkpreview()" required/>
    <br> <br>
    <button type="Submit" id="btn_1" value="" onclick="tkpreview()">Submit</button>
</div>
</form>
<form>
<div id="di1" class="mydiv"></div>
<div id="di2" class="mydiv"></div>
<div id="di3" class="mydiv"></div>
<div id="di4" class="mydiv"></div>
</form>

标签： javascriptjquery

Answer 1

尝试这个

<script>
   $(document).ready(function(){
      $("#btn_1").click(function(){
        $("#di1").text($("#inp1").val());
        $("#di2").text($("#inp2").val());
        $("#di3").text($("#inp3").val());
        $("#di4").text($("#inp4").val());
      });
   });
</script>