This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 6 years ago.
I use tis code:
$(document).bind('click', function(e) {
if(!$(e.target).is('#paybox')) {
$('#paybox').hide();
}
});
to hide #paybox when user click anywhere but #paybox.
But when I click on "radio" form:
<div id="paybox">
<table width="100%">
<tr>
<form method="post" action="">
<td>
<input type="radio" name="dauer" value="small" checked>
</td>
<td>
<input type="radio" name="dauer" value="mid">
</td>
<td>
<input type="radio" name="dauer" value="big">
</td>
</form>
</tr>
</table>
</div>
INSIDE the #payboy then #payboy get hidden!
How can I prevent this?
You should check whether or not your click is inside paybox or not. Something like this should work:
$('body').on('click', function(e) {
if($(e.target).closest('#paybox').length === 0) {
$('#paybox').hide();
}
});
So this only hides the #paybox element if the click is neither on paybox nor any node that is within the #paybox element.
You can use closest or parents to check this as below
$(document).bind('click', function(e) {
if(!$(e.target).is('#paybox') && $(e.target).closest('#paybox').length === 0) {
$('#paybox').hide();
}
});
#paybox {
background-color: gray;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="paybox">
<table width="100%">
<tr>
<form method="post" action="">
<td>
<input type="radio" name="dauer" value="small" checked>
</td>
<td>
<input type="radio" name="dauer" value="mid">
</td>
<td>
<input type="radio" name="dauer" value="big">
</td>
</form>
</tr>
</table>
</div>
You could check if the target is a child of your div
// if target is not paybox and is not child of paybox
$(document).bind('click', function(e) {
if(!$(e.target).is('#paybox') && !$(e.target).parents('#paybox').length) {
$('#paybox').hide();
}
});
Related
How can I change the color of a <td> element based on the value of a radio button? I would like to set <td bgcolor></td> to red if the radio button is checked "NO" and to green if the radio button is checked "OK".
function color(){
if(radio1.checked()){
td1.bgcolor="green";
}
if(radio2.checked()){
td1.bgcolor="red";
}
}
<table>
<tr>
<td bgcolor="#B35556">
<form action="">
OK <input type="radio" name="radio1" id="radio1"value="OK" checked="color()"/> <BR>
NO <input type="radio" name="radio2" id="radio2"value="NO"/>
</form>
</td>
</tr>
</table>
I Know that this code is very wrong but it's an example to make you understand my question
Few points:
Define radio buttons as part of the same group with the name property (radio buttons with the same name belong to the same group).
Attach the function to the onchage event of both the radio buttons.
You have to use element's style property to set the backgroundColor.
Try the following way:
function color(el){
if(el.value=="OK"){
el.parentNode.parentNode.style.backgroundColor="green";
}
else{
el.parentNode.parentNode.style.backgroundColor="red";
}
}
<table>
<tr>
<td bgcolor="#B35556">
<form action="">
OK <input type="radio" name="radio" id="radio1"value="OK" onchange="color(this)"/> <BR>
NO <input type="radio" name="radio" id="radio2"value="NO" onchange="color(this)" checked/>
</form>
</td>
</tr>
</table>
You should use javascript change event to run your code on raido button change. In event listener check state and value of target radio to setting background color.
$(":radio").change(function(){
if (this.checked && this.value == "OK")
$(this).closest("td").css("background", "green");
else if (this.checked && this.value == "NO")
$(this).closest("td").css("background", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td bgcolor="#B35556">
<form action="">
OK <input type="radio" name="radio1" id="radio1" value="OK"/>
<br>
NO <input type="radio" name="radio1" id="radio2" value="NO" checked />
</form>
</td>
</tr>
</table>
Also you do this work using simple code:
$(":radio").change(function(){
if (this.checked)
$(this).closest("td").css("background", this.value=="OK" ? "green" : "red");
});
You could pass in a variable along with the function call on the Ui
For example:
<form action="">
OK <input type="radio" name="radio1" id="radio1"value="OK" checked="color('ok')"/> <BR>
NO <input type="radio" name="radio2" id="radio2"value="NO" checked="color('no')"/>
Then in your Javascript you can catch the string and check for it's contents:
function color(CB) {
var TEMP = CB;
if(TEMP == 'ok') {
td1.bgcolor="green";
}
else if(TEMP == 'no'){
td1.bgcolor="red";
}
}
function color()
{
if(document.getElementById("radio1").checked)
{
document.getElementById("td1").style.backgroundColor = "green";
}
if(document.getElementById("radio2").checked)
{
document.getElementById("td1").style.backgroundColor = "#B35556";
}
}
<body>
<table>
<tr>
<td bgcolor="#B35556" id="td1">
<form action="">
OK <input type="radio" name="radio1" id="radio1"value="OK" onclick="color()"/> <BR>
NO <input type="radio" name="radio1" id="radio2"value="NO" onclick="color()" checked>
</form>
</td>
</tr>
</table>
</body>
This question already has answers here:
Setting "checked" for a checkbox with jQuery
(43 answers)
Closed 5 years ago.
I am trying to change the radio button according to a value entered by a user.
So if the value is 4 or more, I need to change the radio button to check the value Yes.
Else to check No.
Here is the script:
<td>a) Right <input type="text" class="form-control" style="width: 50px" name="right_result" id="right_result">/10 </td>
<td style="vertical-align: middle">
<input type="radio" class="radio-inline" name="monofilament_right_left" id="monofilament_right_left" value="Yes">Yes
<input type="radio" class="radio" name="monofilament_right_left" id="monofilament_right_left" value="No">No
</td>
And the jQuery script:
$("#right_result").on('keyup', function(){
var right_result = $("#right_result").val();
//console.log(right_result)
if(right_result>=4){
$('input[id="monofilament_right_left"]:checked').val("Yes")
}
})
The value is not changing when the user is adding the number in the text box.
I tried the solution
I've added some additional classes to select the radio buttons.
One thing to note is that IDs should be unique, you shouldn't use the same ID on two elements. That's why I've done this with classes.
This should work:
$("#right_result").on('keyup', function(){
var right_result = $("#right_result").val();
if(right_result>=4){
$('.yes-value').prop('checked', true);
} else if (right_result>0 && right_result<4) {
$('.no-value').prop('checked', true);
} else {
$('.yes-value, .no-value').prop('checked', false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>a) Right <input type="text" class="form-control" style="width: 50px" name="right_result" id="right_result">/10 </td>
<td style="vertical-align: middle">
<input type="radio" class="radio-inline yes-value" name="monofilament_right_left" value="Yes">Yes
<input type="radio" class="radio no-value" name="monofilament_right_left" value="No">No
</td>
Use different id for each radio like the following:
$("#right_result").on('keyup', function(){
var right_result = $("#right_result").val();
//console.log(right_result)
if(right_result>=4){
$('#monofilament_right_left1').prop("checked", true);
}
else{
$('#monofilament_right_left2').prop("checked", true);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>a) Right <input type="text" class="form-control" style="width: 50px" name="right_result" id="right_result">/10 </td>
<td style="vertical-align: middle">
<input type="radio" class="radio-inline" name="monofilament_right_left" id="monofilament_right_left1" value="Yes">Yes
<input type="radio" class="radio" name="monofilament_right_left" id="monofilament_right_left2" value="No">No
</td>
I want to check/uncheck all check boxes of a particular row in a table if Select all Checkbox is selected for that particular row
Here is the html for a single row.
<tr>
<td class="left">
<label>Admin - Organization</label>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="selectallAO" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxViewAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxAddAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxEditAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxDeleteAOrganization" runat="server" /></label>
</div>
</td>
</tr>
There are 5 other rows like this for other pages as well. So, I want to check/uncheck all checkbox's for a particular row for which Select All was checked/unchecked.
UPDATE
Updated the jQuery function to make the master checkbox override child checkbox states.
How does something like this sound? I wasn't sure which classes were your checkboxes so you'll have to tweak this a bit:
HTML:
<div class="spacer"><input type="checkbox" class="selectallAO"> Select All</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
CSS:
div.spacer {
display: block;
}
JS:
$('.selectallAO').click(function() {
this.checked ? $('.checkboxAO').prop('checked', true) : $('.checkboxAO').prop('checked', false);
});
jsFiddle
The .parents("form:first") selector ensures that it only applies to those elements that are in the same form as the inputs you want to change. If for some reason you want to change elements outside of the form then you will need to remove that.
$(function() {
$(".selectallAO").on("click", function() {
debugger;
if ($(this).prop("checked")) {
$(this).parents("form:first").children(".checkboxAO").prop("checked", true);
} else {
$(this).parents("form:first").children(".checkboxAO").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="test" value="1" class="selectallAO">Select All</input>
<input type="checkbox" name="test" value="1" class="checkboxAO">1</input>
<input type="checkbox" name="test" value="2" class="checkboxAO">2</input>
<input type="checkbox" name="test" value="3" class="checkboxAO">3</input>
<input type="checkbox" name="test" value="4" class="checkboxAO">4</input>
</form>
below is the code to check a default value for the radiobutton tag by giving checked="checked", but i am not able to display the related form by default, it can be displayed only when i click on it, how to display anyone of these forms by default ?
HTML:
<form>
<label><input value="1" type="radio" name="formselector" checked="checked" onclick="displayForm(this)">Old Definitions</label>
<label><input value="2" type="radio" name="formselector" onclick="displayForm(this)">New Definition</label>
</form>
<panel method="post" style="visibility:hidden" id="form1" name="form1">
<table style="width:100%;">
<tr>
<th ><span class="dropt">ID Reserve Tracks</th>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" >
</td>
</tr>
</table>
</panel>
<panel style="visibility:hidden" id="form2">
<table style="width:100%;">
<th ><span class="dropt">MD Reserve Tracks</th>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" >
</td>
</table>
</panel>
JavaScript:
function displayForm(c){
if(c.value == "1"){
document.getElementById("form1").style.visibility='visible';
document.getElementById("form2").style.visibility='collapse';
}
else if(c.value =="2"){
document.getElementById("form1").style.visibility='collapse';
document.getElementById("form2").style.visibility='visible';
}
else{
}
}
jsfiddle: http://jsfiddle.net/uLkHk/
Your Html is not well formed, you should improve that.
To make it work as you want, just do not set the option checked in HTML. Then select it in JavaScript, calling the Click method.
See this, I modified a little your HTML, and it works.
<html>
<body>
<form>
<label>
<input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
Definitions</label>
<label>
<input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
Definition</label>
</form>
<form method="post" style="visibility: hidden" id="form1" name="form1">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">ID Reserve Tracks</span>
</td>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<form style="visibility: hidden" id="form2">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">MD Reserve Tracks</span>
</td>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<script>
function displayForm(c) {
if (c.value == "1") {
document.getElementById("form1").style.visibility = 'visible';
document.getElementById("form2").style.visibility = 'collapse';
}
else if (c.value == "2") {
document.getElementById("form1").style.visibility = 'collapse';
document.getElementById("form2").style.visibility = 'visible';
}
else {
}
}
</script>
<script>
document.getElementById('radioOld').click();
//document.getElementById('radioOld').checked = true;
//var theDefaultOption = document.getElementById('formselector');
//displayForm(theDefaultOption);
</script>
</body>
</html>
Or you can simply set the default panel's visibility to visible in the HTML as Barmar said.
I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here:
<script type="text/javascript" charset="utf-8">
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#editRecord").validate();
});
</script>
<style type="text/css">
.block { display: block; }
form.cmxform label.error { display: none; }
</style>
</head>
<body>
<div id="header">
<h1>
Questions</h1>
</div>
<div id="content">
<h1>
Questions Page 1
</h1>
</div>
<div id="content">
<h1>
</h1>
<form class="cmxform" method="post" action="editrecord.php" id="editRecord">
<input type="hidden" name="-action" value="edit">
<h1>
Questions
</h1>
<table width="46%" class="record">
<tr>
<td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
<td width="15%" valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td width="64%" valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
On your <textarea> elements, add a dependency expression for required, for example for question 1, do this:
validate="required:'input[name=Question1][value=Yes]:checked'"
This says if $('input[name=Question1][value=Yes]:checked').length > 0 then the field is required, so if Yes is checked, it's required :)
You can see a working demo here
You can do something like this:
$("#editRecord").validate({
rules: {
'Details1': {
required: function() {
return $('input[name=Question1]').val() == 'yes';
}
}
'Details2': {
required: function() {
return $('input[name=Question2]').val() == 'yes';
}
}
}
});
In response to Nick Craver's suggested response above, I found the correct syntax to be:
class="validate[required][name=Question1][value=Yes]:checked"
instead of what he posted.
Thanks for putting me on the right track, though!