Hi All First of all I don't know Javascript, I got this script from the internet but can't get it to work. If someone can please be so kind and assist me. I'm trying to create a "check all" & "uncheck all" button on my form for my checkboxes, if I click the button it does not select anything. Where am I going wrong?
<?php
session_start();
?>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Begin
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
// End -->
</script>
</head>
And then the form:
$sql0 = "SELECT * FROM .....
$result0 = mysql_query($sql0);
echo "<form name='myform' action='...' method='post'>";
while($row0 = mysql_fetch_assoc($result0)) {
$test_id=$row0['id'];
$test_name=$row0['test_name'];
echo " <table width=600px>";
echo " <tr>";
echo " <td width=30px><input name='question[$test_id][]' type='checkbox' value='1' /></td>";
echo " <td width=580px align=left>$test_name</td>";
echo " </tr>";
echo " </table>";
}
echo "</P>";
echo "<input type='button' name='Check_All' value='Check All' onClick='CheckAll(document.myform.check_list)'>";
echo "<input type='button' name='Un_CheckAll' value='Uncheck All' onClick='UnCheckAll(document.myform.check_list)'>";
echo "</form>";
if you don't know javascript, i'd strongly recommend you investigate jquery - a library which eliminates cross browser issues and makes a huge amount of javascript far easier.
simply include this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
and your code
<input type='button' name='Check_All' value='Check All' onClick='$(":checkbox").attr("checked",true);'>
untested, but should be okay.
I'd highly recommend using jQuery, it allows you to focus on the logic and not worry about cross browser issues you might run into.
<script src='http://code.jquery.com/jquery-1.6.3.min.js' type='text/javascript'></script>
<script>
$(document).ready(function () {
//check all
$('input[name="Check_All"]').click(function () {
//for all checkboxes where the name begins with "question", check them
$('input[name^="question"]').attr('checked', true);
});
//uncheck all
$('input[name="Un_CheckAll"]').click(function () {
//for all checkboxes where the name begins with "question", uncheck them
$('input[name^="question"]').attr('checked', false);
});
});
</script>
Here's the breakdown...
Select all buttons on the page where the name attribute is set to Check_all
$('input[name="Check_All"]')
When the found item(s) are clicked, execute the code in the function that is passed
$('input[name="Check_All"]').click(function () {
//javascript code here
});
for all checkboxes where the name begins with "question", check them
$('input[name^="question"]').attr('checked', true);
Change this:
<td width=30px><input name='question[$test_id][]' type='checkbox' value='1' /></td>";
to this:
<td width=30px><input name='check_list[]' type='checkbox' value='1' /></td>";
Related
I have following jquery script which load a form into a div "blankform"
jQuery('#metentry').submit(function(e){
e.preventDefault();
// getting data from form to variables
var date = jQuery('#stddate').val();
var kgsunit = jQuery('#unit').val();
var kgsshift = jQuery('#shift').val();
//sending data to script
jQuery.post("get_blank_form.php", {
"date": jQuery('#stddate').val(),
'unit': kgsunit,
'shift': kgsshift,
}, function(data) {
//loading a form to the div blankform
jQuery('#blankform').html(data);
});
get_blank_form.php contains following code
<?php
echo'<form id="shiftentry" name="shiftentry" >';
echo "Date:<input id=shiftdate value='".$date."'/>";
echo "Unit:<input id=shiftdate value='".$unit."'/>";
echo "Shift:<input id=shiftdate value='".$shift."'/><br/>";
echo "<table><tr><th>No</th><th>Ele</th><th>Location</th><th>Dose Rate (mGy/h)</th><th> Tritium (DAC)</th> <th>Part (DAC)</th> <th>Iodine (DAC)</th><th> Surface Cont. (Bq/cm2) </th></tr>";
while($row2 = mysql_fetch_array($result_sec))
{
echo "<tr>";
echo "<td>".++$rc."</td>";
echo "<td><input size='5' id='".$row2['elevation']."' value='".$row2['elevation']."' /></td>";
echo "<td><input id='".$row2['loc_id']."' value='".$row2['location']."' /></td>";
echo "<td><input size='5' id='dose".$rc."' value='".$row2['radn_level']."'/></td>";
echo "<td><input size='5' id='h3".$rc."' value='0' /></td>";
echo "<td><input size='5' id='part".$rc."' value='0' /></td>";
echo "<td><input size='5' id='iod".$rc."' value='0' /></td>";
echo "<td><input size='5' id='cont".$rc."' value='0' /></td>";
echo "</tr>";
}
echo " </table>";
echo '<div align="center">';
echo '<input type="submit" id="submit" name="submit" value="Submit" width="30" />';
echo '</div>';
?>
this will create a form which will have input like id1, id2 ... id25, dose1, dose2 ... dose25 and so on.
I want to read the values of these input boxes. Normal method like var loc1 = $("#id1").val(); is not working since these elements are dynamically created.
Even the submit button clicking even is also not triggered.
the script below do not produce any output.
jQuery('#shiftentry').submit(function(e) {
e.preventDefault();
alert("Submitted");
Any suggestions please?
Since the Form DOM is dynamically created after Ajax Call, You can use .on ?
like:
$(document).on('submit' , '#shiftentry' , function(e) {
e.preventDefault();
alert("Submitted");
});
You will need to use on() method for event handling as the form is created using ajax call and added later.
As it's added later, it will not be bound to submit event handler that you had specified. To bind it with the handler you need to use on() from jQuery.
$(document).on('submit', '#shiftentry', function() {
//Your code
});
As for the submit button, you can trigger it using
$('#submit_id').on('click', function(){
$('#shiftentry').send(function(e) {
e.preventDefault();
alert("Submitted");
);
})
as for getting the values using.
$('#id1').val()
this should just work just fine but remember that some characters are not permitted in id field such as [, ], . etc.. if you cant avoid this special characters in your id field you can use.
$('input[name="value"]').val();
to get the value of your fields.
Today I'm currently using "Checkbox" and just a little problem. I have a dropdown list in my first page, I choose the items "DropDown 1" and then I click the Submit button after that it will go to the next page. So then, the second page will load all items under the "DropDown 1" using a checkbox only.
My problem is:
How can I check them all by using a checkbox "Check All", where the items in "DropwDown 1" are came from my database [MySQL].
Here's my code in page two:
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<?php
$dropdown_value = (string)$_POST["id"];
echo "<br/>";
if ($dropdown_value == 'All Building')
{
$all = mysql_query("SELECT fldBldgName FROM tblbuildings");
while ($row = mysql_fetch_array($all))
{
echo "<tr><td>";
echo "<input type='checkbox' name='play[]' class='chk_boxes1' value='" . $row['fldBldgName'] . "'>";
echo $row['fldBldgName'];
echo "</td></tr><br/>";
}
}
?>
<script>
$(document).ready(function(){
$('input[name="all"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]').attr('checked', status);
});
});
</script>
look checked Attribute
echo "<input type='checkbox' class='chk_boxes1' name='play[]' value='".$row['fldBldgName']. "' checked>";
and why a <br> in a table?
EDIT
try this:
echo '<div><input type="checkbox" class="checkall"> Check all</div>';
$all = mysql_query("SELECT fldBldgName FROM tblbuildings");
while ($row = mysql_fetch_array($all))
{
echo "<div><input type='checkbox' name='play[]' class='chk_boxes1' value='" . $row['fldBldgName']."'>";
echo $row['fldBldgName'];."</div>";
}
and jQuery function:
$(function () {
$('.checkall').on('click', function () {
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});
});
http://jsfiddle.net/H37cb/210/
Try listening to the change event on the .chk_boxes element. You should also use prop instead of attr when working with "binary" properties like `checked':
$('.chk_boxes').on('change', function(){
$('.chk_boxes1').prop('checked', $(this).prop('checked'));
});
http://api.jquery.com/prop/
You also need to wrap all your tr/td elements in a table element.:
<table>
<?php
...
?>
</table>
There's no need for br elements after a tr. tr will always start on a new line.
In my page i am iterating values based on the database table. I have to give a alert message when i check my radio button residing in the php while loop, when users click on it.
I tried the below code, but its not working. When i am clicking on any of the radio button from my page then , i am not getting alert message . Please help me to solve my problem.
my php code:
<?php $result = mysql_query("SELECT * FROM group_expenditure_details where creater_id =
'$uid'");
$a=0;
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td width='20%' align='center'><input type='checkbox'
name='test".$a++."' id='test".$a++."' value='1' /></td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
mysql_close($con);
?>
My Jquery code:
<script type="text/javascript">
$(function(){
<?php $od=$_SESSION['id']; $result1 = mysql_query("SELECT * FROM
group_expenditure_details where creater_id = '$od'"); $a=0;
while($row = mysql_fetch_array($result1)) { ?>
$('<?php '#test'.$a++?>').click(function(){
<?php } ?>
alert('clicked');
});
});
</script>
$(function()
{
$('input[id^="test"]').on('click',function()
{
alert('Clicked');
});
});
what $('input[id^="test"]') this will do is select all the input which id is starts with test.
.on is replacement of .live() and .delegate() in new version of jQuery.
.on() works on dyanmically loaded content so if checkbox added later then click event will also work on newly added DOM.
I'll add a class attribute to the radio buttons
<input type='checkbox' class="my-radio" name='test".$a."' id='test".$a."' value='1' />
Then
$(function(){
$('.my-radio').click(function(){
alert('Clicked');
});
});
$(function(){ //ensure dom is ready
$('input[id^=test]').click(function(){ //id starts with test
alert('Clicked');
});
});
Don't use any PHP in your javascript for this. The way you construct your id='test'.$a will ensure that the id `always starts with test. So within that click function above, we have handled the pattern.
I'm still a beginner in PHP programming. I need help on how can I prompt the selected date. A simple webpage which allows user to choose date (via javascript) then after it clicks the submit button. I'd like to prompt the user of the date but what it does is open up a new page and displays the current page.
My PHP file: rcl_stock_allocation.php
<html>
<head>
<LINK REL=StyleSheet HREF="inc/style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="inc/cal_styles.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" language="javascript" src="inc/myCalendar.js"></script>
<script type="text/javascript" src="inc/jquery-1.9.1.js"></script>
<script type="text/javascript">
function popCal(ThisValue){
calpop = new Epoch('epoch_popup','popup',document.getElementById(ThisValue));
calpop.toggle();
}
</script>
<title>RCL Stock Allocation</title>
</head>
<body>
<?php
echo "<form name='rcl_stock_allocation' action='' method='get' target=_blank >";
echo "<table border = '0'>";
echo "<tr><td colspan='2'><font size='2' ><b>RCL Stock Allocation for Bookshop</b></font></td></tr>";
print "<tr><td></br></td></tr>";
print <<<menu1
<tr><td align=right >Date of Transaction</td><td> <input type="text" id ="transactionDate" name="transactionDate" class = graytextbox readonly=true style='width:80px; text-align:center' value = '$transactionDate' /> Date Picker
menu1;
print "</td></tr>";
echo "<tr><td></td><td><input type='submit' name='load_data' id='load_data' value='Load Stocks' /></td></tr>";
echo "</table>";
echo "</form>";
//echo "lloyd";
?>
</body>
</html>
And here is my javascript: rcl_stkall.js
$(function() {
$('.error').hide();
$(".load_data").click(function() {
$('.error').hide();
var transactionDate = $("input#transactionDate").val();
if(transactionDate == ""){
$("label#transactionDate").show();
$("input#transactionDate").focus();
return false;
}
var dateOfTransaction = 'date=' + transactionDate;
alert(dateOfTransaction); return false;
});
});
Thanks in advance.
First of all you are using id="load_data" for submit button so
try this,
$(".load_data").click(function() { should be
$("#load_data").click(function() {
Here are some of the basics:
When you start the form, remove 'target=_blank' - this isn't necessary.
Then you can stop the form from submitting by preventing the default submit action.
Add this to your JS within the '$(function() {'
$('#rcl_stock_allocation').on('submit', function(e) {
e.preventDefault();
// add code here to show prompt the user of the date
});
if you then need to submit the form after the user has being prompted of the date, use:
$('#rcl_stock_allocation').submit();
to complete sending the form.
put type='button'
<input type='button' name='load_data' id='load_data' value='Load Stocks' />
I can't submit the form with dynamic id. Below is my code.
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
var fval;
var cvalue = "<?php echo $_POST['currentval']; ?>";
if(!(cvalue)) cvalue=0;
$(document).ready(function() {
$('#upload'+cvalue).submit(function() {
var options = {
target: '#message',
url:'process.php?sval='+cvalue,
success: function() {
alert("success");
$('#uploader').html('');
}
};
$(this).ajaxSubmit(options);
return false;
});
});
</script>
<div id="message"></div>
<?php
for($i=0;$i<5;$i++) {
echo "<form action='#' method='post' name='upload' id='upload$i' enctype='multipart/form-data'>";
echo "<input type='hidden' name='svalhid' id='svalhid' value='$i'>";
echo "<input type='file' id='fl$i' name='filename".$i."up'>";
echo "<input type='hidden' name='currentval' id='currentval' value='$i'>";
echo "<input type='submit' name='uploads$i' value='Ok'><br>";
echo '</form>';
}
?>
In this line, $('#upload'+cvalue).submit(function() {
I can't get the cvalue. I can't identify what's wrong with this code. Anybody please help me.
Check follow line
echo "<form action='#' method='post' name='upload' id='upload$i' enctype='multipart/form-data'>";
Are you really sure that you printed out a correct value for the id attribute?
I think it exists two better ways:
1st (the best way in my eyes):
<?php
for($i=0;$i<5;$i++) {
?>
<form action='#' method='post' name='upload' id='upload<?php echo $i ?>' enctype='multipart/form-data'>";
<input type='hidden' name='svalhid' id='svalhid' value='<?php echo $i ?>'>"
<input type='file' id='fl<?php echo $i ?>' name='filename<?php echo $i ?>up'>";
<input type='hidden' name='currentval' id='currentval' value='<?php echo$i ?>'>"
<input type='submit' name='uploads<?php echo $i ?>' value='Ok'><br>"
</form>'
<?php
}
?>
2nd: Change the mentioned line to following:
echo "<form action='#' method='post' name='upload".$i."' id='upload".$i."' enctype='multipart/form-data'>";
Note: You defined a couple of forms with the same name. As far as I know, the attribute 'name' is the main attribute for forms, not the 'id' attribute.
I don't see where you assign anything besides "" or 0 to cvalue. Also, those two assignments are outside of $(document).ready(function() { so there could be something weird going on with that code executing before your document has fully loaded. Move them inside of the document.ready call and see what happens.
Try using
var cvalue = "<?php echo $_GET['currentval']; ?>";
or
var cvalue = "<?php echo $_REQUEST['currentval']; ?>";
Also try what #reporter said about the form id: id='upload".$i."
The form id should be the same as the one referenced here:
$('#upload'+cvalue).submit(function() {
Example:
in javascript:
$('#upload').submit(function() {
then form should be:
<form id="#upload" ...
You should definitely see something happen.
Try installing firebug and use console.log(variablehere) instead of alert(variablehere). It's more cleaner.
Hope that helps