Humanity Expired Humanity Expired - 1 month ago 16
HTML Question

TextInput send text in new td

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

I need to put the second inputs in the second table row (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">

Age:<input type="text" size="30" id="age">

Gender: <input type="text" size="30" id="gender">


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



<table bgcolor ="black" border="2" cellspacing=1 align=center height="100" width="600">
<br>

<tr bgcolor = "black">

<th width=20 style="color:white;">Name</th>
<th width=20 style="color:white;">Lastname</th>
<th width=20 style="color:white;">Age</th>
<th width=20 style="color:white;">Gender</th>

</tr>
<tr>

<td style="color:white;" id=f1 > </td>
<td style="color:white;" id="no1"> </td>
<td style="color:white;" id="no2"> </td>
<td style="color:white;" id="no3" > </td>

</tr>


<tr>
<td style="color:white;" id="secondtd1"> </td>
<td style="color:white;" id="secondtd2"> </td>
<td style="color:white;" id="secondtd3"> </td>
<td style="color:white;" id="secondtd4"> </td>

<td> </td>
</tr>


</font>



</table>


My script

<script>
function ajax_post(){

var fn = document.getElementById("first_name").value;
var table = document.getElementById("f1");
table.innerText = fn;





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

var mid = document.getElementById("age").value;
var table2 = document.getElementById("no2");
table2.innerText = mid;

var fil = document.getElementById("gender").value;
var table3 = document.getElementById("no3");
table3.innerText = fil;

}
</script>


i have no idea how to do this .. :(

Answer

If you're looking for an example in plain Javascript, here you go. It uses Javascript's insertRow and insertCell.

Please keep in mind that this is not an "ajax_post" yet, you will still need to add an actual server request. You might also want to look into Javascript frameworks that handle this, and more, in a cleaner way.

function ajax_post(e) {
  // Prevent the form from actually submitting this.
  e.preventDefault();

  // Save all elements/values we need later in convenient variables.
  var table = document.getElementById("table");
  var firstname = document.getElementById("first_name").value;
  var lastname = document.getElementById("lastname").value;
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;

  // Insert a new row into our table at the position -1 (bottom).
  var row = table.insertRow(-1);
  
  // Insert 4 empty cells.
  var cell_firstname = row.insertCell(0);
  var cell_lastname = row.insertCell(1);
  var cell_age = row.insertCell(2);
  var cell_gender = row.insertCell(3);
  
  // Fill the empty cells with the data from the form.
  cell_firstname.innerHTML = firstname;
  cell_lastname.innerHTML = lastname;
  cell_age.innerHTML = age;
  cell_gender.innerHTML = gender;
}
<h1>INFORMATION</h1>

<form>
  Name: <input id="first_name" type="text"><br>
  LastName: <input type="text" id="lastname"><br>
  Age: <input type="text" id="age"><br>
  Gender: <input type="text" id="gender"><br>
  <input type="submit" value="Compute" onclick="ajax_post(event)">
</form>
<br>

<table bgcolor="black" style="color: white;" border="2" width="100%" id="table">
  <tr>
    <th>Name</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
</table>