Question

我有一个问题，我们需要进行表单填写，其中必须包含用户名，名字，姓氏和性别，我应该怎样做才能在按下a后在表格中显示输入的值按钮？

<html>
<head>

<script>
function myfunction() {
var fn = document.form1.firstname;
var ln = document.form1.lastname;
var un= document.form1.unsername;
var g = document.form1.gender;

first = first + fn.getElementById("firstname").value;
last = last + ln.getElementById("lastname").value;
user = user + un.getElementById("username").value;
gend= gend + g.getElementById("gender").value;

document.getElementById("displayhere").innerHTML;
}
</script>

</head>

<body>
<form id="formname">
first name: <input type="text" id="firstname">
last name: <input type="text" id="lastname">
gender: <input type="text" id="gender">
username: <input type="text" id="username">
<button onclick="myfunction()">Send</button>
</form>

Details:

<table>
<tr><td><p id="displayhere"></p></td></tr>
</table>
</body>
</html>

Answer 1

为每个输入字段分配rel属性。在其中，给出要在其中插入该输入字段值的td元素的id。例如，在您的表单中，执行以下操作：

<input type="text" id="firstname" rel="#firstname_td">

并在您的表格中执行此操作：

<tr>
<td id="firstname_td">

现在，使用jquery，在该按钮的click事件上（比如'my_button'），调用它：

$('#my_button').on("click",function()
{
 $("input[type=text]").each(function()
{
 id=$(this).attr('id');
 $(id).text($(this).val())
});
});

Answer 2

<form>
first name: <input type="text" name="firstname"><br/>
last name: <input type="text" name="lastname"><br/>
gender: <input type="text" name="gender"><br/>
username: <input type="text" name="username"><br/>
<button onclick="return show(this.form)">Send</button>
</form>

Details:

<table>
<tr><td><p id="displayhere"></p></td></tr>
</table>
<script>
function show(frm) {
   var str = "";
    str += "First Name : " + frm.firstname.value + "<br/>";
    str += "Last Name : " + frm.lastname.value + "<br/>";
    str += "Gender : " + frm.gender.value + "<br/>";
    str += "Username : " + frm.username.value + "<br/>";
    document.getElementById('displayhere').innerHTML = str
   return false;
}
</script>

Answer 3

首先更改您的性别和用户名ID，然后创建一个javascript函数，并从每个文本框中获取值，使用innerHTML属性将其附加到p标记

first name: <input type="text" id="firstname">
last name: <input type="text" id="lastname">
gender: <input type="text" id="gender">
username: <input type="text" id="username">
<button onclick="function1()">Send</button>

Details:

<table>
<tr><td><p id="displayhere"></p></td></tr>
</table>
<script>
function function1(){

        var firstname=document.getElementById("firstname").value;
        var lastname=document.getElementById("lastname").value;
        var gender=document.getElementById("gender").value;
        var username=document.getElementById("username").value;
        var result="First Name: "+firstname+"<br>Last Name:"+lastname+"<br>Gender : "+gender+"<br>User Name:"+username
        document.getElementById("displayhere").innerHTML=result;
    }

    </script>

如何在表格中显示填写表格的答案？

3 个答案: