Problem is: I have form with radio buttons in it. One radio button checked as default. When I check another one and push apply button i have $_POST with duplicated properties but different values:
country: 55
country: 72
second one is previous checked value. Expected only one propertie.
I can't understand why this happens.
<div id="countries">
<table>
<tr>
<td>
<input name="country" type="radio" value="14" id="country_14" checked="checked"/> <label for="country_14">Austria</label>
</td>
<td>
<input name="country" type="radio" value="117" id="country_117"/> <label for="country_117">Latvia</label>
</td>
</tr>
<tr>
<td>
<input name="country" type="radio" value="21" id="country_21"/> <label for="country_21">Belgium</label>
</td>
<td>
<input name="country" type="radio" value="123" id="country_123"/> <label for="country_123">Lithuania</label>
</td>
</tr>
<tr>
<td nowrap>
<input name="country" type="radio" value="33" id="country_33"/> <label for="country_33">Bulgaria</label>
</td>
<td nowrap>
<input name="country" type="radio" value="124" id="country_124"/> <label for="country_124">Luxembourg</label>
</td>
</tr>
</table>
</div>
probably the POST was an array POST, like:
<form action="." method="POST">
<input value="val1" name="name[0]">
<input value="val2" name="name[1]">
<input type="sumbit" value="Submit">
</form>
Related
I need your help. Here is my screenshot.
Screenshot here.
I am having trouble looking for a solution, the case is this. When the user types in the sprinkler duty requirement textbox L/MIN. I should have a code that will search in my table for the nearest value of that label and will show check marks on labels.
Here is my html code for sprinkler duty:
<div class="row g-0" id="chartNine" style="display:none;">
<h4 class="card-title">TOWN'S MAIN FED - SPRINKLER ANNUBAR FLOW TEST</h4>
<table id="dataTable2">
<thead>
<tr>
<th style="width: 750px;">SPRINKLER DUTY REQUIREMENT/S</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label></label>
<input type="text6" class="randomColor" value="0" />
<label> L/MIN # </label>
<input type="text6" value="0" />
<label> KPA </label>
</td>
</tr>
</tbody>
</table>
<button onclick="addTable('dataTable2');">+</button>
<br>
and here is my code for the labels:
<tr>
<td>
<label>
0
</label>
</td>
<td>
<label id="dnValue0" style="display:none;">0.00</label>
<label id="dnValue1" style="display:none;">0.00</label>
<label id="dnValue2" style="display:none;">0.00</label>
<label id="dnValue3" style="display:none;">0.00</label>
<label id="dnValue4" style="display:none;">0.00</label>
<label id="dnValue5" style="display:none;">0.00</label>
<label id="dnValue6" style="display:none;">0.00</label>
</td>
<td>
<input type="text3" value="0" />
</td>
</tr>
<tr>
<td>
<label>
1
</label>
</td>
<td>
<label id="dnValue7" style="display:none;">220.77</label>
<label id="dnValue8" style="display:none;">359.46</label>
<label id="dnValue9" style="display:none;">534.13</label>
<label id="dnValue10" style="display:none;">710.70</label>
<label id="dnValue11" style="display:none;">914.45</label>
<label id="dnValue12" style="display:none;">1385.27</label>
<label id="dnValue13" style="display:none;">2084.30</label>
</td>
<td>
<input type="text3" value="0" />
</td>
</tr>
Thank you, guys!
I'd like to add label on my website using Thymeleaf fields, too.
I wrote the following code:
<form id="newFoo" action="#" th:action="#{'/save'}" th:object="${foo}"
method="post" autocomplete="off">
<table>
<tr>
<td> <label for="name" form="newFoo">Name</label></td>
<td>
<input id="name" type="text" th:field="*{name}" required="required">
</td>
</tr>
<tr>
<td> <label for="gender" form="newFoo">Gender</label> </td>
<td>
<select id="gender" th:field="*{gender}" required="required">
<option th:each="g : ${genders}"
th:value="${g.id}" th:text="${g.name}" ></option>
</select>
</td>
</tr>
<tr>
<td> <label for="birthday" form="newFoo">Birthday</label></td>
<td>
<input id="birthday" type="date" th:field="*{birthday}" min="1900-01-01" max="2100-01-01" required="required">
</td>
</tr>
<tr>
<td><label for="height" form="newFoo">Height</label></td>
<td> <input id="height" type="number" th:field="*{height}" required="required"> </td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
When I tried to navigate through my form by NVDA, only the labels of texts and select were shown and said. Numbers and date were not shown. I tried it on Google Chrome and on Firefox.
Trying w3school, number worked, too.
How can I solve it?
I am getting the same HTML error on the validator, if someone can help that would be wonderful. I will put the code below.
<section class = "blog container">
<div class = "title">
<h2>Donate</h2>
<div>
<h2>Donate</h2>
</div>
</div>
<form id="donationInfo">
<table class="center">
<tr>
<td><label for="title">Title:</label>
Mr.<input type="radio" name="title" tabindex="-1">
Mrs.<input type="radio" name="title">
Ms.<input type="radio" name="title">
Dr.<input type="radio" name="title">
</td>
<td><label for="fname">First Name:</label><input type="text" id="fname" tabindex="2" size="20" maxlength="20"></td>
<td><label for="lname">Last Name:</label><input type="text" id="lname" tabindex="3" size="25" maxlength="20"></td>
</tr>
<tr>
<td><label for="email">Email Address:</label><input type="email" id="email" tabindex="4" size="25"></td>
<td><label for="date">Date:</label><input type="date" id="date" tabindex="5" size="25"></td>
</tr>
<tr>
<td>
<label for="phonetype">Phone Type:</label>
<select id="phonetype">
<option value="C">Cell</option>
<option value="H">Home</option>
<option value="W">Work</option>
<option value="O">Other</option>
</select>
<td><label for="telephone">Phone Number:</label><input type="tel" id="telephone" tabindex="7" size="25"></td>
</tr>
<tr>
<td><label for="amount">Donation Amount:</label><input type="number" id="amount" tabindex="8"></td>
</tr>
<tr>
<td><label for="ccNumber">Credit Card Number:</label><input type="text" id="ccNumber" tabindex="9" size="19"></td>
<td><label for="security">Security Code:</label><input type="text" id="security" tabindex="10" size="4"></td>
<td><label for="expiration">Expiration:</label><input type="text" id="expiration" tabindex="11" size="5"></td>
</tr>
<tr>
<td>Agree to Terms:</td>
<td>Yes <input type="checkbox" name="agreeYes" value="Yes" tabindex="12">
No <input type="checkbox" name="agreeNo" value="No" tabindex="13">
</td>
</tr>
</table>
<br/>
</form>
</section>
Here is the picture of the warnings I am getting on the validator. Thanks in advane for any and all help.
You need to have the same number of columns in every row. Your first row (<tr>) contains 3 columns (<td>) - all next rows should have the same number (in general, it should be the biggest number throughout the entire table).
There are 2 ways to solve that:
add empty additional columns in every row
make the existed column to be wider by using colspan attribute
. For instance, the next example
<tr>
<td>
<label for="phonetype">Phone Type:</label>
<select id="phonetype">
<option value="C">Cell</option>
<option value="H">Home</option>
<option value="W">Work</option>
<option value="O">Other</option>
</select>
</td>
<td colspan="2"><label for="telephone">Phone Number:</label><input type="tel" id="telephone" tabindex="7" size="25">
</td>
</tr>
Also, make sure you closed all the tags, e.g in 3d row, you don't close the first column
So I have written the following code and I cannot make same response as I was asked to. the text does not align properly in form. The text isn't like aligned right and feilds on left. I Please suggest a fix as simple as you can.
<form align="center">
<p>Name:
<input type="text">
</p>
<p>Address
<input type="text">
</p>
<p>Email ID:
<input type="text">
</p>
<p>How many Peices of fruit<br>
do you eat per day?
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2<br>
</p>
<label>Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<p>Would you like a <br /> brochure?
<input type="checkbox" align="right">
</p>
<input type="submit">
</form>
How it was supposed to look like
How it looks like
I had a hard time understand how you had been writing this code:
<form align="center">
and
<input type="checkbox" align="right"/>
As align is not a valid attribute of an input or form tag.
But what it looks like is that it used, and has long since been removed.
https://www.w3.org/TR/html401/present/graphics.html#adef-align
Note that on my browser (Firefox 81.0) your code doesn't center align like it does in your picture:
So that suggests to me that you are using an old browser.
I recommend using the MDN documentation to see what is elements are supported.
However, if you are supporting outdated then that's a whole discipline in itself.
This page lists all available HTML attributes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
To give you a useful answer though - judging on the 'supposed to look like' image, it looks like you want to be using a table.
<form>
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Address</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"> Email ID:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td align="right"> How many Peices of fruit do you eat per day?</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2 </td>
</tr>
<tr>
<td align="right">
Degree:
</td>
<td>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a brochure</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td> <input type="submit"></td>
</table>
</form>
Note here, we do use the align attribute. As you can see, according to the MDN documentation, align is supported on a td element, but is deprecated, meaning that it's not advisable to use it.
Do you want like this? Only html:
<form>
<table align="center">
<tr>
<td align="right">Name </td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Address </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Email ID </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td>
<label for="rdbGender">
<br>
How many Peices of fruit <br> do you eat per day?<br><br><br><br>
</label>
</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender">0<br>
<input type="radio" name="rdbGender" id="rdbGender">1<br>
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</td>
</tr>
<tr>
<td align="right">
<br>
<label for="degree">
My favourite fruit <br><br><br><br><br>
</label>
</td>
<td>
<select id="degree" multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a <br>
brochure
</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td>
<br>
<input type="submit">
</td>
</table>
</form>
I suggest you to use CSS Grid to accomplish this job:
form {
display: grid;
grid-template-columns: 150px 200px;
text-align: center;
}
.first-column {
text-align: right;
}
input, select {
margin-left: 5px;
margin-bottom: 5px;
}
.check-area label {
display: block;
text-align: left;
}
.submit-button {
grid-column-start: 2;
text-align: left;
}
<form>
<label class="first-column">Name:</label><input type="text">
<label class="first-column">Address</label><input type="text">
<label class="first-column">Email ID:</label><input type="text">
<div class="first-column">
How many Peices of fruit<br>do you eat per day?
</div>
<div class="check-area">
<label>
<input type="radio" name="rdbGender" id="rdbGender">0
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">1
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">2
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</label>
</div>
<label class="first-column">Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<label class="first-column">Would you like a<br>brochure?</label>
<input type="checkbox" align="right">
<div class="submit-button"><input type="submit"></div>
</form>
<body>
<form name="search_form" id="search_form" method="POST" action="search_user_data.php">
<table border="1">
<tr>
<td colspan="2">
<input type="text" id="search" name="search" />
</td>
<td>
<input type="submit" value="Search"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="id_radio"/>ID
</td>
<td>
<input type="radio" name="surname_radio"/>Surname
</td>
<td>
<input type="radio" name="dob_radio"/>DoB
</td>
</tr>
</table>
</form>
</body>
Because name attribute in radio button must be the same in radio group.
Try this:
<input type="radio" name="somename" value="id_radio"/>ID
<input type="radio" name="somename" value="surname_radio"/>Surname
<input type="radio" name="somename" value="dob_radio"/>DoB
More info at w3c
The name attribute is what links radio buttons into a group. Use value for the actual value of each button.
<td>
<input type="radio" value="id_radio" name="btn_group"/>ID
</td>
<td>
<input type="radio" value="surname_radio" name="btn_group"/>Surname
</td>
<td>
<input type="radio" value="dob_radio" name="btn_group"/>DoB
</td>
It is because they all have a different name. Give them 1 name and they will act as a group:
<input type="radio" name="radioGroup" value='id'/>ID
<input type="radio" name="radioGroup" value='surname'/>Surname
<input type="radio" name="radioGroup" value='dob'/>DoB
http://www.echoecho.com/htmlforms10.htm
You have to have the same name for all of the radio inputs.
Your problem is that you have different names for each radio button in order for them to group together, they must have the same name, it looks like you are confusing name and value.
<body>
<form name="search_form" id="search_form" method="POST" action="search_user_data.php">
<table border="1">
<tr>
<td colspan="2">
<input type="text" id="search" name="search" />
</td>
<td>
<input type="submit" value="Search"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="searchType" value="id_radio"/>ID
</td>
<td>
<input type="radio" name="searchType" value="surname_radio"/>Surname
</td>
<td>
<input type="radio" name="searchType" value="dob_radio"/>DoB
</td>
</tr>
</table>
</form>
</body>