CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kowshik
Kowshik

Reputation: 73

Insert data in to the table and submit like a form

I need to create a table with two rows and three columns. 

<table border="1">
    <tr>
        <td>Male</td>
        <td>Female</td>
        <td>Total</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done. Thank You

Upvotes: 2

Views: 5300

Answers (4)

Murtaza Khursheed Hussain
Murtaza Khursheed Hussain

Reputation: 15336

if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.

 <form id="FormName" action="server.php">
    <table border = "1">
<tr> 
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>

<input type="button" value="Submit Data" onclick="submitForm()" />
</form>    

function submitForm(){
if(false)//check for errors
{

}else{

            $('#FormName').submit();

        }
}

Upvotes: 2

nexus_07
nexus_07

Reputation: 143

<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}

Upvotes: 1

codingbiz
codingbiz

Reputation: 26386

Create a form

<form name="myform" action="xxx.php">

  //create 3 hidden fields here

</form>

HTML

<table border = "1" id="mytable">
<tr> 
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

<input type="button" value="Submit Data" onclick="submitTableData()" />

On your button click, get the values of each td and assign it to the hidden fields and then call submit

function submitTableData()
{
   $('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
   $('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
   $('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()

   $('#myform').submit();
}

Upvotes: 1

GeorgeVremescu
GeorgeVremescu

Reputation: 1253

In the cells of the second row just put some inputs:

<tr>
    <td><input type="text" name="male"></td>
    <td><input type="text" name="female"></td>
    <td><input type="text" name="total"></td>
</tr>

When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.

You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.

Upvotes: 0

Related Questions