Humanity Expired Humanity Expired - 1 year ago 77
HTML Question

Input text field to td

Im making a website that the user will put its Name and LastName and it will send the text in the table data . My first inputs is showing in first table data

I need to put the second inputs in the second table data (can someone help me !) lol

<h1 align=center>INFORMATION</h1>
Name: <input id="first_name" size="30" type="text" action="document.getElementById(f1)">

LastName: <input type="text" size="30" id="lastname">

<button class="okok" name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">GO </button>

<table border="2" cellspacing=1 align=center height="100" width="600">
<tr bgcolor = "black">
<th width=20 style="color:white;">Name</th>
<th width=20 style="color:white;">Lastname</th>

<td style="color:white;" id=firstname> </td>
<td style="color:white;" id=firstlastname> </td>

<td style="color:white;" id="secondname"> </td>
<td style="color:white;" id="secondlastname"> </td>


My script

function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = document.getElementById("firstinput");
table.innerText = fn;

var pre = document.getElementById("lastname").value;
var table1 = document.getElementById("firstlastname");
table1.innerText = pre;


I have no idea how to get the second input and put it in secondname and secondlastname without creating a new cell !

Answer Source

OK then, from what you have and what you need I think this can do what you want to do.

But if you could use jQuery then we may had easier ways... (I have changed some 'ids' to simplify the code)


<h1 align="center">INFORMATION</h1>
Name: <input id="txtFirstname" type="text" size="30">
<br />
LastName: <input id="txtLastname" type="text" size="30">
<br />
<button class="okok" name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">GO </button>
<br />
<table border="2" cellspacing="1" align="center" height="100" width="600"> 
    <tr bgcolor="black">
        <th width="20" style="color:white;">Name</th>
        <th width="20" style="color:white;">Lastname</th>

        <td style="color:red;" id="tdFirstname1"> </td>
        <td style="color:red;" id="tdLastname1"> </td>

        <td style="color:red;" id="tdFirstname2"> </td>
        <td style="color:red;" id="tdLastname2"> </td>


First I get a JavaScript variable to indicate which row I'm writing the data and set it to 1:

var rowNum = 1;

and then comes your function with modification:

function ajax_post(){
  if(rowNum < 3){
    var txtFirstname = document.getElementById("txtFirstname").value;
    var txtLastname = document.getElementById("txtLastname").value;

    document.getElementById("tdFirstname"+rowNum).innerText = txtFirstname;
    document.getElementById("tdLastname"+rowNum).innerText = txtLastname;


also you can find a working fiddle here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download