I tried setting radio button checked to checked="checked" however this does not seem to work .
I have tried using
$(id_radio).prop('checked',true);
document.getElementById("id_radio").checked = true;
document.getElementById("id_radio").checked = true;
document.getElementById("id_radio").checked;
$(id_radio).attr('checked',checked);
But none of them seems to be changing the attribute of checked to checked="checked"
Below is my code
js_file.js
$(document).ready(function(){
$("document").on("click",".class_radio3",function(){
var id_radio=$(this).attr('value');
$(id_radio).prop('checked',true);
console.log(id_radio);
});
});
My code for creating table
<br>
<p class="uk-text-primary uk-text-bold"><u> General Message </u></p>
<table class="uk-table uk-border-rounded uk-grid-width-* uk-panel-box uk-text-justify" border="1">
<!--create top table -->
<tr> <!--tr defines a row --> <!-- define row 1 -->
<th class="uk-width-1-10"> Recipient </th> <!-- th defines a header cell-->
<th class="uk-width-1-3"> Message </th>
<th class="uk-width-1-10"> Action </th>
<th class="uk-width-1-10"> Default message </th>
</tr>
<!-- row 2 : display results onwards and creates dynamically -->
<!-- input fields at the bottom -->
<?php
include "../connect.php";
$get_data2admin = $db->query("SELECT ID,message,user FROM test_table_1 WHERE user='General'");
if( $get_data2admin->num_rows >0 ){ //if selected rows is more than zero
while($row_msg = $get_data2admin->fetch_assoc()){
$row_msg_id=$row_msg['ID']; //$row_msg['ID'] directly using it wont display in id tag attribute
echo "<tr>";
echo "<td>".$row_msg['user']."</td>";
echo "<td>".$row_msg['message']. "</td>";
?>
<td>Delete</td>
<?php
if($row_msg['user']=='General'){
echo "<td>"."<input class='class_radio3' type='radio' name='name_radio2' value='$row_msg_id' checked=''/>"."</td>";
}
else{
echo "<td>"."-"."</td>";
};
echo "</tr>";
}
}
?>
</table>
What could be the issue? Any insight/solution? Am a beginner in PhP any advice would be helpful. Thank you
Note
Its printing out the right id selected so i dont think its selection issue
A sidenote: another issue if i try using e.preventDefault at
$("document").on("click",".class_radio3",function(e){
e.preventDefault();
The radio button becomes un-clickable.Why is that so?
Update 1: Picture of what is the issue
Try This
HTML
if($row_msg['user']=='General'){
echo "<td>"."<input id='$row_msg_id' class='class_radio3' type='radio' name='name_radio2' value='$row_msg_id' />"."</td>";
}
JS
var id_radio=$(this).attr('id');
$('#' + id_radio).prop('checked',true);
Check the below,
You can use attr like below but i would recommend use prop
function chk(element) {
$(element).attr("checked", "checked");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="age">10</label>
<input type="radio" name="age" value="10" onclick="chk(this);" />
<label for="age">15</label>
<input type="radio" name="age" value="15" onclick="chk(this);" />
I think there are a couple of issues here... one is that only one radio can be checked per group - i.e. radios with the same "name". Having checked="" is the same as checked="checked" - the absence of the attribute altogether is the "unchecked" state.
div {
width: 50%;
float: left;
}
<div>
<h1>Group 1</h1>
<p><input type="radio" name="group1" value="1" checked="checked" />1</p>
<p><input type="radio" name="group1" value="2" checked="checked" />2</p>
<p><input type="radio" name="group1" value="3" checked="checked" />3</p>
<p><input type="radio" name="group1" value="4" checked="checked" />4</p>
<p><input type="radio" name="group1" value="5" checked="checked" />5</p>
</div>
<div>
<h1>Group 2</h1>
<p><input type="radio" name="group2" value="1" checked="checked" />1</p>
<p><input type="radio" name="group2" value="2" />2</p>
<p><input type="radio" name="group2" value="3" />3</p>
<p><input type="radio" name="group2" value="4" />4</p>
<p><input type="radio" name="group2" value="5" />5</p>
</div>
Secondly, in your code, you are saying (if I understand what PHP is outputting correctly), onclick of this input (radio), set the thing with an id that is the same as my value's property "checked" to true. That thing with an id is the a tag. An a tag does not have this checked property. See below where I'm setting its background to red (via a class), instead.
By default, a radio button will become checked on click, so you don't need to reiterate this default behavior.
I have also updated the code to respond when an input's value changes, as opposed to when the document is clicked and the target was the input. It is a little lighter performance-wise to listen for the more limited scope than the broader one you had. The approach that you used used to be referred to as a "live" listener in jQuery and is more appropriate for when JS is adding and removing elements that you're listening for on the page; in your case, PHP is rendering them, so we don't need it.
Additionally, jQuery selectors require a # to indicate id, a . to indicate class, and without these selectors, it assumes it is a tag. See below where I am appending a # to select the a with the id.
// This is listening for any radio buttons who were clicked, instead of any clicks on the document (it's a little more efficient)
$("input[type=radio]").on("change", function() {
// get the other radio buttons in this group
var $group = $('input[name=' + $(this).attr('name') + ']');
// Go through the group and if the input is checked, add the class to the corresponding element, otherwise, remove it
$group.each(function() {
var id_radio = "#" + $(this).attr('value');
if ($(this).is(":checked")) {
$(id_radio).addClass("radio-is-checked");
} else {
$(id_radio).removeClass("radio-is-checked");
}
});
});
.radio-is-checked {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="uk-text-primary uk-text-bold"><u> General Message </u>
</p>
<table class="uk-table uk-border-rounded uk-grid-width-* uk-panel-box uk-text-justify" border="1">
<!--create top table -->
<tr>
<!--tr defines a row -->
<!-- define row 1 -->
<th class="uk-width-1-10">Recipient</th>
<!-- th defines a header cell-->
<th class="uk-width-1-3">Message</th>
<th class="uk-width-1-10">Action</th>
<th class="uk-width-1-10">Default message</th>
</tr>
<!-- row 2 : display results onwards and creates dynamically -->
<!-- input fields at the bottom -->
<tr>
<td>$row_msg['user']</td>
<td>$row_msg['message']</td>
<!-- Since the radio in this row is checked by default, also apply the corresponding class -->
<td>Delete
</td>
<td>
<input class='class_radio3' type='radio' name='name_radio2' value='one' checked />
</td>
</tr>
<tr>
<td>$row_msg['user']</td>
<td>$row_msg['message']</td>
<td>Delete
</td>
<td>
<input class='class_radio3' type='radio' name='name_radio2' value='two' />
</td>
</tr>
<tr>
<td>$row_msg['user']</td>
<td>$row_msg['message']</td>
<td>Delete
</td>
<td>
<input class='class_radio3' type='radio' name='name_radio2' value='three' />
</td>
</tr>
</table>
Thirdly, the "default" behavior of a radio button is to become checked. By doing e.preventDefault you're cancelling that default behavior, so it doesn't become checked!
Related
i have a coding. In that checkbox may or may not be checked, if it is checked there is no error if the checkbox is not checked then error occurs. can anyone give solution for this
this is my html code for checkbox
<input name="cb" type="checkbox" id="set_2" value="20"/> Project<td><i class = "pro_hidden pro_option_set_2"> Included</i></td>
If the check box is checked it takes the value 20 and if not checked it will not take the value but it shows Notice: Undefined index: cbI also included javascript if the checkbox is checked it shows included. if not checked it displays nothing...the javascript coding s this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">/script>
<script>
$('.pro_hidden').css({
'display': 'none'
});
$(':checkbox').change(function() {
var option = 'pro_option_' + $(this).attr('id');
if ($('.' + option).css('display') == 'none') {
$('.' + option).fadeIn();
}
else {
$('.' + option).fadeOut();
}
});
</script>
I am trying to add values:
<tr>
<td>duration</td>
<td><input type="text" name="duration" values="">
</td>
</tr>
<tr>
<td><input type="radio" name="rd" value="2" required>2hrs</td>
<td><input type="radio" name="rd" value="4" required>4hrs</td>
</tr>
<tr>
<td>
<input name="cb" type="checkbox" id="set_2" value="20"> Project<td><i class = "pro_hidden pro_option_set_2"> 20hrs Included</i></td>
</td>
this is my entire code if this form is submitted it goes to next page and add the values using php
<?php
$du=$_POST['duration'];
$cb=$_POST['cb'];
$c=$_POST['rd'];
$sum=($du+$cb)/$c;
echo $sum;
?>
if checkbox is not checked it displays error here...if the checkbox is not checked how to give coding??
When checkbox isn't checked, it is not submitted to the server and therefore undefined in PHP. You have to use isset function before accessing any $_GET or $_POST variable.
Instead of this
$du = $_POST['duration'];
$cb = $_POST['cb'];
$c = $_POST['rd'];
You should do this
if(isset($_POST['duration']))
$du = $_POST['duration'];
if(isset($_POST['cb']))
$cb = $_POST['cb'];
if(isset($_POST['rd']))
$c = $_POST['rd'];
For more details refer to documentation.
If the checkbox is not checked, no value is passed. So before checkbox you have to place with the same name and default value.
<input name="cb" value="default" type="hidden">
<input name="cb" type="checkbox" id="set_2" value="20">
I am trying to make textbox readonly or not depending on the value of a checkbox of personalLoan. If personalLoan checkbox is checked I want the text to be not readonly. If it is unchecked then I want the text box to be readonly. Here is one of the rows
<tr id="mytableRows">
<td class="even"><input type="checkbox" value="true" name="homeLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="autoLoan" ></td>
<td class="even"><input type="checkbox" value="true" name="personalLoan" ></td>
<td class="odd"><input type="checkbox" value="true" name="noLoan" ></td>
<td class="odd"><input type="text" name="peronalAmount" value="1" readonly></td>
</tr>
I so far has this code
$(document).ready(function(){
$('.test tr').click(function (event) {
$(this).find(':checkbox').each(function(p){
if($(this).attr('name') == 'personalLoan'){
if ($(this).is(':checked')) {
alert("checked");
}else{
alert("unchecked");
}
}
});
});
});
This tells me the current status of the checkbox but what I really need is to know onchange of the personalLoan checkbox so I can make the textbox readonly or not in that row (td)
thanks
For my own sanity, here is what I understand the solution to be.
$('input[type=checkbox]', '.test').on('change', function(e) {
if (this.name === 'personalLoan') {
$(this).parents('tr').find('input[type=text]').prop('readonly', !this.checked);
}
});
Assuming a table with class test, this allows input when personalLoan is checked, and toggles to readonly when unchecked.
Demo on jsFiddle. (I've highlighted the checkbox in red.)
If this isn't it, then I really have no idea what you're trying to do.
It seems to me that you really want radio buttons, not checkboxes, and that the amount field should be set to disabled rather than readonly if the user selects "no loan".
Anyhow, here's an approach you can take. I've put the code in–line for convenience, it can re-implemented in jQuery or whatever you want, it's just an example of how to do what you seem to be trying to do.
The timeout is used so that the one click event can be used for any element in the form, including the reset button.
<form onclick="
var form = this;
setTimeout(function() {
form.personalAmount.readOnly = form.loanType[3].checked;
},0);
">
<table>
<tr>
<td><input type="radio" value="homeLoan" name="loanType">Home</td>
<td><input type="radio" value="autoLoan" name="loanType">Auto</td>
<td><input type="radio" value="personalLoan" name="loanType">Personal</td>
<td><input type="radio" value="true" name="loanType">None</td>
<td><input type="text" name="personalAmount" readonly></td>
<tr>
<td colspan="4">
<input type="reset">
</table>
</form>
Basically, I have two radio button 'yes' and 'no' and then a further two input fields.
[LabelQuestion] [RadioYes][RadioNo]
If yes, then... [TextField1]
If no, then... [TextField2]
By default I would like to have text fields 1 and 2 inactive/not able to enter in data until the relevant radio button has been selected and then that field only becomes available for data input.
I am a complete novice but I imagine this is achievable by using CSS and/or JavaScript. Please bear in mind I have next to know knowledge of JavaScript but can logically alter pre-existing JS code.
My current code looks like this:
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" name="field1" placeholder="" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" name="field2" placeholder="" />
</li><br>
How about this little number:
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("readonly",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("readonly");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("readonly");
$("#field2").focus();
}
});
});
You'll find a JSFiddle here.
Please note I've added an ID to both <input> fields. Let me know how it fairs.
If you prefer for the <input> fields to be disabled rather than readonly, just replace readonly with disabled everywhere. I personally think readonly is nicer as the Operating System seems to make more of it's own effect on disabled inputs.
The focus(), of course, isn't necessary - But the little things make a big difference and I always prefer it when a website moves my cursor to where it's expected to be for me.
You could use http://jquery.com/ to do this:
include this in the head of your html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
And also add this javascript:
<script type="text/javascript">
$(document).ready(function () {
function checkradiobox(){
var radio = $("input[name='example']:checked").val();
$('#field1, #field2').attr('disabled',true);
if(radio == "Yes"){
$('#field1').attr('disabled',false);
$("#field1").focus();
}else if(radio == "No"){
$('#field2').attr('disabled',false);
$("#field2").focus();
}
}
$("#example_0, #example_1").change(function () {
checkradiobox();
});
checkradiobox();
});
</script>
Check the jsfiddle for a working example http://jsfiddle.net/KFgbg/3/
Add this javascript/jQuery to your html, this should do the trick:
<script type="text/javascript">
$(function () {
// First add disabled properties to inputs
$("input:text").prop('disabled', true);
// Yes Input
$("#example_0").on("click", function () {
$("#input1").prop('disabled', false);
$("#input2").prop('disabled', true);
});
// No Input
$("#example_1").on("click", function () {
$("#input2").prop('disabled', false);
$("#input1").prop('disabled', true);
});
});
</script>
Very basic, just adds an onclick function to each of the inputs and enables or disables the 'disabled' property for the relevant text input. You will need to add the "#input1" and "#input2" ID's to the text inputs, naming can be as desired obviously.
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=false;document.getElementById('field2').disabled=true;"" type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=true;document.getElementById('field2').disabled=false;" type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" id="field1" name="field1" placeholder="" disabled="true" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" id="field2" name="field2" placeholder="" disabled="true" />
there are many ways to do this, but to edit your code as little as possible, here's one way:
give your textboxes ID attributes as well as names
disable via html attribute both text boxes to start
onclick of 'yes' radio button, enable field1 and disable field2
onclick of 'no' radio button, disable field1 and enable field2
<script language="Javascript">
function hideA()
{
document.getElementById("A").style.visibility="hidden";
document.getElementById("B").style.visibility="visible";
}
function hideB()
{
document.getElementById("B").style.visibility="hidden";
document.getElementById("A").style.visibility="visible";
}
</script>
</head>
<body>
<form name="f1" method="post" action="">
<table>
<tr><th>catagory</th><th><input type="radio" name="cat" value="seller"
onClick="hideB()">Seller
<input type="radio" name="cat" value="buyer" onclick="hideA()"> buyer</th>
</tr>
<div style="position: absolute; left: 30px; top: 100px;visibility:hidden" id="A">
Seller Name<input type='text' name='sname'><br>
Seller Product<input type='text' name='sproduct'>
</div>
<div style="position: absolute; left: 30px; top: 100px; visibility:hidden" id="B">
Buyer Name<input type='text' name='bname'><br>
Buy Product<input type='text' name='bproduct'>
</div>
</form>
I have an HTML table
<table id="sometable">
<tr>
<td>
<table class="wTable">
<tr>
<td>
<input type="radio" name="rdGroup" val="0" />
</td>
<td>
<input type="radio" name="rdGroup" val="5" />
</td>
<td>
<input type="radio" name="rdGroup" val="10" />
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for the table within a TD is for the purpose of skinning and positioning. I'm not great when it comes to JQuery and was wondering if there was a selector technique to get access to that radio button when that cell is clicked.
For example, previously my code was set as (before skinning):
<table>
<tr>header stuff</tr>
<tr>
<td>data</td>
<td>data 2</td>
<td><input type="radio" name="rdGroup" value="0"> No Warranty </br>
<input type="radio" name="rdGroup" value="5"> 1 year Warranty </br>
<input type="radio" name="rdGroup" value="10"> 2 year Warranty </br>
</td>
<td>data 3</td>
</tr>
<tr>footer stuff</tr>
</table>
Above is the original basic table structure.
$("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:first,#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:last").addClass("info");
The above added a class named info to the header and footer of the table (i didn't care for any of the data in them)
From there I created a td click function to process data:
$("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:not(.info) td:nth-child(7)").click(function() { //DO CODE HERE });
And within that click function I was able to access data from the other cells I needed:
var warval = 0;
warval = $(this).closest("tr").find("input[type=radio]:checked").val();
Is there a way for me to get access using the same style of coding to get access to when that cell is clicked to get the radio button value, and then leave that table to go back to the TD it is in, and then get access to the other td's using the $(this).closest("tr").find() method?
Thanks for any help you can provide.
I think you're looking for something like this:
$('table#sometable table.wTable td').click(function () {
var isChecked = $(this).children('input[type=radio]').val();
//To get 'back to the tr'
var $warval = $(this).closest("tr");
});
Ok, from what you said in the comments, I hope this is helpful:
First of all, I would advise changing the table markup to divs. This is not mandatory, but it will lead to cleaner and more manageable code. Something like this maybe:
<p>data 1</p>
<p>data 2</p>
<div>
<input type="radio" name="rdGroup" id="rdGroup_0" value="0" />
<label for="rdGroup_0">No Warranty</label>
</div>
<div>
<input type="radio" name="rdGroup" id="rdGroup_5" value="5" />
<label for="rdGroup_5">1 year Warranty</label>
</div>
<div>
<input type="radio" name="rdGroup" id="rdGroup_10" value="10" />
<label for="rdGroup_10">2 year Warranty</label>
</div>
<p>data 3</p>
<div class="footer">Footer</div>
Your jQuery hook could be as simple as this:
$(function() {
$('input[type=radio]').change(function() {
// do whatever needs to be done here when the radio button value changes
console.log("value '"+this.value+"' was selected for the warranty option");
});
});
If you need to set the corresponding value when loading the form with the data stored in your DB, you could do it with this function (if you've set your radio box IDs as shown above):
var setWarrantyOption = function(value) {
$('#rdGroup_' + value).click();
};
You can fiddle around with the code here: http://jsfiddle.net/gruese/fsj2v/
Please tell me if that helps or if I've maybe misunderstood your problem.
I have the following html.. 1 main div having 2 child divs.
I need to loop through both the divs and retrieve the checked radiobutton in each. e.g.: 1st child div has maybe checked while 2nd div has wright checked, i need to retrieve both their values. How do i go about it
<DIV>
<DIV>
<TABLE>
<TBODY>
<TR>
<TD>
wrong<INPUT class=XX disabled value=wrong type=radio name=radiobutton>
wright<INPUT class=XX disabled value=wright type=radio name=radiobutton>
maybe<INPUT class=XX value=maybe CHECKED type=radio name=radiobutton ></TD>
</TR></TBODY></TABLE>
</DIV>
<DIV>
<TABLE><TBODY><TR>
<TD>
wrong<INPUT class=XX CHECKED value=wrong type=radio name=radiobutton>
wright<INPUT class=XX value=wright type=radio name=radiobutton>
maybe<INPUT class=XX value=maybe type=radio name=radiobutton ></TD>
</TR></TBODY></TABLE>
</DIV>
</DIV>
You have two groups of radiobuttons from what I understand.
So, here's my solution:
HTML
<div>
<div>
<table>
<tbody>
<tr>
<td>wrong
<input class="xx" disabled="disabled" value="wrong" type="radio"
name="radiobutton">wright
<input class="xx" disabled="disabled" value="wright" type="radio"
name="radiobutton">maybe
<input class="xx" value="maybe" checked="checked" type="radio" name="radiobutton">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td>wrong
<input class="xx" checked="checked" value="wrong" type="radio" name="radiobutton2">wright
<input class="xx" value="wright" type="radio" name="radiobutton2">maybe
<input class="xx" value="maybe" type="radio" name="radiobutton2">
</td>
</tr>
</tbody>
</table>
</div>
</div>
jQuery
var radiobutton = $("input[name='radiobutton']:checked").val();
var radiobutton2 = $("input[name='radiobutton2']:checked").val();
alert('1st - '+radiobutton+' / 2nd - '+radiobutton2);
DEMO
EDIT
jQuery
var checked = new Array();
var pos = 0;
$("input[type='radio']:checked").each(function(){
checked[pos] = new Array(2);
checked[pos]['name'] = $(this).attr('name');
checked[pos]['value'] = $(this).val();
pos++;
});
var result = "";
for(i=0; i<pos; i++){
result += checked[i]['name'] + " - " + checked[i]['value'] + " / ";
}
alert(result);
DEMO
Is this what you are looking for: Working demo http://jsfiddle.net/79syA/
In your HTML you only have wrong input radio checked, also make your html lowercase is there any reason why it is upper case :)
Rest hope this fits your need & feel free to play around with demo! :)
code
$('.XX').each(function(){
if($(this).is(':checked')){
alert(" Checked value is ==> " + this.value);
}
})