how to display answers of form fill in inside a table?

Question

I have a question, we were required to do a form fill in which must contain a user name, first name, last name, and gender, what should i do for the inputted values to be displayed inside a table after pressing a button?

<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>

what have you tried to do? - note: you have repeated `id`'s attributes, which is not allowed — Fabrizio Calderan, Mar 07 '14 at 10:58
see http://stackoverflow.com/questions/14643617/create-table-using-javascript — TastySpaceApple, Mar 07 '14 at 11:11

score 0 · Answer 1 · answered Mar 07 '14 at 11:04

Assign a rel attribute to each of the input fields. In that, give the id of the td element in which you want the value of that input field to be inserted. For example, in your form, do this:

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

and in your table, do this:

<tr>
<td id="firstname_td">

Now, using jquery, on click event of that button (say, 'my_button'), call this:

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

score 0 · Accepted Answer · answered Mar 07 '14 at 11:06

<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>

I would also like an alert to happen whenever the inputted for the gender is anything except f or m (I only want them to input f or m and if they input let's say 'a', then an alert message will show and not display the gender until the input is correct) what should I add in the code you have given for it to happen? — user3359630, Mar 07 '14 at 11:40

score 0 · Answer 3 · answered Mar 07 '14 at 11:06

First chnage your id of gender and user name then Create a javascript function and get values from each text box append it to the p tag uisng innerHTML property

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>

how to display answers of form fill in inside a table?

3 Answers3