I've studied all the answers here (https://stackoverflow.com/a/2191026), but even the clearest code suggested by #davydepauw and #emeraldjava don't work... The below code doesn't select/unselect the boxes present in the PHP code.
echo "<form action=$fileName method='post'>";
...
<script language='JavaScript'>
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
</script>";
...
// This should select/deselect all checkboxes below:
echo "<input type='checkbox' name='select-all' id='select-all' />";
...
// The below is in the WHILE loop fetching data from MySQL:
echo "<input type='checkbox' name='IndustryID' value='" . $row['IndustryID'] . "'>";
...
</form>
For #DavidThomas request, below is the rendered code:
<body>
<script language='JavaScript'>
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
</script>
...
<form action=XXX.php method='post'>
...
<input type='checkbox' name='select-all' id='select-all' />
...
<input type='checkbox' name='IndustryID' value='3'>
...
<input type='checkbox' name='IndustryID' value='5'>
...
<input type='checkbox' name='IndustryID' value='148'>
...
</form>
</body>
You must put everything inside a document.ready event like this otherwise the code is run when the element are not present and there is no element to attach to and use the correct script tag
<script type="text/javascript">
$(function(){
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
})
</script>
that is because you add check box after jquery code.
change your javascript code to this
<script language='JavaScript'>
$(document).ready(function(){
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
});
</script>";
or add your javascript after displaying checkbox
<script type="text/javascript">
$(function(){
$('#select-all').click(function(event) {
$(':checkbox').each(function() {
$(this).attr('checked', !checkbox.attr('checked'));
});
});
})
</script>
Not tested at all...just came to my mind
var selectAll = false;
if(selectAll) {
$('input:checkbox').removeAttr('checked');
selectAll = false;
}
else {
$('input:checkbox').attr('checked', 'checked');
selectAll = true;
}
You cant use this..
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if(!$(".case:not(:checked)").length)
{
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
Then this is how i construct my PHP..
<input type='checkbox' id='selectall'/>
$select = mysql_query ("SELECT * FROM tblname") OR DIE (mysql_error());
while ($row3=mysql_fetch_array($select_orders2)){
$idd = $row3['id'];
<input type='checkbox' class='case' name='checkbox[]' value='".$idd."'>
}
In this code. all the data retrieved by sql will iterate with the class case. hope this will help.
Related
when checkbox checked , i want input type to be enabled.
i have checked the checkbox but input type still disable.
please help..
this is my jquery
$('#haha').change(
function(id) {
if (this.checked) {
$("#nama_" + id).prop('disabled', false);
$("#ket_" + id).prop('disabled', false);
} else {
$("#nama_" + id).prop('disabled', true);
$("#ket_" + id).prop('disabled', true);
}
$(document).ready(function() {
$("input").focus(function() {
$(this).css("background-color", "yellow");
});
$("input").blur(function() {
$(this).css("background-color", "#lightblue");
});
});
});
and here's my checkbox and input type
<td> <input type ="checkbox" id="haha" class=checkbox1 name="checklist" value=<?php echo $agenda->id; ?>> <?php echo $agenda->id; ?> </td>
<td> <input type="text" name="dnama" id="nama_<?php echo $agenda->id; ?>" class="yes" value="<?php echo $agenda->nama; ?>" disabled /> </td>
<td> <input type="text" name="dketer" id="ket_<?php echo $agenda->id; ?>" value="<?php echo $agenda->keterangan; ?>" disabled> </td>
function enable(id) {
if(document.getElementById('haha').checked) {
document.getElementById("nama_"+id).disabled= false;
document.getElementById("ket_"+id).disabled= false;
}else {
document.getElementById("nama_"+id).disabled= true;
document.getElementById("ket_"+id).disabled= true;
}
}
First of all use click event instead of change event for checkbox.
Also why have you kept document.ready statement inside of function.
What I suggest is bring that statement out, and do all event binding inside that.
The problem is that the variable id you are using does not have the value you thinking. It has the event object contained in it.
So to get the text elements you can use [type=text] selector.
** Use [type=text] selector only if you have these inputs and checkbox only. In case you have other elements as well, use the appropriate selector.
The code follows as below.
$(document).ready(function() {
$("input[type=text]").focus(function() {
$(this).css("background-color", "yellow");
}).blur(function() {
$(this).css("background-color", "#lightblue");
});
$('#haha').click(function() {
if ($(this).is(":checked")) {
$("input[type=text]").prop('disabled', false);
} else {
$("input[type=text]").prop('disabled', true);
}
});
});
Alright for the specific id selectors, I can see from your html that the id comprises of the value of checkbox. So you can use that as well.
$(document).ready(function() {
$("input[type=text]").focus(function() {
$(this).css("background-color", "yellow");
}).blur(function() {
$(this).css("background-color", "#lightblue");
});
$('#haha').click(function() {
var id_suffix = $(this).val();
if ($(this).is(":checked")) {
$("input#name_"+id_suffix).prop('disabled', false);
$("input#ket_"+id_suffix).prop('disabled', false);
} else {
$("input#name_"+id_suffix).prop('disabled', false);
$("input#ket_"+id_suffix).prop('disabled', false);
}
});
});
This should work, you have to use remove attribute over prop for removing DISABLED attribute
$('#haha').change( function(event) {
var id = event.target.id;
if (this.checked) {
$("#nama_" + id).removeAttr('disabled'); $("#ket_" + id).removeAttr('disabled');
} else {
$("#nama_" + id).attr('disabled', true);
$("#ket_" + id).attr('disabled', true);
}
$(document).ready(function() { $("input").focus(function() { $(this).css("background-color", "yellow"); }); $("input").blur(function() { $(this).css("background-color", "#lightblue"); }); }); });
How can I get the values of my inputs generated with a jQuery loop in PHP?
I have two inputs, that are generated by a loop and I need to get those two inputs with jQuery to use as validation in our thesis.
The code is:
<?php
for ($i=0; $i <5 ; $i++) {
echo "$i.
<input class='text$i' type='text' name='text$i'>
<input class='text$i' type='text' name='text$i'>
</br></br>";
?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$(<?php echo "'.text$i"?> ).each(function(){
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
$(<?php echo "'.text$i'";?>).each(function()
{
if(!isNaN(this.value) && this.value.length!=0)
{
sum += parseFloat(this.value);
}
$('#sum').html(sum.toFixed());
});
}
</script>
<?php
echo"<label>Total: </label><span id='sum'>0</span>";
echo "</br>";
}
?>
var calculateSum = function () {
var sum = 0;
$('.class1').each(function () {
if (!isNaN(this.value) && this.value.length !== 0) {
sum += parseFloat(this.value);
}
$('#sum').html(sum.toFixed());
});
};
$('.class1').each(function () {
$(this).keyup(function () {
calculateSum();
});
});
WORKING DEMO
I have a form that adds device name and device id in mysql database. I have written a jquery script that will check whether the device id is already in the db. If exists it will return false. I have the following code-
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //newly added
$('#Submit').click(function() {alert('in');
var checkID = $('#device_id').val(); // assuming this is a input text field
$.post('includes/checkid.php', {'device_id' : checkID}, function(data) {
if(data=='exist') alert("already exists"); return false;
else $('#add_dev').submit();
});
});});
</script>
<form method="post" action="includes/process_add.php" name = "add_dev" id = "add_dev">
<tr><td width="150">Device ID</td><td>:<input type="text" name="device_id" id= "device_id"></td></tr>
<tr><td>Device Name</td><td>:<input type="text" name="device_name"></td></tr>
<tr><td></td><td><br><input type="submit" name="submit" id= "submit" value="Add device"></td></tr>
</form>
and checkid.php is -
<?php
include("connection.php");
$id = $_POST['device_id'];
$sql = mysql_query("SELECT device_id FROM devices WHERE device_id = '$id'");
if (mysql_num_rows($sql) > 0) {
echo "exist";
}else echo 'notexist';
?>
its not working..
Ajax is async, return false outside ajax success callback:
$(document).ready(function () { //newly added
$('#submit').click(function () {
alert('in');
var checkID = $('#device_id').val(); // assuming this is a input text field
$.post('includes/checkid.php', {
'device_id': checkID
}, function (data) {
if (data == 'exist') alert("already exists");
else $('#add_dev').submit();
});
return false;
});
});
how can i one to one change the value of the next input?
this code doing check all or unchec all, but i want to check or uncheck one to one,
jQuery(document).ready(function() {
jQuery('#topluekle').click(function() {
if(jQuery(this).attr('checked')) {
jQuery('input:checkbox').attr('checked',true);
jQuery('input:text').attr('value','E');
} else {
jQuery('input:checkbox').attr('checked',false);
jQuery('input:text').attr('value','H');
}
});
});
Sample code:
<form>
<? for($i=1;$i<=5;$i++) { ?>
<input type="checkbox" id="pgun[]" name="pgun[]">
<input size="1" type="text" name="degerler[]" id="degerler[]" value="H">
<br />
<? } ?>
<label class="checkbox">
<input type="checkbox" value="E" name="topluekle" id="topluekle">
Check / Uncheck All *
</label>
</form>
Try
jQuery(function ($) {
$('#topluekle').click(function () {
$('input[name="pgun[]"]').prop('checked', this.checked);
$('input[name="degerler[]"]').val(this.checked ? 'E' : 'H');
});
});
Use val() like,
jQuery('input:text').val('H');
and use prop() in place of attr() like
jQuery(document).ready(function() {
jQuery('#topluekle').click(function() {
if(jQuery(this).prop('checked')) {
jQuery('input:checkbox').prop('checked',true);
jQuery('input:text').val('E');
} else {
jQuery('input:checkbox').prop('checked',false);
jQuery('input:text').val('H');
}
});
});
If you want to change value for each checkbox click then you can try,
jQuery(document).ready(function() {
jQuery('input[name="pgun[]"]').click(function() {
var newVal=$(this).next('input:text').val()=='E' ? 'H' : 'E';
$(this).next('input:text').val(newVal);
});
});
It will change corresponding text box's value of checkbox
jQuery(document).ready(function() {
var txtObj = $('input:text');
jQuery('input:checkbox').each(function(i){
jQuery(this).click(function(){
if(jQuery(this).attr('checked')) {
$(txtObj[i]).val("E");
} else {
$(txtObj[i]).val("H");
}
});
});
});
I am trying to submit the form only after my animation is done and completed
Code ------> http://pastie.org/5109573
<form action='loginn.php' method='post'>
<fieldset>
<legend>Register</legend>
<label for='username'>Username*:</label>
<input type='text' name='username' id='username' maxlength="50"
/>
<label for='password'>Password*:</label>
<input type='password' name='password' id='password'
maxlength="50" /> <a><input class ="animated" type='submit' name='Submit' value='Submit' /></a>
</fieldset>
</form>
<span></span>
<script src="jquery.js"></script>
<script>
$("form").submit(function () {
event.preventDefault();
if ($("input:first").val() == "correct") {
$("span").text("OKAY :D").show().fadeOut(1000);
$("a").addClass('animated hinge');
$("span").promise().done(function () {
return true;
});
} else {
$("span").text("Not valid!").show().fadeOut(1000);
return false;
}
});
</script>
</body>
</html>
The form gets submitted before the animation is complete !
You'll need to use the animations callback function to submit the form when the animation completes, like so:
$("input[name='Submit']").on('click', function(e) {
e.preventDefault();
var form = $(this);
if ($("input:first").val() == "correct") {
$("span").text("OKAY :D").show().fadeOut(1000, function() {
form.submit();
});
$("a").addClass('animated hinge');
} else {
$("span").text("Not valid!").show().fadeOut(1000);
}
});
The problem is likely here:
$("form").submit(function() {
event.preventDefault();
You're not declaring event. Try this:
$("form").submit(function(event) {
Edit:
Also, the function you're passing to the done() method doesn't do anything. Returning true from that function won't affect the event; in fact, the event is already handled and gone by the time that function runs.
If you're trying to submit the form with your done callback, you need to do it explicitly. To avoid an infinite loop when it submits again, try specifying a namespace:
$("form").submit(function(event) {
var that = this;
if (event.namespace != 'verified') {
event.preventDefault();
if ($("input:first").val() == "correct") {
$("span").promise().done(function () {
$(that).trigger('submit.verified');
});
} else {
$("span").text("Not valid!").show().fadeOut(1000);
return false;
}
}
});