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.
Related
Hi I am trying to get a value from the textboxes inside my element in my table. I have an edit button for each row that should go to the servlet, update the fields, refresh the table data and come back to the same jsp page.
Here is my table
<table border="2">
<tr>
<th>ID</th>
<th>Short Desc</th>
<th>Long Desc</th>
<th>Status</th>
</tr>
<c:forEach var="state" items="${stateList}">
<tr>
<td><input type="text" name="editStateId" value="${state.stateId}"/></td>
<td><input type="text" name="editShortDesc" value="${state.shortDesc}"/></td>
<td><input type="text" name="editLongDesc" value="${state.longDesc}"/></td>
<td><input type="text" name="editIsActiveString" value="${state.isActiveString}"/></td>
<td>
<form action="witc" method="post">
<input type="hidden" name="action" value="manageDispoType">
<input type="hidden" name="stateId" value="${state.stateId}"/>
<input type="hidden" name="manageType" value="stateType">
<input type="submit" value="Edit" class="editbuttons"/>
</form>
</td>
</tr>
</c:forEach>
</table>
In my servlet I have am trying to get the values from these textboxes to add to a state class and update the database. I am using request.getParameter() but I am getting a null value
Here is my servlet
private String doManageType(HttpServletRequest request, HttpServletResponse response){
String urlString;
StateType stateType = new StateType();
List<StateType> stateList = GetDb.getAllStates();
//below is the code I'm having trouble with
String shortDesc = request.getParameter("editShortDesc");
String longDesc = request.getParameter("editLongDesc");
String isActive = request.getParameter("editIsActive");
request.setAttribute("stateList", stateList);
stateType.setShortDesc(shortDesc);
stateType.setLongDesc(longDesc);
stateType.setIsActiveString(isActive);
UpdateDb.updateState(stateType);
urlString = "/manageTypes.jsp";
return urlString;
}
There are two problems with your code:
A. The form should enclose the fields, editStateId, editShortDesc, editLongDesc etc. as follows:
<table border="2">
<tr>
<th>ID</th>
<th>Short Desc</th>
<th>Long Desc</th>
<th>Status</th>
</tr>
<c:forEach var="state" items="${stateList}">
<form action="witc" method="post">
<tr>
<td><input type="text" name="editStateId" value="${state.stateId}"/></td>
<td><input type="text" name="editShortDesc" value="${state.shortDesc}"/></td>
<td><input type="text" name="editLongDesc" value="${state.longDesc}"/></td>
<td><input type="text" name="editIsActiveString" value="${state.isActiveString}"/></td>
<td>
<input type="hidden" name="action" value="manageDispoType">
<input type="hidden" name="stateId" value="${state.stateId}"/>
<input type="hidden" name="manageType" value="stateType">
<input type="submit" value="Edit" class="editbuttons"/>
</td>
</tr>
</form>
</c:forEach>
</table>
B. In your servlet, you should write request.getParameter("editIsActiveString") instead of request.getParameter("editIsActive")
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 have an assignment where I should be validating forms both when the value of the form changes, as well as on submit. The functions themselves I have been allowed to obtain from the internet, provided I cite the source. My issue is that it's not working? I've tested it in a browser and am not getting corrected for anything, regardless of the amount of gibberish I provide. I thought I understood the concept, but it's just not working? Here is my code:
<form name="usercomments" method="post" action="cgi-bin/form-mail2.pl"
onsubmit="return validateForm();"strong text>
<table class="usercomments">
<tbody>
<tr>
<td><label for="realname">Name:</label></td>
<td><input id="realname" align="left" size="50" name="realname"
onchange="validateRealname(this, 'realnameguide');"></input></td>
<td id="realnameguide">Please use proper case when entering your name.</td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input id="email" size="50" name="email" onchange="validateEmail(this, 'emailguide');"></input></td>
<td id="emailguide">Please use the format: ernest#craft.com</td>
</tr>
<tr>
<td><label for="message">Comments:</label></td>
<td><textarea id="message" name="message" rows="15" cols="50"
onchange="return validateForm(this, 'commentsguide');"></textarea></td>
<td id="commentsguide">Please provide your comments regarding the website
in the space provided below.</td>
</tr>
<tr>
<td><label for="rating">How would you rate this website?</label></td>
<td>
<p> 1=Fantastic!
2=It's Good!
3=It's Average.
4=It's Bad.
5=It's Terrible! </p>
<p style="word-spacing: 2.5em">
<input type="radio" value="1" name="rating"></input> 1
<input type="radio" value="2" name="rating"></input> 2
<input type="radio" value="3" name="rating"></input> 3
<input type="radio" value="4" name="rating"></input> 4
<input type="radio" value="5" name="rating"></input> 5
</p>
</td>
</tr>
<tr>
<td><label for="phone"> Phone Number:</label></td>
<td><input type="tel" name="phonenumber" id="phonenumber" onchange="return validatePhone(this, 'phoneinfo');">
</input></td>
<td id="phoneinfo">999-999-9999</td>
</tr>
<tr>
<td><label for="bday">Birthday:</label> </td>
<td><input id="bday" name="bday" onchange="return validateBday(this, 'bdayguide');"></input></td>
<td id="bdayguide">07/17/2014</td></tr>
<tr>
<td><input type="submit" value="Submit"></input></td>
</tr>
</tbody>
</table>
</form>
It looks as though you only have half of the assignment done at the moment. You will need to write the javascript functions you have reference, for example validateRealname.
You should do this in a separate javascript file and import it using <script> tags.
You also need to change the radio buttons from:
<input type="radio" value="1" name="rating"></input> 1
to:
<input type="radio" value="1" name="rating">1</input>
Once you've written those functions and imported them, you should be good to go.
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/
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.