I have this table containing 3 radio buttons, I want to find out whether a particular radio button is check or not at given point of time.
<table align="center" width="100%" border="0">
<tbody>
<tr>
<td>
<input type="radio" name="compareRadio" value="all" checked="checked"/>
<label>View All Records</label>
</td>
<td>
<input type="radio" name="compareRadio" value="diff" />
<label>View Differences</label>
</td>
<td>
<input type="radio" name="compareRadio" id="patch" value="patches" />
<label>Compare Patches</label>
</td>
<td>
<input type="button" class="btn" value="Export Into Excel"/>
</td>
</tr>
</tbody>
</table>
I send a request to the server, when the result comes back I want to identify whether patches radio button is selected or not.
So I did something like this.. but it returns all radio button
$.post("/csm/compare.action",
{
sessiontoken: sessiontoken,
compareCategory: "system",
compareSubCategory:"patch",
xml1:absP[0],
xml2:absP[1]},
function(resdata)
{
comparePatchData=resdata;
comparePatchLoading=false;
if($("input:radio[name=compareRadio]").val()=="patches")
{
//Trigger click on radio button for "same" campare
$('input[name=compareRadio]:eq(2)').click(); //so that it refreshes the content
$("input[name=compareRadio]:eq(2)").attr("checked", true);
$('input[type="radio"]').removeAttr('disabled');
}
}
);
If you just want to know if it is checked or not, then you could do this:
if($('#patch:checked').length)
// It is checked.
Or:
if($('input[value=patches]:checked').length)
// It is checked.
The $() function returns an array of matched elements so you can check its length property to see how many things (if any) were matched.
References:
:checked selector
Attribute equals selector
To find out if particular checkbox is checked you can use jQuery's is():
if($('input[value=all]').is(':checked'))
{
//Yep, it's checked
}
Related
i have a loop in my laravel project which contain checkbox and input
#foreach($s as $sh)
<tr>
<td><input type="checkbox" name="service_id[]" class="checkser" value="{{$sh->id}}"></td>
<td class="checkservice">{{$sh->name}}</td>
<td> <input type="text" class="form-control checkser inputservice" placeholder="{{trans('home.quantity')}}" name="ser_quantity[]" ></td>
<td>{{$sh->price}}</td>
</tr>
#endforeach
i need to fill text input with (1) when checkbox checked
and empty this when checkbox unchecked
i tried many method but failed to work this with next input only
You can do this using jquery and bind a change event handler to your checkbox.
Also, use closest method.See reference here.
$('.checkser').change(function() {
if($(this).is(":checked")) {
$(this).closest('tr').find('.inputservice').val(1);
}
else
$(this).closest('tr').find('.inputservice').val('');
});
Try jQuery is() method
if($(".checkser").is(':checked'))
$(".inputservice").val(1); // checked
else
$(".inputservice").val(''); // unchecked
Just use $(selector).is(':checked')
It returns a boolean value.
I'm developing an extension that saves to storage, If the form has more than one button with the same id (not name so much, id is the identifier for chrome extensions), my check doesn't work.
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Submit" value="Edit" id="action" name="action" style="width: 100%" /></td>
</tr>
Won't trigger my js (below), but this will
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
JS
function manageItem() {
if (action.value=='Add') {
...
}
}
My intent was to use it like
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
If I only have one button with the id action, this works. If I have more than one button, this doesn't work at all.
For instance, when a browser submits to server side script, only the clicked submit button has its value sent, so this situation would work with that (just as an example).
I've tried testing each row in its own form, but I still get conflict when two elements have the same ID. What can I do?
Edit: I thought I had included in my question that I do know that id's cannot repeat, but I didn't explicitly say that. I know that in well-formed html, IDs cannot repeat, but I don't know how I can achieve this.
You should use class="action" instead of id="action", ids can't repeat.
Also, a typo: replace if (action.value='Edit') { with if (action.value=='Edit') {
In your current html, you don't really need neither ids or classes (but name is still needed) - you can remove these attributes, nor
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
To distinguish between your buttons, you can just use the following:
document.getElementsByName("action")[0].onclick=function(){
//first button clicked
}
document.getElementsByName("action")[1].onclick=function(){
//second button clicked
}
I have a list of items that need to be selected and take an action based on user's request.
User selects the items and click on one of the btns to do something on the items.
My code is as following but I am not sure how to complete it. I believe, need to put them in a form to be submitted or pass the but not sure how to have a form with two submit btns, (if I need to have ).
<body>
<p><b>Shopping cart</b></p>
<table>
<tbody>
<c:forEach items="${mycart.items}" var="item">
<tr>
<td>
<input type="checkbox" name="Items"
value="${item.ID}"/>
</td>
<td>
Name : ${item.name}
</td>
</tr>
</c:forEach>
</tbody>
</table>
checkout
Delete
you can easily have two <input type="submit" name="something" /> in one <form>
if you want to differentiate the actions, just use different name for each submit button
EDIT:
<form ...>
...
...
<input id="b1" type="submit" name="edit" value="Edit"/>
<input id="b2" type="submit" name="delete" value="Delete"/>
</form>
If the form above is submitted by clicking #b1, then your request will contain a parameter named "edit". If the submit is triggered by #b2, then it will contain "delete".
I think following script might let you obtain what items are checked.
With jQuery, you need implement your checkout() like this
function checkout() {
$('input[name="Items"]:checkbox').each(function() {
if ($(this).attr("checked")) {
alert($(this).val() + 'is checked');
} else {
alert($(this).val() + 'is not checked');
}
}
);
}
I have some radio buttons in a table. I want to show/hide certain divs in a sibling td when I select certain radio buttons.
Here's the code I have:
$("input[type='radio'].map").change(function () {
$(this).closest('tr').find('.agency-mapping').show();
$(this).closest('tr').find('.agency-new').hide();
});
$("input[type='radio'].new").change(function () {
$(this).closest('tr').find('.agency-mapping').hide();
$(this).closest('tr').find('.agency-new').show();
});
...
<tr>
<td></td>
<td>
<div>
<input type="radio" class="map" value="map" checked="checked" />
<input type="radio" class="new" value="new" />
</div>
</td>
<td>
<div class="agency-mapping">
</div>
<div class="agency-new" style="display:none">
</div>
</td>
</tr>
...
This works fine if I have a couple rows. But I have hundreds of rows, and the performance is really poor. I click a radio button and it takes 5-10 seconds to show/hide the div.
Is there a better way to do this?
You may use .on() to attach the event only on the parent element like <tbody> or <table> instead of having it on every radio button on your table. Like this:
$('tbody').on('click', 'input.map', function(){
...
});
Read "Direct and delegated events" here
. Hope that helps..
I'm trying to make more than one <td> field visible or invisible on my screen based on user input and element class. I'm using jquery, html, and javascript.
Basically, I have an HTML table with different fields. I want these fields to have a class of either "Visible", "Visible and Required", or "Invisible". When the user selects an option, it changes the class of that element by removing the previous one and adding the new one. The onload default of these fields should be invisible.
HTML:
<body onload="ShowTheScreen()">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="PopulateTable()">
</body>
Javascript:
function ShowTheScreen(){
ToggleFieldVisibility(".ReasonCode", 3);
ToggleFieldVisibility(".CostCenter", 3);
DisplayFields();
}
function PopulateTable(){
ToggleFieldVisibility(".ReasonCode", 2);
ToggleFieldVisibility(".CostCenter", 1);
DisplayFields();
}
function ToggleFieldVisibility(element, x){
switch(x){
case 1:
$(element).removeClass("Invisible Required").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
The problem I'm having is this: When I open the page, the fields get the "Invisible" class added to them as they should be and they become hidden. But when I try and remove the invisible class later and add the visible class, the invisible class is never removed and the visible class is never added: the elements simply retain the classes they had at first, and therefore stay hidden.
I saw previous threads relating to problems with jquery add/removeClass, but none that seemed to help me out. Let me know if you need more info.
UPDATE 1: Thanks for all the replies, everyone! Unfortunately, and I thought this would happen, the code I posted here is a far simplified version of the code I actually have and most of the answers I've received seem to be related to the syntax posted--like the issue with the quotes. I've updated the code to better reflect what I'm really doing. Hopefully this will narrow down what the issue is.
UPDATE 2: I know what I was doing wrong. In my code I have shown here I'm calling ToggleFieldVisibility(".ReasonCode", 2), which works fine. But in my actual code, I was retrieving the number 2 from a SQL call using an outside application, and it was returning it as a string. The "2" would get compared to 2 in the switch (or "1" to 1 and "3" to 3) and always go to default, so that's why those fields always came up invisible. Hah!
I think the problem lies in your inline onClick handlers. As you currently have them, you are using quotation marks as both attribute delimiters and to wrap your strings; this is going to cause your attribute to be truncated as ToggleFieldVisibility(" and your function will not run.
Try:
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)">
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)">
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)">
If you need to use "s for some reason, you can always escape them with a \: (\".ReasonCode\"...
A quick guess, in calling the DisplayFields() function at the end, it adds css to the element in the form of an inline style tag. Try running a .removeAttr("style") right after doing the removeClass()
The code:
jquery:
function ToggleFieldVisibility(element, x){
//alert("Hello");
switch(x){
case 1:
$(element).removeClass("Invisible Required").removeAttr("style").addClass("Visible");
break;
case 2:
$(element).removeClass("Invisible").removeAttr("style").addClass("Visible Required");
break;
case 3:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
default:
$(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
break;
}
DisplayFields();
}
function DisplayFields(){
$(".Invisible").css({"visibility":"hidden"});
$(".Visible").css({"visibility":"visible"});
}
html:
<body onload="ToggleFieldVisibility('.ReasonCode .CostCenter', 3)">
<table border="1">
<tr>
<td class="ReasonCode" align="center">
<span class="FieldLabel">Reason Code</span>
</td>
<td class="CostCenter" align="center">
<span class="FieldLabel">Cost Center</span>
</td>
</tr>
<tr>
<td class="ReasonCode" align="center">
<input type="text" id="ReasonCode" name="ReasonCode" value="1243">
</td>
<td class="CostCenter" align="center">
<input type="text" id="CostCenter" name="CostCenter" value="00123">
</td>
</tr>
</table>
<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)" />
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)" />
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)" />
</body>