I want to check the table row value on page load..
Table example:
Name || Status || Set
John || Pass || [ ] (checkbox)
Chris || Fail || [ ] (checkbox)
When the status is 'Fail' I want to disable the checkbox..
Now I'm using this jQuery:
<script>
$(document).ready(function() {
if(getElementsByClassName('paket_ava').value=='kosong'))
{
document.getElementById("checkboxx").disabled=true;
}
});
</script>
and this is my PHP table code :
<tr>
<td><?php echo $paket['id_paket'];?></td>
<td><?php echo $paket['nama_paket'];?></td>
<td><?php echo $paket['keterangan_paket'];?></td>
<td><?php echo $paket['harga'];?></td>
<td><img src='<?php echo $paket['gambar_paket']?>' width='120' height='120'></td>
<td class="paket_ava"><?php echo $paket['ketersediaan_paket'];?></td>
// class on the table data
<td><?php echo $paket['status_harian_paket'];?></td>
<td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value="<?=$paket["id_paket"];?>"></td>
<?php
echo ("<td><a href='edit_data_paket.php?id_paket=$paket[id_paket]'>Edit</a></td>");
?>
</tr>
The code above is not working, but if I change to:
if(getElementsByClassId('paket_ava').value=='kosong'))
{
document.getElementById("checkboxx").disabled=true;
}
(of course I change the class in the table into Id)
When the page load its acting strange and the checkbox on the first data is disabled..
How to do this properly?
Try like below.... It will help you...
Fiddle Example: http://jsfiddle.net/68wbx/126/
Suppose your HTML Table was like below:
HTML:
<table id="datapaket" border="1">
<tr>
<th>Name</th><th>Status</th><th>Set</th>
</tr>
<tr>
<td>John</td><td class="paket_ava">Pass</td>
<td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value='sam'/></td>
</tr>
<tr>
<td>Chris</td>
<td class="paket_ava">Fail</td>
<td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value='sam'/></td>
</tr>
</table>
and try the Below Jquery :
$(document).ready(function() {
$('#datapaket tr').each(function() { //Looping Every Table Row
//Get the TD Value that have Classname ".paket_ava"
var str = $(this).find('.paket_ava').html();
if(typeof str !== 'undefined'){
if (str.indexOf("Fail") >= 0)
$(this).find('td:nth-child(3) input:checkbox').attr("disabled", true);
};
});
});
traverse through each element having class 'paket_ava' and do your stuff inside it. like
$('.paket_ava').each(function(i, obj) {
// your stuff...
});
Reference : jQuery to loop through elements with the same class
Related
i have this table with a button in it, what i want is when i click the button "id=myBtn" get its value to a input text field.
<tbody>
<?php while($row = mysqli_fetch_array($queryTripulacion2)):? >
<tr>
<td><input type="checkbox" name="f[]" value=<?php echo $row[2];?>></td>
<td><?php echo $row['order'];?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['last'];?></td>
<td ><?php echo $row['cod1']?></td>
<td class="nr"><?php echo $row['cod2'];?></td>
<td><?php echo $row['address'];?></td>
<td><?php echo $row['activity'];?></td>
<td><input type="button" id="myBtn" value="<?php echo $row['wanted_value']; ?>"></td>
</tr>
<?php endwhile;?>
</tbody>
this is what i tried, but is not working!. I want the "wanted_value" inside my "#inputM". THANKS!
$(".tablar tbody").on('click','#myBtn',function() {
$('#modal').show();
var c = $(this).closest('tr').find('td.eq(8)').text();
$("#inputM").val(c);
.eq() is a function, not part of a selector. So it should be:
var c = $(this).closest('tr').find('td').eq(8).text();
But this won't work. That TD doesn't have any text in it, it just has the input button. You need to select the button, not the TD, and use .val() rather than .text().
var c = $(this).closest('tr').find('td').eq(8).children(":button").val();
But this is all really overcomplicating it, since the button you're selecting is the same one you clicked on, so it should just be:
var c = $(this).val();
I have a simple html table that displays data from a mysql table containing a list of available tournaments.
<table>
<tr>
<th>Tournament Name</th>
<th>Platform</th>
<th>Date</th>
<th>Venue</th>
<th>Judge</th>
<th>Description</th>
<th>Limit</th>
<th>Register</th>
</tr>
<?php while($row = mysqli_fetch_array($result)):?>
<tr>
<td><?php echo $row['nTournament'];?></td>
<td><?php echo $row['pTournament'];?></td>
<td><?php echo $row['dTournament'];?></td>
<td><?php echo $row['vTournament'];?></td>
<td><?php echo $row['jTournament'];?></td>
<td><?php echo $row['dTournament'];?></td>
<td><?php echo $row['lTournament']; ?></td>
<td><form method="post" action="tournamentlist.php"><button type="submit" name="btn_register"></button></form></td>
</tr>
<?php endwhile; ?>
</table>
What I want to do is that once the current user clicks that button, the button executes a query which takes the current user's id and the tournament id of the selected row to add them to another mysql table. Something like a tournament inscription.
The query/function I want to run is:
if (isset($_POST['btn_register'])) {
singup();
}
function singup() {
global $db;
$idUser = $_POST['idUser'];
$idTournament= $_POST['idTournament'];
$query = "INSERT INTO registeredCompetitor(idUser, idTournament) VALUES ('$idUser', '$idTournament')";
mysqli_query($db, $query);
header('location: tournamentlist.php');
}
The query works just fine on it's own but I don't know if the function itself works because of the button.
Is it possible to do such thing without the use of a form? If not, What other ways are there to do something like this?
EDIT1: Button now is ready but nor the function or the query executes once it's clicked.
You can create a form on each row that has 2 hidden fields in it. Not sure what your DB fields are called though so you'll have to change user_id and tournament_id to something appropriate.
...
<td>
<form action="post" action="the_name_of_your_php_script.php">
<input type="hidden" name="idUser" value="<?php echo $row['user_id']; ?>">
<input type="hidden" name="idTournament" value="<?php echo $row['tournament_id']; ?>">
<button type="submit" name="btn_register"></button>
</form>
</td>
...
Can't wrap it because <form> is not allowed as a child of <td>
All the documentation I see online permits forms inside of <td>. The other alternative is to use a link instead of a form.
You can use javascript to execute this functionality.
<table>
<tr>
<th>Tournament Name</th>
<th>Platform</th>
<th>Date</th>
<th>Venue</th>
<th>Judge</th>
<th>Description</th>
<th>Limit</th>
<th>Register</th>
</tr>
<?php while($row = mysqli_fetch_array($result)):?>
<tr>
<td><?php echo $row['nTournament'];?></td>
<td><?php echo $row['pTournament'];?></td>
<td><?php echo $row['dTournament'];?></td>
<td><?php echo $row['vTournament'];?></td>
<td><?php echo $row['jTournament'];?></td>
<td><?php echo $row['dTournament'];?></td>
<td><?php echo $row['lTournament']; ?></td>
<td><button type="submit" onclick="sendRequest('<?php echo $idUser ?>','<?php echo $idTournament ?>')" name="btn_register"></button></td>
</tr>
<?php endwhile; ?>
</table>
Javascript code
function sendRequest(idUser,idTournament ){
// i am using jquery
$.post(other_page_url,{idUser:idUser,idTournament :idTournament},function(data)
{
window.location = 'tournamentlist.php';
} )}
I hope it's gonna help you
You don't need to wrap this in a <form> inside the table, you can do it all via Javascript / Jquery if you wish. On the html side, add the data you need to the button in data sets:
<td><button type="submit" name="btn_register" id="btn_register" data-user-id="<?php echo $userId ?>" data-tournament-id="<?php echo $row['idTournament']; ?>"></button></td>
Then in your script, you can call the data and send to post via ajax and either load the new page after INSERT, or load as a modal, or whatever you like. You can do something like below if loading a modal (change the load part to refresh the page if you want to go directly):
$('#btn_register').on('click', function () {
var t_id = $(this).data('tournament-id');
var u_id = $(this).data('user-id');
$.ajax({
url: "YourURL",
type: "POST",
data:{
t_id:t_id,
u_id:u_id
},
success: function (h) {
$(".modal-title").text("Table with new stuff");
$(".modal-body").html(h);
$('#modal').modal();
// lots of options here - you could even reload above if desired
}
})
});
Hy,
I want to ban a user when the admin clicks on "bannir" (this will collect the id of the user and put "banned" at 1 in the database)
to print the user informations I'm using a while loop, but when I try to collect the id of the user where in the html tag with the class "idUser", it is always sending the first id and I don't know why..
image of membership area
<div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Prénom</th>
<th>Nom</th>
<th>Email</th>
<th>Admin</th>
<th>Banni</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php while($userInfo = $req->fetch()){?>
<tr>
<td class="idUser"><?= $userInfo['id_user'] ?></td>
<td><?= $userInfo['last_name'] ?></td>
<td><?= $userInfo['first_name'] ?></td>
<td><?= $userInfo['email'] ?></td>
<td><?php if($userInfo['admin'] == 1){ ?>
<img src="../img/ok.png">
<?php } else { ?>
<img src="../img/no.png">
<?php } ?></td>
<td><?php if($userInfo['banned'] == 1){ ?>
<strong style="color:#E04949;">OUI</strong>
<?php } else { ?>
<strong style="color:#6AC259;">NON</strong>
<?php } ?></td>
<td>Modifier | <?php if($userInfo["banned"] == 0){ ?> Bannir <?php }else{ ?> Débannir <?php } ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$('.banMemberJquery').click(function(){
var idUser = $( ".idUser" ).html();
alert('Utilisateur Numero ' + idUser + ' banni avec succès.');
$.ajax({
url:"banMemberRequest.php",
data:'idUser='+idUser,
}).done(function(data){
$('#result').html(data);
});
});
PS : When I click on "bannir", the request in the file "banMemberRequest.php" is working correctly.
Thank's in advance for helping
The issue is because you're selecting all .idUser elements. Calling html() on that will only read the HTML of the first one in that collection.
To fix this you need to use DOM traversal to find only the .idUser element which is related to the .banMemberJquery element which was clicked. To do that you can use closest() and find(), like this:
$('.banMemberJquery').click(function() {
var idUser = $(this).closest('tr').find('.idUser').text(); // note text(), not html()
$.ajax({
url: 'banMemberRequest.php',
data: { idUser: idUser },
}).done(function(data) {
$('#result').html(data);
});
});
I have the template indexSuccess.php with an AJAX function:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#test<?php $mensajes->getIdmensajes() ?>').click(function(){
jQuery('#contenido<?php $mensajes->getIdmensajes() ?>').load(this.href);
return false;
});
});
</script>
<h2>Listado de mensajes emitidos</h2>
<h3>En orden cronológico inverso (más nuevo primero)</h3>
<table id="enviados" width="60%" border="1" cellpadding="8">
<thead>
<tr>
<th>Fecha Creación</th>
<th>Contenido del mensaje</th>
<th>Destinatarios</th>
</tr>
</thead>
<tbody>
<?php foreach ($mensajess as $mensajes): ?>
<tr>
<td width="10%" align="center"> <?php echo date('d/m/Y', strtotime($mensajes->getFechaalta())) ?></td>
<td bgcolor="<?php echo $mensajes->getColores()->getCodigo() ?>"><?php echo $mensajes->getCuerpo() ?></td>
<td width="20%" id="contenido<?php echo $mensajes->getIdmensajes() ?>">
<a id="test<?php echo $mensajes->getIdmensajes() ?>" href="<?php echo url_for('mensajes/receptores?idmensajes='.$mensajes->getIdmensajes()) ?>">Ver receptores</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
I want to pass the value $ message-> getIdmensajes () to the AJAX function. I will have a different ID for each row, but this does not work. But the function works well when I set the value. For example: jQuery ('# test24') and jQuery ('# contenido24') works well for the value Idmensajes=24 . How do I pass the value $ message-> getIdmensajes () to AJAX function?
Your question is not so clear but you wrote
jQuery ('#contenido24') works well for the value Idmensajes=24
Also, you have this
jQuery('#test<?php $mensajes->getIdmensajes() ?>').click(function(){
jQuery('#contenido<?php $mensajes->getIdmensajes() ?>').load(this.href);
return false;
});
So, I think you have elements with similar ids, such as contenido24, contenido25 and so on as data container and links with ids like #test24, #test25 an so. If this is the case then you can simply use
jQuery(document).ready(function(){
// Register click handler for all a tags whose id begins with 'test'
jQuery("a[id^='test']").click(function(e){
e.preventDefault(); // instead of return false
jQuery('#contenido'+this.id.match(/\d+/)[0]).load(this.href);
});
});
jQuery('contenido'+this.id.match(/\d+/)[0]) will select elements with id like #contenido24, contenido25 depending on the ID of a, if an a tag has id='test20' then it'll select #contenido20 and load content from ajax call into this element.
I would like to ask how can I call Sql query when HTML button is pressed. I watched a couple tutorials, but never got it to work correct, thats why I would like to ask here.
So..I have a list of items displayed, and the list is generated from database. Here is how the code looks like:
<table width="100%" border="1" cellspacing="1" cellpadding="5" style="background-color:#FFC" >
<td>Id</td>
<td>Text</td>
<td>Solved?</td>
<td></td>
<?php
while( $array = mysql_fetch_assoc($queryRun) ) {
?><tr>
<td><?php echo $id = $array['id'].'<br />';?></td>
<td><?php echo $text = $array['text'].'<br />';?></td>
<td><?php echo $reseno = $array['solved'].'<br />';?></td>
<td><input type="button" value="Solve it" /></td>
</tr><?php
}?>
</table>
Now each item that is generated inside this loops has a button "Solved" at the end of the table, and I want to make it so when user click on that button, do a Sql query which changes a value of solved from 0 (false) to 1 (true).
You need ajax. write button onclick and make ajax call.
I've not tested this, but it should work.
Basically I've applied a class to anything to easily select stuff in jQuery:
<?php while ($array = mysql_fetch_assoc($queryRun)) { ?>
<tr class="row">
<td class="cell_id">
<?php echo $array['id']; ?>
</td>
<td class="cell_text">
<?php echo $array['text']; ?>
</td>
<td class="cell_solved">
<?php echo $array['solved']; ?>
</td>
<td class="cell_solve_it">
<input class="button_solve_it" type="button" value="Solve it" />
</td>
</tr>
<?php } ?>
Then I've created this short jQuery script:
$('.row').each(function(){
$('.button_solve_it', this).click(function(e){
e.preventDefault();
$.post(
'solve_query.php',
{
id: $('.cell_id', this).html(),
text: $('.cell_text', this).html()
},
function (data) {
$('.cell_solved', this).html('1');
}
);
});
});
In short:
when you click a .button_solve_it button, you make an AJAX request to solve_query.php, where you perform your SQL query.
Then, it sets the content of the row in Solved? column to 1 (or to true or whatever you want).