Humanity Expired Humanity Expired - 10 months ago 44
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">

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


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


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



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


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

Answer Source

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.

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

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

<table bgcolor="black" style="color: white;" border="2" width="100%" id="table">