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>
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 have a radio button with 2 options. It goes like
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td>textbox here</td>
I want to display a textbox when i click "Different".
Its a JSP page. Thanks.
It would be nice to know which javascript framework you use.
With vanilla javascript this is a simple way by adding and removing hidden class on click event simply because that's most likely the only way to guaranty browser compatibility.
https://plnkr.co/edit/e9Jet9kd3f278uROO5R0?p=preview
// js
window.onload = () => {
var rad2 = document.getElementById('r2');
var rad1 = document.getElementById('r1');
var input = document.getElementById('myInput');
rad2.addEventListener("click", function(){
input.classList.remove('hidden');
});
rad1.addEventListener("click", function(){
input.classList.add('hidden');
});
}
// html
<h1>Hello Plunker!</h1>
<td>City : </td>
<td><input type="radio" name="r_city" id="r1" value="Same" checked="checked" /></td>
<td><input type="radio" name="r_city" id="r2" value="Different" /></td>
<td><input id="myInput" class="hidden"/></td>
// css
.hidden {
display: none;
}
Here you go, if you want to again hide it just use .hide() function
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked"/>Same</td>
<td><input type="radio" id="testChecked" name="r_city" value="Different" />Different</td>
<td class="show-this" style="display:none">textbox here</td>
</tr>
</table>
<script>
$('#testChecked').click(function(){
if ($(this).is(':checked'))
{
$('.show-this').show();
}
});
</script>
Make sure to add jQuery***
Here is what you need to do. If you are using a common class for the textbox inside <td> then you can use the class selector instead of input[type="text"].
$(document).ready(function(){
$("input[type='radio']").click(function(){
var textBox = $(this).closest('tr').find('td input[type="text"]');
if($(this).val() === 'Different'){
$(textBox).show();
} else {
$(textBox).hide();
}
});
});
td input[type='text'] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city1" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city1" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
</table>
Now, when the 1st row value change, the 2nd and 3rd row change accordingly.
The problem is this's hard code, i don't know the no of rows as it's generated from the database.Any idea?Many thanks
$("#A1").keyup(function() {
$("#B1").val($("#A1").val());
});
$("#A1").keyup(function() {
$("#C1").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
you can just select all inputs and update values for all.
$("#A1").keyup(function() {
$("input").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
Also if you want to select a few you can select multiple ids separated by commas. like this:
$("#A1").keyup(function() {
$("#B1, #C1").val($("#A1").val());
});
Different from other answers given here, changing all input elements is too risky in my opinion. What I would suggest id adding a class to all input fields you wish to change, and changing your function to a JQuery selector according to this class (In the example below, the class I added is called changable).
$("#A1").keyup(function() {
$(".changable").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" class="changable" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" class="changable" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" class="changable" value=""></td>
</tr>
You can assign the value to all the inputs in your HTML, like this:
$("#A1").keyup(function() {
$("input").val($("#A1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td><input type="text" id="A1" name="A" value=""></td>
</tr><br>
<tr>
<td><input type="text" id="B1" name="A" value=""></td>
</tr>
<br>
<tr>
<td><input type="text" id="C1" name="A" value=""></td>
</tr>
I need a function that allows my client to add more divs on the form or not, clicking on a button (+) for example, like a loop
this loop should repet divs and the button to add more divs, like bellow on the pic
does anybody has an ideia of how to do it?
is expand collapse the best way of doing it?
Thank you very much!
I am not certain what is your desire so I post both options:
If you want to expand hidden existing fields and asuming you can use JQUery:
<table>
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
<tr class="hiddenarea" style="display: none;">
<th>Field3 (Hidden)</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$(".hiddenarea").toggle();
});
</script>
///////////////////////////////////
The second solution to add a new line to the table is:
<table id="mytable">
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
});
</script>