how to make a field requried when the checkbox is checked - javascript

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>

Related

Enable / Disable many radioButtons having different ids

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.

Using Javascript to set input to readonly

I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.

How to change the property of td by js?

Let Table structure is like this
<table>
<tr>
<td>AA</td><td>BB</td><td>CC</td>
</tr>
<tr>
<td><input type="text" name="a" id="id_a" /></td>
<td><input type="text" name="b" id="id_b" /></td>
<td><input type="text" name="c" id="id_c" /></td>
</tr>
</table>
Here I need to change the color of text field of id="id_a" if xyz is typed in text field id="id_a"
Any one can suggest me js script to do so.
But plz don't down-vote. bt may ask what u donot understand about question.
Bind an event handler for the input field
document.getElementById('id_a') // get the input field
.addEventListener('input', function() { //bind event handler
this.style.color = this.value.trim() == 'xyz' ? 'red' : 'black'; // based on the input value update the color
})
<table>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>
<input type="text" name="a" id="id_a" />
</td>
<td>
<input type="text" name="b" id="id_b" />
</td>
<td>
<input type="text" name="c" id="id_c" />
</td>
</tr>
</table>
Yes you can do by selecting all input element by querySelectorAll and attach event listener .
Here I give click event ,you can change what u want
<script type="text/javascript">
var field = document.querySelectorAll("input");
for(var i =0 ;i<field.length;i++){
field[i].addEventListener("click",function(e){
e.preventDefault();
this.style.color = "red";
},false);
}
</script>
As comments say, this is not a code writting service. You should try to do it on your own, and post here what you have done. Not only the problem.
The explanation
You will need a bit of Js for achieving your goal.
First of all, you need to select the element you want to add functionality, in this case id_a. This is the reason of the document.getElementById.
Next step is adding an event listener to the element. This is like saying in a natural language: when the event happends, to the function.
So you are specifying that when the event keydown on the element id_a happens, run the function passed as callback.
Inside that function, the only thing you have to do is assigning a new class to the element that changes it properties, as color, for instance
(function() {
var e = document.getElementById("id_a");
e.addEventListener("keydown", function() {
e.className = "red";
});
})();
.red {
color: #ff0000;
border: 1px solid #ff0000;
}
<table>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>
<input type="text" name="a" id="id_a" />
</td>
<td>
<input type="text" name="b" id="id_b" />
</td>
<td>
<input type="text" name="c" id="id_c" />
</td>
</tr>
</table>
You can use jQuery to solve this
$('#id_a').on('input',function(e){
if($('#id_a').val()=='xyz'){
$("#id_a").css("background-color", "#FFFF00");
}else{
$("#id_a").css("background-color", "#FFFFFF");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<td>AA</td><td>BB</td><td>CC</td>
</tr>
<tr>
<td><input type="text" name="a" id="id_a" /></td>
<td><input type="text" name="b" id="id_b" /></td>
<td><input type="text" name="c" id="id_c" /></td>
</tr>
</table>

Change Button Text

I am learning php and want to set the display text for a button that I have. I know that you can use javascript to change the button text,but that (at least from what I have seen) works for .onclick I want the button text to be changed when the page loads. By default the button text on my page when it loads displays Submit Query when my page loads I want the text to read Button on Page
Is there a way using php to 1) set the button text and 2) have it span 2 rows in the table?
This is the code I am working with:
<html>
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td rowspan="2"><input type="submit" name="btn123" text="Button On Page"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
You should use value instead of text for your submit button
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btn123" value="<?php echo 'Button On Page'; ?>" style="width:100%"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
If you always know what you want your button to say, you don't need php or javascript. You can just use the html "value" attribute. You are incorrectly using a attribute labled "text", you should use "value". Update your code to the following.
Change your button html from:
<input type="submit" name="btn123" text="Button On Page">
To:
<input type="submit" name="btn123" value="Button On Page">
Edit:
In order to have your button go full width. You should use "colspan" instead of "rowspan". Your td is in a row, and needs to span columns.
Change this code from:
<td rowspan="2"><input type="submit" name="btn123" value="Button On Page"></td>
to (note that I added an id of "button" to your button):
<td rowspan="2"><input type="submit" id="button" name="btn123" value="Button On Page"></td>
Then add a little css:
#button{
width: 100%;
}
Here is a fiddle with a working example:
https://jsfiddle.net/joeydehnert/m1ttcr86/

