How to store a html table data into MySQL database.
Sample Html code is given below. In original, there is about thousand form on the same page.
<thead>
<tr>
<th> Id</th>
<th>From area</th>
<th>To area</th>
<th>Basic price</th>
</tr>
</thead>
<form action="basicprice.php" method="get" name="basicprice">
<tr>
<td>4</td>
<td class="static">Address 1</td>
<td class="static">Airport 1</td>
<td class="center"><input type="text" name="basicprice" value="54"></td>
<td><input name="submit" type="submit" value="Save"></td>
</tr>
</form>
<form action="basicprice.php" method="get" name="basicprice">
<tr>
<td>4</td>
<td class="static">Address 1</td>
<td class="static">Airport 1</td>
<td class="center"><input type="text" name="basicprice" value="54"></td>
<td><input name="" type="submit" value="Save"></td>
</tr>
I want create a database from these details. Need Help.
Thanks in advance
Use only one form and add input feild name as array[]
<form action="basicprice.php" method="get" name="basicprice">
<tr>
<td>4</td>
<td class="static">Address 1</td>
<td class="static">Airport 1</td>
<td class="center"><input type="text" name="basicprice[]" ></td>
<td><input name="submit" type="submit" value="Save"></td>
</tr>
</form>
In this array you will get all values no need to write forms again and again.
Have a look on bellow link
"PHP - Insert data from HTML table into MySQL database" might give you some idea on how to make insert query using array elements
Related
I have an order form in a flask-based app. The form starts out with a single row for the user to fill out with the name of a product, etc.
Then there is an Add Item button which sends an htmx request. It can be used to add an indefinite number of additional rows.
Here is the code:
<table class="table" >
<thead class="thead-dark">
<tr>
<th>Product Name</th>
<th>Unit</th>
<th>Quantity</th>
</tr>
</thead>
<form autocomplete="off" action="/neworder" method="POST">
<tr>
<td><input type="text" name="product" ></td>
<td><input type="text" name="unit"></td>
<td><input type="text" name="number_of_units"></td>
</tr>
<tr hx-target="this">
<td><button type="button" hx-get="/adminorder" hx-swap="outerHTML" >Add Item</button></td>
</tr>
</tbody>
</table>
<p>Order Date: <input type="text" name="date"></p>
<input type="submit">
</form>
htmx returns this:
<tr>
<td><input type="text" name="product"></td>
<td><input type="text" name="unit"></td>
<td><input type="text" name="number_of_units" ></td>
</tr>
<tr hx-target="this">
<td><button type="button" hx-get="/adminorder" hx-swap="outerHTML" >Add Item</button></td>
</tr>
As you see, all the inputs in a column have the same name.
When the form is submitted, I want to use flask request to do this:
#app.route('/neworder', methods=["POST"])
def new_order():
...
order_date = request.form.get("date")
items = request.form.getlist("product")
return f'<html>{order_date} - {items}</html>'
However, the only thing that ends up in items is what was entered into the first row...
I tried starting out with more than one row, and then things worked as expected, so it must have something to do with the part of the code returned by htmx...
I don't think this is relevant (?) but the function used by hx-get looks simply like this:
#app.route('/adminorder')
def admin_order():
return render_template('adminorder.html')
Your HTML template is invalid, you should move the form opening tag outside of the table. I've also added a missing <tbody> tag.
<form autocomplete="off" action="/neworder" method="POST">
<table class="table" >
<thead class="thead-dark">
<tr>
<th>Product Name</th>
<th>Unit</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="product" ></td>
<td><input type="text" name="unit"></td>
<td><input type="text" name="number_of_units"></td>
</tr>
<tr hx-target="this">
<td><button type="button" hx-get="/adminorder" hx-swap="outerHTML" >Add Item</button></td>
</tr>
</tbody>
</table>
<p>Order Date: <input type="text" name="date"></p>
<input type="submit">
</form>
I need to create the template layout for the form with the input.
Should I use label tag or table tag? Which one would give the best output?
Please suggest.
They have nothing in common in your case.
Labels are used to "label" inputs with their explanation, like:
<div>
<label>Username:</label>
<input type="text" name="username" />
</div>
Tables are used to tabularize data.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
</tbody>
</table>
This approach is obsolete and NOT RECOMMENDED.
You can always use both if you wish, but there's better ways to position elements in a page.
<table>
<thead>
<tr>
<th>Username Input</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>Username:</label>
<input type="text" name="username" />
</td>
</tr>
</tbody>
</table>
I'm creating a login form. Here's what I created:
<form action="loginform.php" method="POST" name="LoginForm">
<table border="1">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username"></td>
<td colspan="2" align="center"><input type="submit" name="login"value="LOGIN!"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td rowspan="4" align="center">Register!</td>
</tr>
</table>
As you can see, my code fails to make the "LOGIN!" button align in the center in between the username and password alignment. I already used the colspan tag for it, but doesn't seem to work. What needs to be done here?
Also, I want the "Register!" link to align on the farthest right side of the table. How do I go about doing that? Thanks in advance.
Please note that tables should be used for tabular data only, but your table has some very odd row and colspans - your first row has 5 columns, second 4 and third 1 (with a rowspan of 4, even though you only have 3 rows)
I think you have got your rows and columns mixed up - try changing the rowspan to colspan and vice vera but changing the colspan to 5:
<table border="1">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username"></td>
<td rowspan="2" align="center"><input type="submit" name="login"value="LOGIN!"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td colspan="5" align="center">Register!</td>
</tr>
</table>
Example
Try using text-align: center and text-align: right
I'm using bootstrap (link) on my site, but i'm a little bit confused about the using of tables. Before bootraps all my table TD cells had dynamic widths, so the TD had a bigger width if the content was a long sentence and smaller if it was only a 11 character long text input. But right now all my TD elements has the same width and I can't find the way, how to change this...
This is my table:
<table id="table1" style="padding-top:10px;">
<tr>
<td colspan="6" style="text-align:center;">TITLE</td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">SUBTITLE 1</td>
<td colspan="3" style="text-align:center;">SUBTITLE 2</td>
</tr>
<tr>
<td style="text-align:left;"><b>A.</b></td>
<td>Data title 1</td>
<td><input type="text" maxlength="11" size="11" name="input_a"></td>
<td style="text-align:left;"><b>D.</b></td>
<td>Data title 2</td>
<td><input type="text" maxlength="11" size="11" name="input_b"></td>
</tr>
...
</table>
So I want to have the "Data title X" cell have bigger width as the cell which has the input text field smaller. If I give them manually the style="width:xyzpx;" attribute it didn't change anything.
Can it be done somehow?
try to use the the span1, span2... span12 classes on table elements (or whereever needed, e.g. inputs):
<table id="table1">
<thead>
<tr>
<th colspan="6">TITLE</th>
</tr>
<tr>
<th colspan="3">SUBTITLE 1</th>
<th colspan="3">SUBTITLE 2</th>
</tr>
</thead>
<tr>
<td class='span1'><b>A.</b>
</td>
<td class='span4'>Data title 1</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_a" class="span1" />
</td>
<td class='span1'><b>D.</b>
</td>
<td class='span4'>Data title 2</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_b" class="span1" />
</td>
</tr>
</table>
here is the jsFiddle
ps: there is col- (col-4, col-lg-4...) class prefix in bootstrap3
Using <td width="10%"> works for me on Twitter bootstrap. Or you could add a class to the td and set the width in your stylesheet td.column{ width: 10% !important;}
Also you might want to make your tables like below for a more valid markup:
<table>
<thead>
<tr>
<td>Title 1</td>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
Add the width properties to the <tr> with all 6 <td> elements.
Edit: The selected answer contains a link to the working fiddle I was able to compose without the use of a nested table.
I want to semantically code a table in HTML with a layout like the picture below. Unfortunately I haven't been able to find anything quite like it here on the network.
I have been able to force the look by manually setting cell widths, but I want to make sure the code I'm producing makes sense, and I don't think that's the case, because without manually setting the widths, standard rendering looks more like the following picture.
So far, the problematic code I have come up with looks like this:
<table>
<thead>
<tr>
<th scope="col">Type of Loss Dollar</th>
<th scope="col">Reserve Amount</th>
<th scope="col">Paid Amount</th>
<th scope="col">Total This Loss</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<th scope="row">Medical</th>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr><tr>
<th scope="row">Indemnity</th>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr><tr>
<th scope="row">Expense</th>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
</td><td>
TOTAL
</td>
</tr>
</tbody>
</table>
Without the images it's a bit hard to say, but I think a better solution than nested tables would be to simply use the colspan and rowspan attributes.
Edit: Seeing the images I'd say you can most definitely achieve that using rowspan (and colspan the way you're using it already).
Also, you don't need to set the scope attribute if it's "col". It defaults to "col".
Edit: As Marat Tanalin points out the scope attribute's default value is actually auto which "makes the header cell apply to a set of cells selected based on context". And which in my experience acts exactly the same as setting it to "col" (for screenreaders).
Edit: Here are two great articles on marking up advanced tables: http://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/ & http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
Edit: Here is the fiddle exhibiting desired behavior (visually at least) and the source code of that fiddle follows:
<table border="1">
<thead>
<tr>
<th>Status</th>
<th>Type of Loss Dollar</th>
<th>Reserve Amount</th>
<th>Paid Amount</th>
<th>Total This Loss</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Open</td>
<td>Medical</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td rowspan="3">TOTAL</td>
</tr><tr>
<td>Indemnity</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr><tr>
<td>Expense</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
yep, as all the peeps above suggested, it's all about the rowspan.
here's a re-write of your code:
<table>
<thead>
<tr>
<th>Type of Loss Dollar</th>
<th>Reserve Amount</th>
<th>Paid Amount</th>
<th>Total This Loss</th>
<th>Last Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3"></td>
<td>Medical</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td rowspan="3">TOTAL</td>
</tr><tr>
<td>Indemnity</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr><tr>
<td>Expense</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>