I have table and I would like to put my td's under th tags. Here is my HTML code:
<table>
<tr>
<th>Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th>Job Category</th>
//I need break line here
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
My output gives me text in <th> tags and then text in <td> tags next to it. I would like to have td content below th. I tried to use <br> tags but looks like that does not work outside of td tags. If anyone know the best and way to fix this please let me know.
You are creating a table and nothing can be put outside the table cells. If you want to have the forms element under the headers, just create one row with headers and one row with forms elements:
<table>
<tr>
<th>Your Email</th>
<th>Job Category</th>
</tr>
<tr>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
Put your table header in its own row:
<table>
<tr>
<th scope="row">Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th colspan="2">Job Category</th>
</tr>
<tr>
//I need break line here
<td colspan="2">
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
</tr>
</table>
Place them in different rows using
<table>
<tr>
<th scope="row">Your Email</th>
<td>
<input type="text" name="userEmail" value="" id="userEmail" required="">
</td>
</tr>
<tr>
<th>Job Category</th>
</tr>//End row
//I need break line here
<tr> //start new row
<td>
<label><input type="radio" name="rd1" value="Programmer" id="rd1">Programmer</label><br>
<label><input type="radio" name="rd2" value="Web Developer" id="rd2">Web Developer</label><br>
</td>
<tr>
</table>
Related
I've been stuck for hours on a problem that might be actually simple but I can't manage to find the solution.
To be short, I want to know the index (ie the first / the second / the third etc...) of a checkbox when clicking on it.
Here's the jsfiddle showing what's currently working and what is not. I've tried many things but couldn't find the solution I'm looking for.
https://jsfiddle.net/cpydwqk3/2/ <div>(this example applies only for the class "admin" which applies herself on the checkbox "admin").
function usermodif(identifiant) {
alert($('.admin').index(this)); //return -1
}
$("tr").click(function() {
alert($("tr").index(this)); //work but applies on whole line
});
<table>
<caption>Utilisateurs</caption>
<tr>
<th scope="col">pseudo</th>
<th scope="col">points</th>
<th scope="col">points_session</th>
<th scope="col">admin</th>
<th scope="col">banni</th>
</tr>
<tr>
<th scope="row">firstguy</th>
<td><input type="text" name="points" value="45" id="points"></td>
<td><input type="text" name="points_session" value="6" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin" onclick="usermodif(this.className)"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
<tr>
<th scope="row">Nico</th>
<td><input type="text" name="points" value="21" id="points"></td>
<td><input type="text" name="points_session" value="21" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin" onclick="usermodif(this.className)" checked> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
<tr>
<th scope="row">anonyme</th>
<td><input type="text" name="points" value="0" id="points"></td>
<td><input type="text" name="points_session" value="0" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin" onclick="usermodif(this.className)"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Thanks in advance guys!
Traverse first tp the closest TR. Than get that closest TR index.
TR has an index amongst TBODY TRs, but not the checkbox.
Also, never use inline JavaScript on* attributes, same as you hopefully don't use inline style attributes. JS and CSS should be in one place only, and that's their respective files or tags.
$(".admin").on("click", function() {
const $par = $(this).closest("tr");
alert($par.index());
});
<table>
<tr>
<th scope="row">firstguy</th>
<td><input type="text" name="points" value="45" id="points"></td>
<td><input type="text" name="points_session" value="6" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
<tr>
<th scope="row">firstguy</th>
<td><input type="text" name="points" value="45" id="points"></td>
<td><input type="text" name="points_session" value="6" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
In HTML I am making a form where there are 2 tables side by side. In one table all the form <label>/Name/E Mail/Password</label> and in another table I am trying to put the form <inputs> text/email/password to make them look nicely visible.
But when I gave the label Message and <textarea name="Message" rows="1" cols="30"></text area> my whole form layout is getting disturbed due to which I am not able keep my initial labels and inputs aligned.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<table>
<tr>
<td>
<label>Name</label>
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
When the labels and inputs are aligned
When the labels and inputs are not aligned
There is no need for the extra table inside of the table, and you are including everything inside of 1 row, which is why its formatted like that.
You shouldn't be using tables for this, not when you have things like CSS Flexbox and CSS Grid. Here is a basic example of using flexbox with a form.
But if you must use a table, try a table format like this ...
<table>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
...
</table>
Here is an example using your code.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<label>Name</label>
</td>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</form>
I have a table where the user can enter some values and transmit these inputs to my backend via a POST request.
Each row consists of a type, brand and some input fields like buyprice, bottom, top, and stop.
For the purpose that I can connect the input data with the backend data it is important to get the information about the brand which is unique in each row.
Because of that I implemented a hidden input field that the necessary pre-defined value.
But when I check my backend, I only receive the data about buyprice, bottom, top and stop. But nothing about the brand.
Here the relevant passage:
<td th:text="${car.getBrand()}">
<input type="text" name="brand" th:value="${car.getBrand()}" hidden>
</td>
Here the complete table (I use thymleaf as a template-engine)
<div class="container">
<br>
<h4 style="text-align: center">Please specify below</h4>
<br>
<form method="POST">
<table id="buyTable" class="table table-hover">
<thead>
<tr>
<th>Type</th>
<th scope="col">Brand</th>
<th scope="col">Buy-Price</th>
<th scope="col">Bottom</th>
<th scope="col">Top</th>
<th scope="col">Stop</th>
<th>Reduce</th>
<th>Start</th>
</tr>
</thead>
<tbody>
<tr th:each="car : ${cars}">
<td>
<select th:id="${car.getBrand()}" title="selectBuyOrSell" onchange="updateBuyTable(this)">>
<option value="buy">Buy</option>
<option value="sell">Sell</option>
</select>
</td>
<td th:text="${car.getBrand()}">
<input type="hidden" name="brand" th:value="${car.getBrand()}">
</td>
<td><input type="number" step="0.00000001" placeholder="Enter price" name="buyPrice" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter bottom" name="bottom" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter top" name="top" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter stop" name="stop" /></td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxReduce" type="checkbox" class="custom-control-input"
onclick="handleClickOnStart(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxStart" type="checkbox" class="custom-control-input"
onclick="handleClickOnReduce(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<!-- <td><input id="clickboxReduce" type="checkbox"></td>
<td><input id="clickboxStart" type="checkbox"></td>-->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a style="float:right">Select all</a></td>
<td style="text-align:center"><input type="checkbox" onclick="checkReduce(this)" checked></td>
<td style="text-align:center"><input type="checkbox" onclick="checkInstant(this)" checked></td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button style="float: right!important;" class="btn btn-outline-primary">Continue</button>
<br/>
<br/>
<br/>
<table id="sellTable" class="table table-hover" hidden="true">
<thead>
<tr>
<th>Type</th>
<th>Brand</th>
<th scope="col">Sell-Price</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
</div>
So it is actually only about getting the brand. Any idea?
Thank you
I figured out that th:text="${car.getBrand()}" within the td tag was overriding the hidden input-field.
So the solution is an a tag and a hidden input within the td tag.
<td>
<a th:text="${car.getBrand()}"></a>
<input type="hidden" name="brand" th:value="${car.getBrand()}"/>
</td>
This seems (and should be) simple, but I have no idea why the values for my radio buttons appear empty
<!DOCTYPE html>
<html>
<body>
<form method="post" action="action_page.php">
<table>
<tr>
<th>Intermediate</th><th>Advanced</th><th>No selection</th>
</tr>
<tr>
<td colspan="3">
<label for="td1">1. Bash</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td1" id="td1" value="BashInter"/>
</td>
<td><input type="radio" name="td1" value="BashAdv"/>
</td>
<td><input type="radio" name="td1" value="" /></td>
</tr><tr>
<td colspan="3">
<label for="td1">2. C</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td2" id="td2" value="CInter"/>
</td>
<td><input type="radio" name="td2" value="CAdv"/>
</td>
<td><input type="radio" name="td2" value="" /></td>
</tr><tr>
<td colspan="3">
<label for="td1">3. C++</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td3" id="td3" value="C++Inter"/>
</td>
<td><input type="radio" name="td3" value="C++Adv"/>
</td>
<td><input type="radio" name="td3" value="" /></td>
</tr></table>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
</html>
If run on W3Schools' (ugh) server, it correctly outputs the input.
e.g.
td1=BashInter&td2=CAdv&td3=
However, my server, for print_r($_POST); returns
[td1] => [td2] => [td3] =>
regardless of what is selected.
Looking at the HTTP headers confirms that nothing is being sent.
All other aspects of the form correctly send their values.
I have tried a number of variants in relation to the values, but nothing has altered the fact that no data actually appears to be sent by the radio buttons.
You didn't specified that your form must be send as a POST one, so used method is defaulted to GET.
Try with
<form action="action_page.php" method="POST">
Last radio button of every set has been kept empty and has black value.
Which means <input type="radio" name="td3" value="" /> needs to be replaced with <input type="radio" name="td3" value="Some value 3" />
So in case you are selecting last radio button from every set then obviously it wont return anything.
Apart from this there is not other problem as long as your HTML code is concerned. If you still face any problem please upload your PHP code as well.
I also suggest to give some some meaningful label to each radio.
Here is the code you may try
<!DOCTYPE html>
<html>
<body>
<form method="POST" action="action_page.php">
<table>
<tr>
<th>Intermediate</th><th>Advanced</th><th>No selection</th>
</tr>
<tr>
<td colspan="3">
<label for="td1">1. Bash</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td1" id="td1" value="BashInter"/> BashInter
</td>
<td><input type="radio" name="td1" value="BashAdv"/> BashAdv
</td>
<td><input type="radio" name="td1" value="Some value 1" /> Some value 1</td>
</tr><tr>
<td colspan="3">
<label for="td1">2. C</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td2" id="td2" value="CInter"/> CInter
</td>
<td><input type="radio" name="td2" value="CAdv"/> CAdv
</td>
<td><input type="radio" name="td2" value="Some value 2" /> Some value 2</td>
</tr><tr>
<td colspan="3">
<label for="td1">3. C++</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td3" id="td3" value="C++Inter"/> C++Inter
</td>
<td><input type="radio" name="td3" value="C++Adv"/> C++Adv
</td>
<td><input type="radio" name="td3" value="Some value 3" /> Some value 3</td>
</tr></table>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
</html>
<table>
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table> Test Text
Normally, the text 'Test Text' will be pushed to the next line. Is it possible to keep the 'Test Text' text on the same line as the table?
Just in case someone needs the reverse:
Some text <table style="display:inline-table">
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>
<table style="width: 250px;float: left;">
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>
Some text
<div>
<div style="width: 70%;float:left">
<table>
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>
</div>
<div style="width:30%"> Test Text</div>
</div>
Let me know if this works... Change the percentage to whatever fits for you
http://jsfiddle.net/ARMRh/
You can try this. You might want to check for browser compatibility though.
<html>
<body>
<table style="display: inline;">
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>test
</body>
</html>