validating multiple textboxes in javascript

<form name="quest" onsubmit="return validate();">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="R1" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="R1" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="1" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="2" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="3" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="4" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="5" name="R3">
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
I want to validate to that a person can enter min 3 responses(Add response) and max 5 responses. once enter the response only allow to select the answer(radio button). pls anbody help me . thanks in advance
You can try this solution below.
Note that a full working example can be found at the end of this post.
Set the method method attribute of your <form> to GET or POST, and define its method attribute (= which specifies where to send the form's data)
Add an ID to each of your "Answer" checkboxes. You can provide them the following IDs, respectively: R1, R2, R3, R4, and R5. Provide different names to each input.
Disable your "Answer" checkboxes by adding the attribute disabled. Since you only want the responses to check / uncheck the checkboxes, we want to prevent the users from doing it.
Eg:
<input type="radio" value="1" name="R1" id="R1" disabled>
Add an the following events to each of your "Answer" text inputs:
onkeyup="toggle_checkbox(this, i);", where i should be the index related to the ID of the checkbox concerned (check the example below). The toggle_checkbox function is called every time we type something inside an "Answer" textbox, and checks, or unchecks, the checkbox associated to the text input we're typing in, depending on the latter's content:
if the content of the texbox is empty, the function unchecks the checkbox,
else, it checks it.
ondragstart="return false" which prevents to copy the content from a given textbox to another.
Eg:
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer
</td>
In the example above, i is equal to 1, which is related to the concerned checkbox's ID R1.
In your <head>, add the following JS functions:
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="") {
document.getElementById("R"+index).checked = "checked";
}
else {
document.getElementById("R"+index).checked = "";
}
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked) {
nb_checked++;
}
}
if(nb_checked < 3) {
alert("Enter at least 3 responses!");
}
else {
isok = true;
}
return isok;
}
As you can see, there are two functions: one is toggle_checkbox and the other is validate.
As explained a little bit previously, the function toggle_checkbox is called every time we type something inside an "Answer" textbox. This checks / unchecks the associated checkbox according to whether the content of the corresponding textbox is empty or not.
The function validate is called when we submit the form. It counts the number of "Answer" checkboxes which are checked with the variable nb_checked. If this number is lower than 3, then we alert the message Enter at least 3 responses!. Otherwise, we set the output variable isok to true, which will allow the form to be processed and sent to the link provided in the action attribute of the <form>
Full working example:
<!DOCTYPE html>
<html>
<head>
<script>
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="")
document.getElementById("R"+index).checked = "checked";
else document.getElementById("R"+index).checked = "";
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked)
nb_checked++;
}
if(nb_checked < 3) alert("Enter at least 3 responses!");
else
isok = true;
return isok;
}
</script>
<head>
<body>
<form onsubmit="return validate();" method="post" action="http://www.google.com">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="Ra" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="Rb" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="Rc" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 2);" ondragstart="return false"></td>
<td>
<input type="radio" value="2" name="R2" id="R2" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 3);" ondragstart="return false"></td>
<td>
<input type="radio" value="3" name="R3" id="R3" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 4);" ondragstart="return false"></td>
<td>
<input type="radio" value="4" name="R4" id="R4" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 5);" ondragstart="return false"></td>
<td>
<input type="radio" value="5" name="R5" id="R5" disabled>
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>
PS: Change the action attribute of the form. I set google's url just to let you see the redirection when the form is valid.
Hope this helps. Let me know if you have any questions.

Categories