How can I disable the link(delete and view) if the checkbox is unchecked.
This is my code
<table><form>
<tr>
<th></th>
<th style="width:100px;"><center>Last Name</center></th>
<th style="width:100px;"><center>First Name</center></th>
<th style="width:auto;"><center>Email</center></th>
<th style="width:100px;"><center>Birthday</center></th>
<th style="width:auto;"><center>Action</center></th>
</tr>
<?php
while($row= mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>";
echo "<input type=\"checkbox\" id=\"box\">";
echo "<td>".$row['lastname']."</td>";
echo "<td>".$row['firstname']."</td>";
echo "<td>".$row['email']."</td>";
echo "<td>".$row['bdate']."</td>";
echo "";
echo "<td><center>";
echo "DELETE ";
echo "VIEW ";
echo "</td></center></td>";
echo "</tr>";
}
?>
</form></table>
Here is my jQuery script(example if I want to disable VIEW link only)
<script>
jQuery('#box').click(function () {
//check if checkbox is checked
if (jQuery(this).is(':checked')) {
jQuery('#view').removeAttr('disabled'); //enable input
} else {
jQuery('#view').attr('disabled', true); //disable input
}
});
</script>
I want to disable the each view and delete per row if the checkbox is uncheck how can I do it? or my jQuery is wrong? Can you give me an example for checkall box
<input type="checkbox" id="check"/><label for="check">checkbox</label>
Google
Check this link
I don't know much about php but try this:
....
.
.
echo "<input type=\"checkbox\" id=\"box\" onchange="myfunction()">";
echo "<td>".$row['lastname']."</td>";
echo "<td>".$row['firstname']."</td>";
echo "<td>".$row['email']."</td>";
echo "<td>".$row['bdate']."</td>";
echo "";
echo "<td><center>";
echo "<input type="button" id="delete" value="Delete"> ";
echo "<input type="button" id="view" value="View"> ";
.
.
.
...
And the JavaScript goes like this:
<script>
function myFunction(){
document.getElementById('delete').disabled = !this.checked;
document.getElementById('view').disabled = !this.checked;
}
</script>
Anchors can't not be disabled only form-related elements can be disabled (input, button, textarea, etc.) What you should do is either remove the href attribute or hide the anchor element...
$(function() {
$("#chkRemove").change(function() {
if ($(this).is(":checked")) {
$("a").attr("href", "javascript:void(0)");
} else {
$("a").each(function(idx, element) {
$(element).attr("href", $(element).data("link"));
});
}
});
$("#chkHide").change(function() {
if ($(this).is(":checked")) {
$("a").hide();
} else {
$("a").show();
}
});
});
.links {
padding: 20px 0;
}
.links a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="chkRemove" type="checkbox" />Remove href attribute
</div>
<div>
<input id="chkHide" type="checkbox" />Hide anchors
</div>
<div class="links">
Google Link
Stackoverflow Link
</div>
Also, as a side note. Never use the attr function to handle the state of the checkbox or a radio button. Always use the prop function instead
$(selector).prop("checked", true);
Related
I want to create a column that has a text box inside each table row. The user can write any text inside the text box and click the 'Save' button to save it in the database. Additionally, the text box can be edited unlimited times. My code is the following:
index.php
<?php
...
while($row = $result->fetch_assoc()){
echo "<form action= 'search.php' method='post'>";
echo "<form action='' method='get'>";
echo "<tr>
<td><input type='checkbox' name='checkbox_id[]' value='" . $row['test_id'] . "'></td>
<td> ".$row['test_id']." </td>
<td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
<td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>
<td> ".$row['path']." </td>
<td> ".$row['video1_path']." </td>
<td> ".$row['video2_path']." </td>
<td> ".$row['video3_path']." </td>
<td> ".$row['video4_path']." </td>";
if(empty($row["directory"])){
echo "<td></td>";
}else {
echo "<td><div><button class='href' id='" . $row['test_id'] . "' >View Report</button><div></td>";
}
echo " <td style='display: none;'> ".$row['directory']." </td>
</tr>";
}
?>
</table> <br>
<input id= 'select_btn' type='submit' name='submit' value='Submit' class='w3-button w3-blue'/>
</form>
</form>
</div>
<!-- Opens the pdf file from the pdf_report column that is hidden -->
<script type="text/javascript">
$(document).on('click', '.href', function(){
var result = $(this).attr('id');
if(result) {
var dir = $(this).closest('tr').find("td:nth-child(9)").text();
window.open(dir);
return false;
}
});
</script>
<!-- Updates text input to database -->
<script type="text/javascript">
$(document).on('click', '.name', function(){
var fcookie1= 'mycookie1';
var fcookie2= 'mycookie2';
var name = $(this).attr('id');
if(name) {
var text1 = $(this).closest('tr').find("td:nth-child(2)").text();
var text2 = $(this).closest('tr').find("td:nth-child(3)").text();
document.cookie='fcookie1='+text1;
document.cookie='fcookie='+text2;
$.ajax({
url: "name_edit.php",
type:"GET",
success: function() {
// alert("Edited Database");
}
});
}
});
</script>
name_edit.php
<?php include 'dbh.php' ?>
<?php include 'search.php' ?>
<?php
if (isset($_COOKIE["fcookie1"]))
echo $_COOKIE["fcookie1"];
else
echo "Cookie Not Set";
if (isset($_COOKIE["fcookie2"]))
echo $_COOKIE["fcookie2"];
else
echo "Cookie Not Set";
$var1 = $_COOKIE["fcookie1"];
$var2 = $_COOKIE["fcookie2"];
$conn = mysqli_connect($servername, $username, $password, $database);
$sql = "UPDATE test_data SET name='$var2' WHERE id='$var1'";
$query_run= mysqli_query($conn,$sql);
if($query_run){
echo '<script type="text/javascript"> alert(Data Updated)</script>';
} else {
echo '<script type="text/javascript"> alert(Data Not Updated)</script>';
}
?>
My idea was for the user to write any text. Then i will 'grab' the text and its expected id and save it to a cookie, when the save button is clicked. The cookie will then be echoed in name_edit.php and insert it in the sql code which will then update my database.
Im not sure what to include in 'value' inside the form tag. If there is data inside the database then display it inside the text box which can also be edited, else display blank for a text to be inserted.
I am new to coding and I'm a bit confused if my idea is correct or should i approach it another way.
I did some research and found out i did not have to use form but instead use 'contenteditable'. To edit the specific column i changed
<td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
<td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>
to this:
<td class='name' data-id1='" . $row['test_id'] . "' contenteditable='true'>".$row['name']."</td>
and for my jquery i added the following:
<style>
.editMode{
border: 1px solid black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// Add Class
$('.name').click(function(){
$(this).addClass('editMode');
});
// Save data
$(".name").focusout(function(){
$(this).removeClass("editMode");
var id = $(this).closest('tr').find("td:nth-child(2)").text();;
var value = $(this).text();
$.ajax({
url: 'name_edit.php',
type: 'post',
data: { value:value, id:id },
success:function(response){
alert('Edits Saved');
return false;
}
});
});
});
</script>
and in the php side, i simply did the following:
<?php include 'dbh.php' ?>
<?php
$conn = mysqli_connect($servername, $username, $password, $database);
$field = $_POST['field'];
$value = $_POST['value'];
$id= $_POST['id'];
$sql = "UPDATE test_data SET name='".$value."' WHERE test_id='".$id."'";
mysqli_query($conn,$sql);
echo 1;
?>
I have checkboxes generated dynamically through php and i would like to hide a certain button if all the checkboxes having a similar class value are not checked and reenable it if they are checked:
The php code that generates the checkboxes is
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
foreach ($checks as $m => $check) {
$item ="";
$checkbox ="";
$textinput ="";
$displayx="";
if ($check->mandatory_customer == 1) { //mandatory customer checks
$displayx .="<i style='color:red;'>*</i>";
$item .= $check->item.$displayx;
$checkbox .='<input type="checkbox" class="1" id="'.$m.'"' ;
$textinput .='<input type="text" class="1" id="'.$m.'"' ;
} else { //not mandatory customer
$item .= $check->item;
$checkbox .='<input type="checkbox" class="0" id="'.$m.'"' ;
$textinput .='<input type="text" class="0" id="'.$m.'"' ;
}
echo "<tr id='" . $m . "'>";
echo "<td>" . $m . "</td>";
echo "<td>" . $item . "</td>";
echo "<td>".$checkbox."</td>";
echo "<td>".$textinput."</td>";
echo "</tr>";
}
?>
}
</tbody>
I also have a button that i would like to disable if all checkboxes with class 1 are not checked and enable it if they are all checked using jquery
<button class="btn btn-success" id="approve_btn">Approve</button>
I have tried:
$('tbody tr').each(function () {
if ($(this).attr('class:1').find('.myCheckBox').prop('checked')) {
doEnableButton = true;
}
if (!doEnableButton) {
$('#approve_btn').prop('disabled', 'disabled')
}
else {
$('#approve_btn').removeAttr("disabled");
}
});
});
I have checked on several resources but most of them are not helpful
The above fails how do i go about this
Try this
$(document).ready(function () {
$(":checkbox.1").on("change", function () {
if ($(":checkbox.1").not(":checked").length > 0)
$("#approve_btn").prop("disabled", "disabled");
else
$("#approve_btn").removeAttr("disabled");
});
});
I have several dynamic input fields and checkboxes and i would like to disable the input box if the checkbox having a similar id value is checked
This is the php code:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
foreach ($checks as $m => $check) {
$item ="";
$checkbox ="";
$textinput ="";
$displayx="";
if ($check->mandatory_customer == 1) { //mandatory customer checks
$displayx .="<i style='color:red;'>*</i>";
$item .= $check->item.$displayx;
$checkbox .='<input type="checkbox" class="1" id="'.$m.'"' ;
$textinput .='<input type="text" class="1" id="'.$m.'"' ;
} else { //not mandatory customer
$item .= $check->item;
$checkbox .='<input type="checkbox" class="0" id="'.$m.'"' ;
$textinput .='<input type="text" class="0" id="'.$m.'"' ;
}
echo "<tr id='" . $m . "'>";
echo "<td>" . $m . "</td>";
echo "<td>" . $item . "</td>";
echo "<td>".$checkbox."</td>";
echo "<td>".$textinput."</td>";
echo "</tr>";
}
?>
}
</tbody>
Now i would like to disable the input boxes having the same id's as the checkboxes if the checkbox is checked. How do i go through this using jquery
As stated in my comment, it is not permitted to have the same ID on more than one element. You should update the ID on the lines where you assign $checkbox and $textinput so that unique ID values are assigned, which will also help you retrieve the submitted values on the other end. Changing them to something like id="chk_'.$m.'" and id="txt_'.$m.'" would be sufficient.
Also, it looks like you are not closing your input tags. Add /> to the end of the lines where you assign $checkbox and $textinput, or just > if not using HTML 5.
Once you've fixed those issues, the following jquery will work for you:
$(function() {
$('input[type=checkbox]').change(function() {
if (this.checked) {
$(this).closest('tr').find('input[type=text]').prop('disabled', true);
} else {
$(this).closest('tr').find('input[type=text]').prop('disabled', false);
}
});
});
Demo: https://jsfiddle.net/BenjaminRay/nnphq559/
$(document).ready(function () {
$(":checkbox").on("change", function () {
if ($(this).prop("checked"))
$(":text#"+$(this).attr("id")).prop("disabled", "disabled");
else
$(":text#" + $(this).attr("id")).removeAttr("disabled");
});
});
i am retrieving some data from database and show them in a html table.but right now i am struggling with the following scenario.
if user clicks disable button it should be hide and enable button should be show.if user clicks on enable button it should be hide and disable button should be show.
Here is my code
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
</script>
</head>
<body>
<?php
echo "<table border='1' align='center' width='100%'>
<tr>
<th>ID</th>
<th>Image</th>
<th>Modified Date</th>
<th>URL</th>
<th>Clicks</th>
<th>Status</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($query))
{
$id = $row['img_id'];
echo "<tr>";
echo "<td align='center'>" . $row['img_id'] . "</td>";
echo "<td align='center' width='500px'>" . '<img width = 200px; height=100px; src=" '. ($row['img_path']) . '"/>'. "</td>";
echo "<td align='center' width='350px'>" . $row['date'] . "</td>";
echo "<td align='center'>" . $row['url'] . "</td>";
echo "<td align='center'>" . $row['clicks'] . "</td>";
echo "<td align='center'>" . $row['status'] . "</td>";
echo "<td align='center'><a href='image_update.php?id=$id'><button>Update</button></a>
<form method='post' >
<input type='hidden' name='tid' value='$id'/>
<input type='submit' name='disable' id='disable' value='Disable'>
<input type='submit' name='enable' id='enable' value='Enable'>
</form>
</td>";
$id = $_POST['tid'];
if($_SERVER['REQUEST_METHOD']=='POST') {
$sql = "UPDATE advertisementnew SET status = 'Disabled' WHERE img_id='$id'";
mysqli_query($con, $sql);
}
echo "</tr>";
}
echo "</table>";
try this js:
$('#enable').css("display", "none");
$('#disable').click(function(){
$('#enable').css("display", "block");
$('#disable').css("display", "none");
});
instead of:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
can you try this hope this is works
<script type = "text/javascript" >
$('input:submit').click(function () {
var check = $(this).attr('id');
if (check == 'disable') {
$('#enable').show();
$('#disable').hide();
}
if (check == 'enable') {
$('#disable').show();
$('#enable').hide();
}
});
</script>
You can have class
.hide-show{
display : none;
}
HTML :
<input type='submit' name='disable' id='disable' value='Disable' class="enable-disable-btn">
<input type='submit' name='enable' id='enable' value='Enable' class="enable-disable-btn hide-show">
Initially put the hide-show class on the button which should be need to hide.
Add class enable-disable-btn to both button enabled/disbaled
JS:
You can use jQuery#toggleClass
$(".enable-disable-btn").on('click',function(){
$(".enable-disable-btn").toggleClass('hide-show')
})
You need to add unique id dynamically created in while loop in your case id is not unique
for this
changes in php replace these two lines
<input type='submit' onclick='doEnableDesable(this)' name='disable' id='disable".$id."' value='Disable'>
<input type='submit' onclick='doEnableDesable(this)' name='enable' id='enable".$id."' value='Enable'>
And in javascript define function for dynamic Id
function doEnableDesable(params)
{
if (params.value == 'disable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
if (params.value == 'enable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
}
I am trying to print the elements of an array in PHP which was passed from Javascript. I think the js array is being passed but for some reason it is not being printed via php. Sorry if my code is not properly indented. TIA
<?php
$link = mysqli_connect("localhost","xxxx", "xxxxxx","xxxx");
if($_POST['delete']){
$delete= json_decode($_POST['str'], true);
foreach($delete as $x){
echo"<script> alert(".$x.");</script>";
}
}
?>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body >
//This is a table which displays rows from a database.
//The user selects rows and the ids of those rows are
//are stored in a javascript array called 'toDelete'
//I want to pass this array to PHP
<form method="post" id="myForm" >
<table id="secondDiv" >
<tr>
<th >
<form><input class="checkbox"type="checkbox" name="selectAll" id="selecctall" value=""></form>
</th>
<th>Date</th>
<th>Event</th>
<th>Details</th>
<th>Time & Location</th>
</tr>
<?php
$link = mysqli_connect("localhost","xxxx", "xxxxxx","xxxx");
$query = "SELECT * FROM meetings";
if($result = mysqli_query($link,$query)){
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td><form ><input class=\"checkbox1\" type=\"checkbox\" name=\"".$row['meetingNo']."\" >
</form></td>";
echo "<td>".$row['date']."</td>";
echo "<td>".$row['event']."</td>";
echo "<td>".$row['details']."</td>";
echo "<td>".$row['location']."</td>";
echo "</tr>";
}
}
?>
</table>
<!-- <input type="submit" class="btn btn-warning" value="Edit" /> -->
<input type="hidden" id="str" name="str" value="" />
<input type="submit" id="btn" name="delete" value="Delete" />
</form>
<script>
var toDelete = new Array();
$(document).ready(function() {
$('#selecctall').click(function(event) { //on click
if(this.checked) { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
// JSON.stringify(toDelete);
$('input:checkbox').change(
function(){
if ($(this).is(':checked')) {
toDelete.push(this.name);
}
return true;
}
);
$(document).ready(function(){
$("#btn").click( function() {
$.post( $("#myForm").attr("action"),
$('#str').val(JSON.stringify(toDelete))
);
});
$("#myForm").submit( function() {
return false;
});
});
</script>
</body>
</html>
As you are printing a string, not a javascript variable, you don't have quotes within alert call.
Change the line:
echo"<script> alert(".$x.");</script>";
With:
echo "<script> alert('$x'); </script>";
Or:
echo "<script> alert('".$x."'); </script>";