I have a scenario on my UI where I need to enable a text box and a button on checking a checkbox and disable both text box and the button when the checkbox is un-checked. Below is the screenshot of what I have:
Below is the code in my jsp:
<tr>
<td>
<stripes:checkbox name="locationselect" onclick="handleDisable(document.forms['dealerTransactionForm'].elements['locationselect'],document.forms['dealerTransactionForm'].elements['locationId'])"/>
<stripes:label for="locationId"/>
</td>
<td>
<stripes:text name="locationId" />
<fmt:message var="tooltip" key="/DealerTransactionReport.action.lookUpLocation"/>
<stripes:submit name="lookUpLocation" class="button" title="${tooltip}" style="width: auto"/>
</td>
</tr>
Below is the handleDisable function which I wrote:
function handleDisable(checkbox, item) {
if(checkbox.checked == true)
item.disabled = false;
else
item.disabled = true;
}
Currently I'm able to enable only the text box when the checkbox is checked, what change should i make so as to enable both the text box and the button?.
You need to pass in a third parameter to the function for your button. You are only passing in the checkbox and the text box.
HTML:
<stripes:checkbox name="locationselect" onclick="handleDisable(document.forms['dealerTransactionForm'].elements['locationselect'],document.forms['dealerTransactionForm'].elements['locationId'], document.forms['dealerTransactionForm'].elements['lookUpLocation'])"/>
JavaScript:
function handleDisable(checkbox, text, button)
{
if(checkbox.checked == true) {
text.disabled = false;
button.disabled = false;
}
else {
text.disabled = true;
button.disabled = true;
}
}
But that makes the html too busy, in my opinion. I would opt for something like this.
HTML:
<stripes:checkbox name="locationselect" onclick="handleDisable(this)"/>
JavaScript:
function handleDisable(checkbox)
{
var text = document.getElementsByName("locationId")[0]
var button = document.getElementsByName("lookupLocation")[0]
if(checkbox.checked == true) {
text.disabled = false;
button.disabled = false;
}
else {
text.disabled = true;
button.disabled = true;
}
}
Using jQuery you can do it like following.
$('name="locationselect"').change(function() {
$('name="locationId"').prop('disabled', !this.checked);
});
UPDATE: Since the jQuery tag is removed
<script>
function handleDisable(elm) {
document.getElementsByName('locationId')[0].disabled = !elm.checked;
document.getElementsByName('lookUpLocation')[0].disabled = !elm.checked;
}
</script>
<input type="checkbox" name="locationselect" onclick="handleDisable(this)" />
<input type="text" name="locationId" disabled>
<input type="submit" value="Submit" name="lookUpLocation" disabled>
Related
I wanted to trigger an if condition based on a checked or unchecked checkbox, by clicking a button.
The code segments of interest are:
Out-Projekt: <input type= "checkbox" id= "OUT"> <br> <br>
<button class = "buttonz" onclick = "berechnung()">Berechnen </button>
<script>
function berechnung() {
var OUT = parseInt(document.getElementById("OUT").checked);
if( checkbox.checked == true){ code}
else { code }
}
</script>
For some reason, it does not work. I read other topics regarding this but found nothing suitable. Hope someone can help
You're checking to see if the input assigned to variable checkbox is checked, but you didn't define that variable.
Out-Projekt: <input type= "checkbox" id= "OUT"> <br> <br>
<button class = "buttonz" onclick = "berechnung()">Berechnen </button>
<script>
function berechnung() {
var checkbox = document.getElementById("OUT");
if( checkbox.checked === true){
console.log('checked');
} else {
console.log('not checked');
}
}
</script>
I have gone through the stackoverflow regarding enable/disable button conditionally and was able to find some help but NOT EXACT what I was looking for.
Instead of 1 checkbox condition, I have 2 checkbox conditions. So unless if the two checkboxes have been accepted, the button should not be enabled.
Following is my html:
<input type="checkbox" id="f_agree" value="1" onchange="checked(this, 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checked('f_agree', this)"/>
<button type="submit" disabled="disabled" id="acceptbtn">Continue</button>
Following is javascript:
function checked(element1, element2) {
var myLayer = document.getElementById('acceptbtn');
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.disabled = "";
} else {
myLayer.class = "button:disabled";
myLayer.disabled = "disabled";
};
}
I have tried like above, but it is not working. I don't know where I am going wrong.
it won't work because you are not removing that attribute disabled.
function checked(element1, element2) {
var myLayer = document.getElementById('acceptbtn');
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled","disabled");
};
}
Update
use any other name then checked as it seems to be reserved and not working.
you also need to do getElementById for element1 and element2.
function checkedFunc(element1Id, element2Id) {
var myLayer = document.getElementById('acceptbtn');
var element1 = document.getElementById(element1Id);
var element2 = document.getElementById(element2Id);
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled","disabled");
};
}
<input type="checkbox" id="f_agree" value="1" onchange="checkedFunc('f_agree', 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checkedFunc('f_agree','f_agree2')"/>
<input type="button" value="check" id="acceptbtn" />
You can try the following code
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled", "disabled");
};
With jQuery:
var btn;
var changed = function() {
//get the length of non checked boxes
var disbl = $('input[id^=f_agree]:not(:checked)').length;
btn.prop('disabled', disbl);//disable if true, else enable
};
$(function() {
btn = $('#acceptbtn');
$('input[id^=f_agree]').on('change', changed).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="f_agree" value="1" />1
<input type="checkbox" id="f_agree2" value="1" />2
<input type="button" id="acceptbtn" value="Submit" />
The problem is that there is a difference between the string "f_agree" and the node with id="f_agree".
Your code should work as expected with
checked(this, document.getObjectById('f_agree2'))
Much better would be however to avoid having a widget knowing about the other... I'd implement instead by adding a list of external rules that check all widgets:
function okSubmit() {
return (document.getElementById("f_agree").checked &&
document.getElementById("f_agree2").checked);
}
This is much easier to read/maintain and also scales better in case you need to add more conditions later. In the onchange of all the widgets just call a function that will enable/disable the submit button depending on the conditions.
Try this
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled", "disabled");
};
Try the below code -
var chk1 = document.getElementById('chk1');
chk1.addEventListener('click', checked, false);
var chk2 = document.getElementById('chk2');
chk2.addEventListener('click', checked, false);
function checked(){
if(chk1.checked && chk2.checked) {
document.getElementById('btn').removeAttribute('disabled');
} else {
document.getElementById('btn').setAttribute('disabled','disabled');
}
}
<input type="checkbox" id="chk1" />
<input type="checkbox" id="chk2" />
<button id="btn" disabled >Button<button>
I tested it and it's working! Hope it helps u...
!hello,
i have a number of checkboxes generated with PHP. There is a validation button. I want to prevent the user to valid the form without checking at least 1 checkbox.
I have this code
var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
for (var i=0;i<checkboxes.length;i++)
{
if(checkboxes[i].checked)
{
btn.disabled = false;
}
else
{
btn.disabled = true;
}
}
}
<form>
....
<table>
<tr id="{{ cpt }}">
<td><input type="checkbox" class="date" id="date" name="date[]"
checked value="{{ jdv.day }}"></td>
<td>{{ jdv.day }}</td>
</tr>
</table>
</form>
But it only work for the first checkbox!
can you help me?
Thanks
Your script will set button.disabled = true; for every checkbox that is unchecked... that means if you check any box than the last, this will always set disabled to true in the end.
add this to your function after btn.disabled = false;
return true;
resulting in this code:
var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
for (var i=0;i<checkboxes.length;i++)
{
if(checkboxes[i].checked)
{
btn.disabled = false;
return true;
}
else
{
btn.disabled = true;
}
}
}
this will stop your function once it detects the first checked checkbox and prevent the following ones from overriding the disabled property of your button.
You'd better do some counter which'll count checked checkboxes and in the end compare it with number of minimum num of checked checkboxes
you should keep a variable, avoiding that other checkboxes results override each other.
Something like:
var toShow = true;
var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
for (var i=0;i<checkboxes.length && toShow;i++) {
if(!checkboxes[i].checked)
{
toShow = false;
}
}
if(toShow)
btn.disabled = false;
} else
{
btn.disabled = true;
}
I want to let my two textboxes be checked before those get submitted.
like
if textbox1 >= textbox2 submit
else show errorlabel and dont submit.
How can i do this?
Provide your onclick handler's implementation to extract the value of the two text boxes, then parse them as an int.
function submitForm() {
var first = parseInt(document.getElementById("first"), 0);
var second = parseInt(document.getElementById("second"), 0);
if(first >= second) {
// ...
return true;
} else {
var hiddenTextBox = document.getElementById("error");
hiddenTextBox.style.visibility = "visible";
return false;
}
}
This assumes you have two elements with id="first" and id="second" respectively, and a hidden element with id="error"
Try it like,
$('#submitId').on('click',function(){
if $('#textbox1').val() < $('#textbox2').val()){
$('#erroLabel').show(); // showing error label
return false; // to prevent submitting form
}
});
You can make function in javascript,
<script type="text/javascript">
function checkValues()
{
var searchtext1 = document.getElementById("textbox1").value;
if(searchtext1=='')
{
alert('Enter any character');
return false;
}
var searchtext2 = document.getElementById("textbox2").value;
if(searchtext2=='')
{
alert('Enter any character');
return false;
}
}
</script>
and then in html form
<form method='GET' onSubmit="return checkValues();">
<input type="text" id= "textbox1" name="textbox1" class='textbox' >
<input type="text" id= "textbox2" name="textbox2" class='textbox' >
<input type="submit" id='submit' value="Search" class ='button' >
</form>
I'm trying to prevent text from being entered in a textbox unless a checkbox that corresponds with the textbox is checked.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
isOther.addEventListener("input", function (evt) {
// Checkbox must be checked before data can be entered into textbox
if (isOther.checked) {
document.getElementById("other").disabled = false;
} else {
document.getElementById("other").disabled = true;
}
});
Do not use disabled. Instead use readonly. During document load, uncheck and disable the inputs:
<input type="checkbox" id="isOther" />
<input type="text" id="other" readonly />
And use this script.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
other.readOnly = !isOther.checked;
});
other.addEventListener("focus", function (evt) {
// Checkbox must be checked before data can be entered into textbox
other.readOnly = !isOther.checked;
});
Longer version.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
if (isOther.checked) {
other.readOnly = false;
} else {
other.readOnly = true;
}
});
other.addEventListener("focus", function (evt) {
// Checkbox must be checked before data can be entered into textbox
if (isOther.checked) {
this.readOnly = false;
} else {
this.readOnly = true;
}
});
Fiddle: http://jsfiddle.net/praveenscience/zQQZ9/1/
Fiddle: http://jsfiddle.net/praveenscience/zQQZ9/
My solution uses jQuery library. Here's a fiddle: http://jsfiddle.net/8LZNa/
Basically I'm disabling the input on page load:
<input name="isOther" type="checkbox" id="isOther" /><br />
<input type="text" id="other" disabled/>
... and when isOther changes it will make sure it is checked, and change the state to enabled. Or change back to disabled.
$('input[name=isOther]').change(function(){
if($(this).is(':checked')) {
$("#other").removeAttr('disabled');
}
else{
$("#other").attr('disabled','disabled');
}
});
You can do this:
document.getElementById( 'isOther' ).onChange = function(){
document.getElementById("other").disabled = !this.checked;
};
Without the use of jQuery or disabled property:
HTML
<input type="checkbox" id="x" value="Enable textbox" onclick="test(this);" />
<input type="text" id="y" readonly />
JAVASCRIPT
function test(checkbox) {
if(checkbox.checked) {
document.getElementById('y').readOnly = false;
}
else {
document.getElementById('y').readOnly = true;
}
}