I need to check which radio button list is clicked and for the clicked to send a jQuery ajax call, at the moment I have table id plan1, plan2, plan3, generated with php. each has a radio button list, with jQuery each how is it possible to make this happen?
This is what i have done,
$("input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
to make it available for dynamic contents, i can do as below but its not practical since i dont know how many plans will be there.
$("#plan1 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
$("#plan2 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
$("#plan3 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});
how can i make it dynamic and get current clicked radio button value please
here is the JS fiddle
<table id='plan1'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>3 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>5 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>10 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan2'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>2 Games</lable
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>4 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>9 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan3'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>4 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>6 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>11 Games</lable>
<br>
</td>
</tr>
</table>
var selectedPlan = $("input[name='Plan[packageId]']:checked").val();
alert(selectedPlan);
<table id='plan1'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>3 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>5 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>10 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan2'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>2 Games</lable
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>4 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>9 Games</lable>
<br>
</td>
</tr>
</table>
<br>
<table id='plan3'>
<tr>
<td style="vertical-align: top;">
<input type="radio" value="1" name="Plan[packageId]">
<lable>4 Games</lable>
<br>
<input type="radio" value="2" name="Plan[packageId]" checked>
<lable>6 Games</lable>
<br>
<input type="radio" value="3" name="Plan[packageId]">
<lable>11 Games</lable>
<br>
</td>
</tr>
</table>
You can bind change event using .on() as elements created are dynamic.Use start with selector to choose table having id start with plan (like plan1, plan2...) and then input with name attribute as shown below
$(document).on('change','table[id^=plan] input[name="Plan[packageId]"]', function(){
//get clicked radio button value
alert($(this).val());
//you can find parent table id or any relevant element
var table = $(this).closest('table').attr('id');
alert(table);
});
JSFiddle Demo
Here is the working demo:
$(document.body).on('click','.radioPanle', function(){
alert($(this).val());
});
http://jsfiddle.net/2nb32s47/7/
I have applied common class name to each radio button for ease.
You will get value of radio button and pass it to ajax call.
First of all, your radio groups should be called the same. I mean, all radio options in group 1 should be called "Plan1", then all radio options in group 2 should be called "Plan2" etc.
Finally with these lines you'll able to get your info, and it doesn't matter if you have 3 forms or a hundred forms:
$("input:radio").change(function(e) {
//this will give you the selected value:
alert ($(this).val());
//this will tell the radio group where it belongs
alert ($(this).attr("name"));
//this will tell the form where it belongs
var $form = $(this).closest('form');
alert($form.attr('name'));
//here you can start your AJAX call or whatever you need
});
If you do it like this, users will be able to select one option from every group, however, if you want the user to be able to select only one option from all groups, then you would have to use the same name for all radio buttons, but the code above will still work.
Elements are created "dynamically" but that's PHP's job. Your browser and JQuery doesn't care about that, which means, all elements are loaded in the DOM when your page loads, so they're not dynamic to them.
Related
I have a form with a table and when the user click the radio button No the content of the following cells in that row should be visible. And when clicking Yes, the content should be hidden again. There is no difference now. It works outside the table.
I have tried style="display:table-cell" in a div-tag and in the td-tag - no success.
Picture of the form for the user
The error message in DevTools is: TypeError: Cannot read properties of null (reading 'checked')
at yesnoCheck
Picture of error message in DevTools
function yesnoCheck(var1, var2) {
if (document.getElementById(var1).checked) {
document.getElementById(var2).style.display = 'none';
} else document.getElementById(var2).style.display = 'block';
}
th {
background-color: #dddddd
}
<h1>Hide input fields based on radio button selection</h1>
<h3>Frame</h3>
Propellers OK?<br />
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">Yes
<input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">No<br>
<div id="ifNo" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /> Frame arms OK?<br />
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />No
<div id="framearmsDiv" style="display:none">
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
<br /><br />
<form>
<table style="width:100%">
<tr>
<th>What to do</th>
<th>OK</th>
<th>Replaced</th>
<th>Date</th>
<th>Checked by</th>
</tr>
<tr>
<td>The propellers, motors, and aircraft body are intact, and there is no sign for collision or loose or broken structures.</td>
<td><input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />Yes
<input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="No" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />No
</td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<td><input type="checkbox" id="aftercheckbodyC" value="Yes" /></td>
</div>
<td><input type="date" id="aftercheckbodyD" /></td>
<td><input type="text" id="aftercheckbodyT" /></td>
</tr>
<tr>
<td>The temperature of the motors is normal and there are no signs of uneven heating.</td>
<td> <input type="radio" name="afterchecktempR" value="Yes" />Yes
<input type="radio" name="afterchecktempR" value="No" />No
</td>
<td><input type="checkbox" id="afterchecktempC" value="Yes" /></td>
<td><input type="date" id="afterchecktempD" /></td>
<td><input type="text" id="afterchecktempT" /></td>
</tr>
</table>
</form>
There is not a element with id 'framearms' that's why it's null
<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes
You need
Valid HTML - you have divs between the cells
Unique IDs.
Consistent use of name, tags, values etc.
No need to prefix everything with javascript:
I strongly recommend you wrap each set in a container, then you do not need inline JS you can just look at the value and use hidden=value==="Yes"
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
const hide = tgt.value === "Yes";
tgt.closest("div").querySelector("div").hidden = hide; // hide the nested div
})
th {
background-color: #dddddd
}
<div id="container">
<h1>Hide input fields based on radio button selection</h1>
<h2>Frame</h2>
<div>
<h3>Propellers OK?</h3>
<input type="radio" name="yesno" value="Yes">Yes
<input type="radio" name="yesno" value="No">No<br>
<div hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
<div>
<h3>Frame arms OK?</h3>
<input type="radio" name="framearms" value="Yes" />Yes
<input type="radio" name="framearms" value="No" />No
<div id="framearmsDiv" hidden>
<input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" />
</div>
</div>
...
</div>
Two issues found in your code
1. <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" >
Quotes are missing for input field as it should be string - id of control
- <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck('aftercheckbodyR', 'aftercheckbodyDiv');"
2. In correct HTML - include 'aftercheckbodyDiv' <div> tag inside <td>
<td>
<div id="aftercheckbodyDiv" style="display:table-cell">
<input type="checkbox" id="aftercheckbodyC" value="Yes" />
</div>
</td>
When i add two function in form everything goes okay but nothing submitted like value=1 or value=2
<form method="get" name="formSubmit" onsubmit="return !!(download() & brojac());">
<input type="checkbox" name="formWheelchair" value="1" />Razglednica 1<br>
</td>
<td align="center">
<input type="checkbox" name="formWheelchair" value="2" />Razglednica 2<br>
</td>
<td align="center">
<input type="checkbox" name="formWheelchair" value="3" />Razglednica 3<br>
</td>
<div align="center">
<input type="submit" class="button" name="formSubmit" value=" E-MAIL SA SELFIEM" />
</form>
make third function and put both function in it. and then onsubmit call that third function.
put your javascript file for more briefly explanation.
I'm trying to set up a series of radio buttons which will become unchecked after clicking another one, i.e. only one can be checked at a time. I also make a text area below the radio buttons appear or disappear based on which radio button has been selected. My html is
<table id="tableId">
<tbody>
<tr>
<td>
<div id="selectTitle">
Some Select
</div>
<select id="stuff">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</td>
</tr>
<tr>
<td>
<div>
Radio Options
</div>
<ul>
<li>
<input id="rad1" type="radio" /> rad1 </li>
<li>
<input id="rad2" type="radio" /> rad2 </li>
<li>
<input id="rad2" type="radio" /> rad3 </li>
</ul>
</td>
</tr>
<tr>
<td>
<input id="textArea" type="textarea" />
</td>
</tr>
</tbody>
</table>
and my javascript is
$("#rad1").click(function() {
$("#rad2").prop("checked", false);
$("#rad3").prop("checked", false);
$("#textArea").hide();
});
$("#rad2").click(function() {
$("#rad1").prop("checked", false);
$("#rad3").prop("checked", false);
$("#textArea").hide();
});
$("#rad3").click(function() {
$("#rad1").prop("checked", false);
$("#rad2").prop("checked", false);
$("#textArea").show();
});
Here's the problem:
rad1 and rad2 work correctly. When you click on them, the buttons toggle from being checked to unchecked as expected. However, when you click rad3, it stays checked, and won't become unchecked until you refresh the page. I looked through the cases, and nothing seems to be different between them. Here's a jsfiddle with my code. Any help is appreciated!
If you give your radio inputs same name, they would work as you uexpect:
<ul>
<li><input id="rad1" name="rad" type="radio" /> rad1 </li>
<li><input id="rad2" name="rad" type="radio" /> rad2 </li>
<li><input id="rad3" name="rad" type="radio" /> rad3 </li>
</ul>
If you want to group radio buttons they all need to have the exact same name attribute. Then you get the behaviour by default. From there you can apply a single change event handler to toggle the #textarea element based on the selected value.
Also note that you duplicated the rad2 id, which is invalid, and also radio inputs require a value attribute. Try this:
$('input[name="foo"]').change(function() {
$('#textArea').toggle(this.value == '3');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input id="rad1" type="radio" value="1" name="foo" />rad1</li>
<li><input id="rad2" type="radio" value="2" name="foo" />rad2</li>
<li><input id="rad3" type="radio" value="3" name="foo" checked="true" />rad3</li>
</ul>
<input id="textArea" type="textarea" />
You must put thename property to all your radios in a group.
The name should be the same in your 3 radios.
like:
<input type="radio" name="radio" value="Val 1">
<input type="radio" name="radio" value="Val 2">
Line 26 in your HTML has an issue, you have duplicated the ID for type rad3.
Changed the id to rad3 and seems to be working as expected.
I have an HTML table with one cell per row that contains five checkboxes:
<td class="days">
<label><input type="checkbox" name="mon" id="mon" value="1" class="form-control" />M</label>
<label><input type="checkbox" name="tue" id="tue" value="2" class="form-control" />Tu</label>
<label><input type="checkbox" name="wed" id="wed" value="3" class="form-control" />W</label>
<label><input type="checkbox" name="thu" id="thu" value="4" class="form-control" />Th</label>
<label><input type="checkbox" name="fri" id="fri" value="5" class="form-control" />F</label>
</td>
I need my javaScript to check the values of each checkbox to compare with something else. I have tried the following ways to get the value of the checkboxes mon, tue, wed, thu and fri but they don't seem to work:
var table = document.getElementById("leaveTable");
var monValue = table.rows[row].cells[5].namedItem("mon").firstChild.value;
(the cell containing the checkboxes has an index of 5)
I have multiple rows, all identical apart from the row index so that I can pass the row index as a parameter to my functions and the same functions will work irrespective of the row.
I'm only using javaScript and not JQuery, so please only answer with javaScript suggestions. Thanks
You can use querySelectorAll() on the row to get all input elements in it
var idx = 0;
var table = document.getElementById("leaveTable");
var inputs = table.rows[idx].querySelectorAll('input[type="checkbox"]'); //'input[type="checkbox"]:checked' if you want only checked
for (var i = 0; i < inputs.length; i++) {
snippet.log(inputs[i].value + ':' + inputs[i].name + ':' + inputs[i].nextSibling.nodeValue)
}
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<table id="leaveTable">
<tr>
<td class="days">
<label>
<input type="checkbox" name="mon" id="mon" value="1" class="form-control" />M</label>
<label>
<input type="checkbox" name="tue" id="tue" value="2" class="form-control" />Tu</label>
<label>
<input type="checkbox" name="wed" id="wed" value="3" class="form-control" />W</label>
<label>
<input type="checkbox" name="thu" id="thu" value="4" class="form-control" />Th</label>
<label>
<input type="checkbox" name="fri" id="fri" value="5" class="form-control" />F</label>
</td>
</tr>
</table>
This is my html:
<input id="source" type="radio" name="source" value="1" />
<input id="source" type="radio" name="source" value="2" checked="" />
<table id="dataList">
<tr row='12'><td>this is row 12</td></tr>
<tr row='13'>
<td>
<input id="item" type="radio" name="item" value="1" />
<input id="item" type="radio" name="item" value="2" />
</td>
</tr>
<tr row='14'><td>this is row 14</td></tr>
</table>
any my jquery:
jQuery(document).ready(function() {
jQuery('input[name=source]').click( function() {
if(jQuery('input[value=1]').is(':checked')) {
jQuery('#dataList tr[row=13]').show();
} else if(jQuery('input[value=2]').is(':checked')) {
jQuery('#dataList tr[row=13]').hide();
}
})
})
Supposedly when the page loaded, the tr row='13' will be hide if the radio button id=source with value=2 is checked. but it not happen as expected. Please help me.
You can try
$('tr[row="13"]').hide();
right after ng jQuery(document).ready(function() { since you said 'when the page loaded'.
You could change your target. I don't know what its called but this thing $('TARGET').Since you have 2 inputs that has a value of 1.
See the following,
<input id="source" type="radio" name="source" value="1" />
and
<input id="item" type="radio" name="item" value="1" />.
It may cause overwriting of commands.