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.
Related
I have an html table with two columns- text and pair radio button; I have set the id of the rows.I want to dynamically check a radio button using the id of the row.
HTML:
<tr class="tbrder" id="area1">
<td class="biglable">Leadership University</td>
<td class="smalllable">
<div class="switch pull-right">
<input type="radio" class="radio" value="y">Y
<input type="radio" class="radio" value="n">N
</div>
</td>
</tr>
If I receive ID area1 from the backend, i want to set the radio button to Y
you can access to this td
by use this code
I don't know if there's another way better than this
it's not ideal method
but it works
var myRow = document.getElementById("area1");
var myColumn = myRow.children.item(1);
var myRadioButtons = myColumn .getElementsByClassName("radio");
myRadioButtons[0].checked = true; //
then you can change it's value
I am assuming you have a php page as backend
$.ajax({
url:'YOUR_PHP_PAGE.php',
....,
....,
success:function(data){
if(data=='area1')
{
$(":radio[value='y']").prop("checked",true);
}
}
});
you can also use this code.
$('#area1').find(':radio[value="y"]').prop("checked",true);
I got a problem with my Feedback Form. I'd like to validate with either JQuery or Javascript, that every group of radio-buttons has always one button selected before you the user can submit the form.
Here's my code from my form.html.
<form id='form' method='POST' action='validate.php'>
<table>
<!-- Table header -->
<tr>
<th> </th>
<th>Always</th>
<th>Often</th>
<th>Rarely</th>
<th>Never</th>
</tr>
<!-- Group One -->
<tr>
<th>Dummy Text 1</th>
<th><input class='radio' type='radio' name='item[0]' value='always'></th>
<th><input class='radio' type='radio' name='item[0]' value='often'></th>
<th><input class='radio' type='radio' name='item[0]' value='rarely'></th>
<th><input class='radio' type='radio' name='item[0]' value='never'></th>
</tr>
<!-- Group two -->
<tr>
<th>Dummy Text 2</th>
<th><input class='radio' type='radio' name='item[1]' value='always'></th>
<th><input class='radio' type='radio' name='item[1]' value='often'></th>
<th><input class='radio' type='radio' name='item[1]' value='rarely'></th>
<th><input class='radio' type='radio' name='item[1]' value='never'></th>
</tr>
<!-- End of table -->
</table>
</form>
<button class='buttons' onclick='subForm()' name='submit'>Send Feedback</button>
<script>
function subForm() {
//Code
}
</script>
But I dont know what I should use for checking if the radio-buttons are checked.
I tried to use document.getElementsByName but this gave me back undefined values
You could add a class to each group of radio buttons, and then use getelementsbyclass, or queryselectorall(compatible with older browsers). Depending on what you're trying to support, you could also consider using the HTML5 "required" attribute on your radio buttons. This will work on most browsers newer than IE8 and will require minimal coding on your part.
I can't comment so I'll clarify that the other solution posted here at the moment will not work because it checks to make sure that at least one radio button on the page has been checked, which means a user can submit an incomplete form if there are multiple groups of radio buttons. His code looks like it's functional otherwise, just create a class for each group of radio buttons.
I think this is your best bet:
var selectedCount = 0;
$('.radio').each(function(){
if($(this).attr("checked", "checked")){
selectedCount++;
}
})
This returns the number of checked radio buttons:
$('input:radio:checked').length
Check if it's equal to the number of groups of radio buttons. (In your example, two.)
Fiddle
Try this solution:
function subForm() {
var valid = true;
//for every row
jQuery("tr").each(function(idx, elem) {
//checks only rows with radio inputs inside
if ($(this).find('input[type=radio]').length) {
//if there are no radios checked then form is not valid
if (!$(this).find('input[type=radio]:checked').length) {
valid = false;
}
}
});
console.log(valid);
if (valid) {
//submit form
}
}
Variable 'valid' refers to whole form being valid (at least one radiobutton is selected in each group).
Here's a jsfiddle.
I want a javascript function for mapping checkbox id with the value of someother field in grails
i have a gsp page with checkbox and cost field as follows
<td>
<g:checkBox type="checkbox" class="select_all" name="counTestUnit" id="${testUnitInstance.id}" />
</td>
<td>
<g:textField name="cost" maxlength="20" required="" id="${testUnitInstance.id}" />
</td>
i want a javascript function with mapping between checked checkbox id with cost field
you need a on change function for the check box and add intital for the id to diffrentiate it the cost text field,since intital follows ID later on you extract that ID and find the corresponding cost field.
"c_${testUnitInstance.id}"
example
<g:checkBox type="checkbox" class="select_all" name="counTestUnit" id="c_${testUnitInstance.id}" onChange="FindCost('c_${testUnitInstance.id}')"/>
<g:javascript>
function FindCost(chckboxname){
console.log("check Status:"+$("#"+chckboxname).prop("checked"));
var arrayOfchckBoxId = chckboxname.split("_"); //parse the two parts of the name after _
var commnidforcheckandcost = arrayOfchckBoxId[1];
var initialname = arrayOfchckBoxId[0];
var currentCheckbox = "#"+chckboxname ;
console.log("ID:"+arrayOfchckBoxId[1]);
console.log("Name:"+currentCheckbox);
if(initialname == 'c'){
//display the corresponsing cost text field.
$("#"+commnidforcheckandcost").show() //display the cost with a give id like checkbox
}
</g:javascript>
i guess this should resolve your problem for more help see ,the javascript console debug.
You can do as below
<td>
<g:checkBox type="checkbox" class="select_all" name="counTestUnit" id="checkbox${testUnitInstance.id}" onclick="mapCheckAndField(${testUnitInstance.id})"/>
</td>
<td>
<g:textField name="cost" maxlength="20" required="" id="textField${testUnitInstance.id}" />
</td>
<script>
function mapCheckAndField(testUnitId)
{
//we know that now checkboxId is "checkbox"+testUnitId
//and corresponding textField id is "textField"+testUnitId
//Simply you will get the value of checkbox corresponding textField value as below
$("#textField"+testUnitId).val()
}
</script>
I'm very noob in javascript. My question is how do I show the value of my radio button when click?
I have this code:
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="40%">
<input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
<input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
<input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
</td></tr>
Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.
Use the jQuery class selector and attach to the click event:
$('.hover-star').click(function () {
alert($(this).val());
}
Here's a working jsFiddle fiddle.
Alternatively, you could attach to the change event.
$('.hover-star').change(function () {
alert($(this).val());
}
Take a look at the jQuery selectors documentation.
With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):
$(".hover-star").click(function() {
var selectedVal = $(this).val();
});
You could also use the change event, which fires whenever the selected radio button changes:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
});
You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.
Update based on comments
As you want to put the value into a div, you can simply do this inside the change event handler:
$("#yourDivId").text($(this).val());
Try this
$('.hover-star').click(function () {
alert($(this).val());
}
Here you go ...
$('.hover-star').click(function (){$('#someDiv').text($(this).val());
Jquery COde:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
alert(selectedVal);
});
See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/
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
}