I've seen a few answers for this already, but none that I have been able to make work. I have the following form:
<form method="post" action="submit.php">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><strong>With selected</strong><br /> </td>
</tr><tr>
<td colspan="2"><input type="radio" name="select_action" value="delete" id="delete"/><label for="delete"> delete</label></td>
</tr>
<tr>
<td><input type="radio" name="select_action" value="assign_to_room" id="assign_to_room"/> assign to room:</td>
<td><label for="assign_to_room">
<select name="assign_to_room"></select></label></td>
</tr>
<tr>
<td><input type="radio" name="select_action" value="assign_to_board" id="assign_to_board"/> assign to board:</td>
<td><label for="assign_to_room">
<select name="assign_to_board"></select></label></td>
</tr>
<tr><td colspan="2"><br /><input type="submit" value="submit"/></td></tr>
</table>
</form>
In Chrome when I select the dropdown, it automatically selects the corresponding radio button, but in IE it does not. How do I achieve this with cross-browser support? I don't mind using JS if I have to.
Try using an on change event to get a radio button by id then change it's value to selected. Just an idea.
Related
What I have built so far is that I have a form with a few radioButtons and a password field.
Now, I want to activate the password field as soon as the corresponding radioButton is clicked.
That would work so far, if id for all password fields would not be the same.
This is my code so far:
<form action="#" th:action="#{/passwordaenderung}" th:object="${UserCreationDto}" method="post" onsubmit="return checkPassword()">
<fieldset>
<table>
<thead>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" id="raidoButtonCheck" onclick="document.getElementById('pwd').removeAttribute('disabled')" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" id="pwd" disabled/></td>
</tr>
</tbody>
</table>
<input type="submit" id="submitButton" th:value="Speichern">
</fieldset>
</form>
So, does it look like in my browser:
And so does the interpreted / compiled code look like:
I hope someone can tell me please how do I get a different id for all password fields so that the correct one will be enabled via the
document.getElementById('pwd').removeAttribute('disabled')
You can dynamically set the ids of each input using th:id. You can use the iterator index so that it can be unique. The following code should work.
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'document.getElementById('''+ itemStat.index +''').removeAttribute(''disabled'')'}" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>
If you want to disable all other inputs, when you click on one of them, then I would recommend adding a class to all inputs and changing your on click for function.
JS
<script>
function inputClick(id) {
var passwordFields = document.getElementsByClassName("passwordField");
for(i = 0; i < passwordFields.length; i++) {
passwordFields[i].disabled = true;
}
document.getElementById(id).removeAttribute('disabled');
}
</script>
HTML
<tr th:each="user, itemStat : *{users}">
<td><input type="radio" name="radiobutton" th:value="*users[__${itemStat.index}__].username}" class="radioButton" th:onclick="${'inputClick('''+ itemStat.index +''')'}" /></td>
<td><input th:field="*users[__${itemStat.index}__].username}" disabled/></td>
<td><input class="passwordField" type="password" name="passwordField" th:field="*{users[__${itemStat.index}__].password}" th:id="${itemStat.index}" disabled/></td>
</tr>
The js can be added somewhere in the head or body or in a external js file.
hello i am new to jsp and javascript, and i would like to a make a field required when the checkbox is checked,
<tr>
<th class="clsTableHeaderLeft">InterCompany</th>
<td class="clsDisplayText">
<% if (!tHideField.equals("")){
out.println(tRecord.get(idxInterComFlag).toString());
}
%>
<input type="checkbox" class="clsInputText" <%=tHideField%> name="txtInterComFlag" onchange="chgStatus(txtStatus);" size="25" maxlength="20"
<%=tRecord.get(idxInterComFlag).toString().equals("Y")?" checked":""%>
/>
</td>
</tr>
<tr>
<th class="clsTableHeaderLeft">Entity Code</th>
<td class="clsDisplayText">
<% if (!tHideField.equals("")){
out.println(tRecord.get(idxInterComCode).toString());
}
%>
<input type="text" class="clsInputText" <%=tHideField%> name="txtInterComCode" size="25" maxlength="20" />
</td>
</tr>
also the checkbox value is 'on' when checked , how can I make it to Y or N? thank you!
I had a same requirement, so i Choose to follow this flow:
Create an onclick function at check box
Get element ID of the html input element that needs to be changed
create new html input element as required and replace it using Java script.
Here is my sample Code:
function fxctco() {
var newHTML="<input type='number' name='fctc' required/>";
document.getElementById("ctc").innerHTML = newHTML;
}
<table><tr><TD ><input type="radio" name="fx"value="YES" onClick="fxctco()"> Yes
<input type="radio" name="fx"value="NO" checked> No</TD></tr>
<tr><TD id="ctc"> <INPUT TYPE="number" NAME="fctc" /></TD></tr>
<tr>
<TD align="center"><INPUT TYPE="submit" class="button" VALUE="submit"></TD>
</tr> </table>
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
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();
}
}
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();
}
<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();
}
}
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.
I am looking to disable all the elements (controls) of specified table columns (td's) using jQuery.
My table looks like the following :
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
The table is generated dynamically, but this is how it is rendered as. Now each of my <td> has multiple controls like select, checkbox, buttons, but not fixed for every row and column. I am looking to disable all controls of a specified <td> by using it's Id.
I used the following jQuery, but it doesn't seemt to do the job :
$('#' + td_id).select('*').each(function(element){element.disabled=true});
I have also tried the following, still it doesn't seem to work :
$('#' + td_id).attr('disabled', 'false');
Am I doing something wrong? Please help.
Thanks!
try this
$('#' + td_id).find(':input').prop("disabled", true);
:input select all the input elements
if you need to disable all controls in a column (multilpe rows) I think the best way is to assign a class to each td in that column.
For examle if you want to disable controls in the second column, you may do something similar:
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol" class="col-2"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol" class="col-2"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
Than, using JQuery you can do this:
$(".col-2 :input').prop("disabled", true);
It should work...
I think this should work :
<table>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>1233</option>
</select>
</td>
</tr>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>second</option>
</select>
</td>
</tr>
Now to disable only first "td" you should use:
$('tr').children().eq(0).find(':input').prop("disabled", true);
If you are using JQuery1.6 or above use prop() else use attr().
I'm doing a small project in Django by using Python.
In that, I am dynamically populating a table with data of pending tasks. Each row of the table contains a checkbox field. According to the priority level, number of rows can be less or more.
I Have to stop postback operation on submit button click event if none of the checkboxes are selected.
How do you identify the checkbox name or ID in JavaScript as they are generated dynamically?
html
<form method="post" class="myform" action=".">
<table>
<tbody>
<tr>
<th><label for="checkbox1">Checkbox 1</label></th>
<td><input type="checkbox" id="checkbox1" name="checkbox1" /></td>
</tr>
<tr>
<th><label for="checkbox2">Checkbox 2</label></th>
<td><input type="checkbox" id="checkbox2" name="checkbox2" /></td>
</tr>
<tr>
<th><label for="checkbox3">Checkbox 3</label></th>
<td><input type="checkbox" id="checkbox3" name="checkbox3" /></td>
</tr>
</tbody>
</table>
<input type="submit" class="myform-submit" />
</form>
javascript (assuming jquery)
$(document).ready(function(){
$(".myform-submit").bind("click", function(e) {
e.preventDefault();
var $form = $(this).closest(".myform");
if ($("input:checkbox:checked").length) {
alert("submitting");
$form.submit();
}
});
});
jsfiddle
http://jsfiddle.net/c4urself/xWbEk/