I am displaying three radio buttons in each row for each employee, how to validate for empty check.
<td><input type="radio" name="stf_att_<?php echo $stf_id ;?>" value="p" /></td>
<td><input type="radio" name="stf_att_<?php echo $stf_id ;?>" value="a" /></td>
<td><input type="radio" name="stf_att_<?php echo $stf_id ;?>" value="l" /></td>
am using another table to display values using id for each employee. have to use name="" for validation but in name am using id from database, how i do with js or php
if(document.getElementById('staff').checked) {
//will come here is a particular radio is checked
}
You can mark one of the radio buttons as checked (checked="checked") in the HTML code, which would guarantee that one radio button is always selected. Since one of the option is true for all the employees, think this would solve your problem.
Add a class name to each of the three radio buttons like their names. (stf_att_<?php echo $stf_id ;?>). And use the function below to validate radio buttons:
function checkRadio(classname) {
var el = document.getElementsByClassName(classname);
for(var i=0; i<el.length; i++) {
if(el[i].checked) {
return 1;
}
}
return 0;
}
It is so much easier using a javascript library like jquery.
Related
im kinda trying to get into programming in general and was wondering how to uncheck / check with updating the array-
like as soon as someone checks a 2nd checkbox it should uncheck the first option and update the search (w the new data)- im a mere beginner and kinda lost rn so would appreciate any form of help
<form action="index.php" id="form1" name="form1" method="get">
<?php $i = 0; foreach ($row_page_nav_kategorie as $row_page_nav_kategorie) { ?>
<label class="checkbox-container">
<input <?php if (strpos($url,$row_page_nav_kategorie['typ']) == true) {echo 'checked="checked"';}?>
type="checkbox"
class="checkmark"
name="hotelKategorie[]"
id="ckb5"
value="<?php echo $row_page_nav_kategorie['typ']; ?>"
onclick="kategorie(<?php echo $i ?>);"
onchange="submit()"/>
<?php echo $row_page_nav_kategorie['typ']; $i++;?>
</label>
<?php } ?>
</form>
You should use radio buttons, but if you want to overwrite checkbox functionality below code will take care of it, I have added a common class on your inputs:
function checkboxClick(obj) {
var cbs = document.getElementsByClassName("checkkbox-option");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
Demo
First of all welcome to the community!
As for your question, there is multiple ways to handle this, one of wich is as followed:
In HTML there's an attribute called radio wich you can add to your input by using type='radio'. In a set of radio buttons, only one can be checked at any time. If you then want to immedietely submit your form, you can use something like onChange='this.form.submit()'. This will submit your form when the value is changed, such as pressing on a different radio button.
Something to keep note of is that the attribute onChange is case sensitive as far as i'm aware. You were heading in the right direction with onchange="submit(), but your code doesn't know what to submit. this.form.submit() will submit the form that the element is in.
Use Radio Buttons or use JavaScript on your page to dynamically uncheck other checkboxes when you click on one.
If you want to dynamically update the page content with the new search results you should also look into AJAX which basically means you will call PHP functions from JavaScript code and those will return JSON arrays that you can exploit to modify your page's DOM.
Try THIS
HTML:
<label><input type="checkbox" name="check1" class="checkbox" /> CheckBox1</label>
<label><input type="checkbox" name="check2" class="checkbox" /> CheckBox2</label>
<label><input type="checkbox" name="check3" class="checkbox" /> CheckBox3</label>
<label><input type="checkbox" name="check4" class="checkbox" /> CheckBox4</label>
jQuery:
$(".checkbox").change(function() {
$(".checkbox").prop('checked', false);
$(this).prop('checked', true);
});
if you want to uncheck the selected checkbox
$(".checkbox").change(function() {
$(".checkbox").not(this).prop('checked', false);
});
hope this helps, thanks !!!
I've used jQuery before to copy billing addresses to shipping addresses, but if I am dynamically generating form rows with various values from PHP, how do I set up the form so that upon a checkmark, a recommended item quantity will be automatically copied just to the quantity of the same item?
Here is the basic version of the billing/shipping copy script.
<script src="../Scripts/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$("input#same").click(function()
{
if ($("input#same").is(':checked'))
{
// Checked, copy values
$("input#qty").val($("input#same").val());
}
else
{
// Clear on uncheck
$("input#quantity").val("");
}
});
});
</script>
And here is the PHP code dynamically gathering items with their suggested quantity.
while( $row = mysql_fetch_array($histresult) )
{
echo '<tr height = "50px">';
echo '<td>'.$product_id.'</td>';
echo '<td>'.$suggested_quantity.'<input id="same" name="same" type="checkbox" value ="'.$suggested_quantity.'"/> </td>';
echo '<td><input name="qty" type="text"size="4" maxlength="4"></td>';
///Other form elements go here, as well as an Add to Cart Button
}
For each item, a suggested wholesale quantity based on a user's favorite items is retrieved from the database. There is also a text field so that they can enter any amount they want before sending it to their cart. But if they check the checkbox, I want it to copy that value to the text field.
No only does this code not seem to do the trick, the difference between this and the billing/shipping copy is that now I'm dealing with a dynamic number of fields. How do I make each individual row achieve this task?
Using jQuery, you would essentially want to grab the suggested value from checkbox and put it in the other form element. Let's say this is your HTML:
<table>
<tr>
<td>
100 <input id="check-1" name="same" type="checkbox" value ="100"/>
<input id="qty-1" name="qty" type="text"size="4" maxlength="4">
</td>
<td>
100 <input id="check-2" name="same" type="checkbox" value ="100"/>
<input id="qty-2" name="qty" type="text"size="4" maxlength="4">
</td>
<td>
100 <input id="check-3" name="same" type="checkbox" value ="100"/>
<input id="qty-3" name="qty" type="text"size="4" maxlength="4">
</td>
</tr>
</table>
And then this would be your javascript/jQuery:
// Bind click event to ALL checkboxes
$("#same-*").live("click", function(e) {
// Only change it if box is checked
if( $(this).is(":checked") )
{
// Get suggested value
suggested_val = $(this).val();
// Place in next element (textbox)
$(this).next().val(suggested_val);
}
)};
I haven't tested this, but this is basically how it would work.
In your PHP, you would want to dynamically make those ID numbers so each row uses a unique ID. This is usually simple enough to match to your database row id.
<td>'.$suggested_quantity.'<input id="same-' . $row->id . '" name="same" type="checkbox" value ="'.$suggested_quantity.'"/> </td>
Change your code this way
<script>
$(document).ready(function(){
$("input.same").click(function()
{
if ($(this).is(':checked'))
{
// Checked, copy values
var temp = $(this).attr("title");
$("input#qty"+temp).val($("input#same"+temp).val());
}
else
{
// Clear on uncheck
$("input#qty"+temp).val("");
}
});
});
</script>
$i=0;
while( $row = mysql_fetch_array($histresult) )
{
echo '<tr height = "50px">';
echo '<td>'.$product_id.'</td>';
echo '<td>'.$suggested_quantity.'<input class="same" id="same'.$i.'" title="'.$i.'" name="same'.$i.'" type="checkbox" value ="'.$suggested_quantity.'"/> </td>';
echo '<td><input class="qty" name="qty'.$i.'" id="qty'.$i.'" type="text"size="4" maxlength="4"></td>';
///Other form elements go here, as well as an Add to Cart Button
$i++;
}
Hope this will helpful to you
Recycling IDs/names amongst several html elements is a bad idea I find.
I think it's best to make them unique.
But anyways, here's a suggestion that won't modify your html structure a lot.
Change the form tag as follows:
<form id="Order">
...
</form>
Change your PHP code as follows (added a label tag to isolate your suggested quantity better in the DOM, got rid of some unnecessary structure for your checkboxes):
while($row=mysql_fetch_array($histresult))
{
echo '<tr height = "50px">';
echo '<td>'.$product_id.'</td>';
echo '<td><label>'.$suggested_quantity.'<label><input type="checkbox" class="Same"/> </td>';
echo '<td><input name="qty" id="qty_'.$product_id.'" type="text"size="4" maxlength="4"></td>';
///Other form elements go here, as well as an Add to Cart Button
}
Finally, here is the jQuery code:
<script src="../Scripts/jquery-1.7.2.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("form#Order").click(function(Event){ //One event handler for the form, more efficient that way and you need less html structure to keep track of things
var Target = jQuery(Event.target); //This is the html element that got clicked on
if(Target.is("input:checkbox.Same")) //Make sure it's a checkbox that suggests quantity
{
var Text = jQuery(Target.closest('tr').children().get(2)).children(); //Get the parent TR tag, get it's third child (td tag containing the text field), get it's child (the text field)
var Suggested_quantity = Target.prev().html(); //Get the previous sibling which is the label containing the quantity and get it's html content which is the quantity
if(Target.is(":checked"))
{
Text.val(Suggested_quantity);
}
else
{
Text.val("");
}
});
});
</script>
EDIT: Removed some redundant html code. Added a class to isolate the right checkboxes. Added IDs for the text field (forgot).
I am generating multiple buttons using PHP:
<form name="submit_form" id="submit_form" action="">
<?php
for ($i = 0; $i < count($value); $i++) {?>
<input type="radio" name="answer" value="<?php echo $value[$i]; ?>"/>$value[$i]<?php }?>
</form>
I have problem checking if radio button is selected using Javascript since it keeps returning 'undefined'
I am accessing radio buttons (before ) using javascript in this way:
alert(document.forms["submit_form"].elements["answer"].checked);
I have tried echoing whole html, same thing happens...
Use document.getElementsByName(name); - This method return a nodeList.
list=document.getElementsByName("answer");
alert(list.item(0).checked); //1st
Use Jquery....
To get the value of the selected radioName item of a form called 'myForm':
$('input[name=radioName]:checked', '#myForm').val()
How can I know which radio button is selected via jQuery?
document.getElementsByTagName("answer") and your document.forms-approach both return an array (correct: a NodeList) of <input> elements. You will have to loop through them and check each for the checked property.
To save me making masses of edits to the rest of my code I want to make a checkbox act like a textbox.
I have the following textbox, that if a number is greater than 0 then it adds items to a basket.
<input type="textbox"
value="<? echo $item[qty]; ?>"
name="<? echo $productid."_".$product_quantity[id]."_".$product_option[id]; ?>"
/>
How can I make a checkbox act the same way? I.e If it's ticked it's value equals 1, therefore adding it to my basket. If it remains unticked then it's value equals 0, therefore ignored.
<input type="checkbox"
value="<? echo $item[qty]; ?>"
name="<? echo $productid."_".$product_quantity[id]."_".$product_option[id]; ?>"
/>
I have several of these checkboxes going down the page.
Change the value from value="<? echo $item[qty]; ?>" to value="1"
In the action of you form i.e. wishlist.php :
if(isset($_POST["name_of_checkbox"])) {
//It means check box has been ticked
$myvalue = 1;
} else {
//It means check box was not ticked
$myvalue = 0;
}
HTH
This is another approach to the question maybe this is what you need.
I would introduce a hidden field which will store/post the 0 or 1 value. We will bind an event with the checkbox that will update the value of the hidden input.
<input name="my_cb" id="my_cb" type="checkbox" value="1" />
<input type="hidden" name="my_cb_hidden" id="my_cb_hidden" value="" />
<script type="text/javascript">
$("#my_cb").click(function() {
if($("#my_cb").is(":checked")){
$("#my_cb_hidden").val($(this).val());
} else {
$("#my_cb_hidden").val(0);
}
alert($("#my_cb_hidden").val());
});
you can change the value of checkbox value from
value="<? echo $item[qty]; ?>"
to
value="1"
then if it is checked then on Submit it will automatically store 1 as a value
EDITED :
after submitting in php code do it as as you updated your question
if(isset($_POST['checkbox name']))
{
$item[qty] = 1;
}
else
{
$item[qty] = 0;
}
but this will only make the changes in the $item array's value inspite of the value your checkbox hold.
I have 4 rows in a table.
Each row has 4 radio buttons.
Each radio buttons has value number [1, 2, 3, 4]
When user selects one of the radio buttons, it automatically prints the value in each row. Then I take each value and total them at the bottom of the table.
I'm guessing it can be done with javascript? But how?
Here's a sample PHP code for the row:
<input type="radio" name="a" value="1" <?php if($row['a'] == '1'){echo "checked";} ?>/>
I want to print out the value at the end of each row. Then total the each row's value at the bottom of the table.
Also, here's my php code to total all rows.
$total = $a + $b + $c + $d;
echo $total;
?>
Thanks! :)
Though I can't post any code at the moment (dehabilitating numeric keypad), the general method to dynamically update content dependent on a backend is to activate an AJAX call (or page refresh) whenever a checkbox's state is changed. The new state and/or unique parameters will be sent to your server, which will then echo (as per your request) out the new view.
From the information you've provided, it is difficult to determine whether the radio buttons dependend on any special backend model (database information).
If they are not, then we will assume that the checkboxes have unique IDs, prefixed with chk_, and that the text box you want to output the value to is called out. We will also assume that you are using jQuery.
var total = 0;
for (var i = 1; i <= 4; i++)
{
var e = $('#chk' + i);
if (e.is(':checked'))
{
total += parseInt(e.val());
}
}
$("#out").text(total);
EDIT: After the edit of your original post, this code is still valid. However, if you name your checkbox a like you have, you will need to revise the for loop in the above code. You may be able to loop through all radio buttons, or radio buttons inside a certain HTML element. The implementation is up to you.
All the calculations should made on client side as per your scenario. So in this case JavaScript will do the work.
Below code will calculate each row as per radio selection and also calculate total of all selections.
<html>
<head>
<script language="JavaScript">
<!--
function calculateRow(val1, val2)
{
var total = 0;
var ctr=1;
var divs=document.getElementsByTagName('div');
document.getElementById('selectedValue_'+val2).innerHTML = val1.value;
for(i=0;i<divs.length;i++)
{
divId = divs[i].id.substring(0,14);
if(divId == 'selectedValue_')
{
total += parseInt(document.getElementById('selectedValue_'+ctr).innerHTML);
ctr++;
}
}
document.getElementById('total').innerHTML = total;
}
//-->
</script>
</head>
<body>
<form name="frmScore">
<table border=1>
<tr>
<td>Select</td>
<td>Score</td>
</tr>
<?php
for($i=1;$i<=10;$i++)
{
echo "
<tr>
<td>
<input type='radio' value='1' name='test{$i}' onclick='calculateRow(this,{$i})'>
<input type='radio' value='2' name='test{$i}' onclick='calculateRow(this,{$i})'>
<input type='radio' value='3' name='test{$i}' onclick='calculateRow(this,{$i})'>
<input type='radio' value='4' name='test{$i}' onclick='calculateRow(this,{$i})'>
</td>
<td><div id='selectedValue_{$i}'>0</div></td>
</tr>";
}
?>
<tr>
<td>Total</td>
<td><div id='total'></div></td>
</tr>
</table>
</form>
</body>
</html>
Cheers!!!