Develop Reference

How to Take value from buttons with same class Using JQuery

I have a PHP script which Produces the n number of buttons as an output based on database records. Each value is associated with a respective button.
When I click any button, I always get the value of first button.
How can I get the value of button which is clicked only?
<button class='btn btn-danger question_delete' value=".$row['action_id']."</button>
My jQuery script:
$(document).ready(function(){
$(".question_delete").click(function(){
var action_value = $(this).val();
if(action_value){
$.ajax({
type:'POST',
url:'delete_question_group.php',
data:{delete_action:action_value},
success:function(data){
refresh_table();
refresh_paper();
}
});
}else{
// $('#select_qtype_list').html('<option value="">Select Question First</option>');
}
});
});
My PHP:
<?php
session_start();
$name =$_SESSION['name'];
$id = $_SESSION['id'];
include("database.php");
$run = mysqli_query($conn,"select * from users where id='$id' AND name='$name' ");
$user = mysqli_fetch_array($run);
$subject_id = $user['subject_id'];
$user_name = $user['name'];
$run1 = mysqli_query($conn,"select * from subject where sub_id='$subject_id'");
$subject = mysqli_fetch_array($run1);
$subject_name = $subject['sub_name'];
$query = $conn->query("select * from action where subject_id='$subject_id' AND user_id='$id'");
//Count total number of rows
$rowCounts = $query->num_rows;
//Display states list
if($rowCounts > 0){
$i=1;
while($row = $query->fetch_assoc()){
//echo '<option value="'.$row['qtype_id'].'">'.$row['qtype_name'].'</option>';
echo "<tr>";
//$q_id = $query['question_id'];
//$question_type_id = $query['question_type_id'];
echo "<td>$i</td>";
echo "<td>".$row['action_name']."</td>";
echo "
<td>
<button class='btn btn-danger question_delete' value=".$row['action_id'].">
<i class='fa fa-trash' aria-hidden='true'>
</i>
</button>
</td>
<td>
<button id='question_update' class='btn btn-primary' data-toggle='modal' data-target='#myModal_update' value=".$row['action_id'].">
<i class='fa fa-pencil' aria-hidden='true' >
</i>
</button>
</td>
</tr>
";
$i++;
}
}else{
echo '<td colspan="4" style="text-align: center; color:red;"><strong>No Questions are Selected</string></option>';
}
?>

Probably because the property action_id inside the value on each button don't change. Also you forgot to close the button tag, maybe that's why it doesn't work
<button class='btn btn-danger question_delete' value=".$row['action_id']."></button>

-This Problem is Solved and Worked Perfectly. Description of solution is as follow:
-First onclick attribute is used. and a function is created which takes the value of button each time when button will click.
Following Code is worked:
<button class='btn btn-danger' onclick='myfunction(this.value)' id='question_delete' value=".$row['action_id']."><i class='fa fa-trash' aria-hidden='true'></i></button>
JQuery Code:
$(document).ready(function(){
myfunction1 = function(e){
if(e){
$.ajax({
type:'POST',
url:'update_question_group.php',
data:{update_action:e},
success:function(html){
$('#update_action_list').html(html);
$('#update_action_list').selectpicker('refresh');
}
});
}else{
// $('#select_qtype_list').html('<option value="">Select Question First</option>');
}
}
});

Edit specific record that inside php looped

at the moment i've coded out like
<div class="row">
<div class="col-lg-12">
<table id="usertable" class="table table-bordered table-hover text-center">
<thead>
<th class="col-lg-1 text-center">User ID</th>
<th class="col-lg-4 text-center">Username</th>
<th class="col-lg-4 text-center">Password</th>
<th class="col-lg-2 text-center">Role</th>
</thead>
<tbody>
<?php
require('dbconnectmssql.php');
$sql = "select [User_ID],[user_decoded],[pass_decoded],[permission] from [rfttest].[dbo].[users]";
$query = sqlsrv_query ($conn , $sql);
if($query === false)
{die( print_r( sqlsrv_errors(), true));}
while($row = sqlsrv_fetch_array( $query, SQLSRV_FETCH_NUMERIC))
{
echo "<tr>";
foreach($row as $x => $a)
{
echo "<td>".$a."</td>";
}
echo "<td>";
echo "<a href='#' ><span class='glyphicon glyphicon-wrench' aria-hidden='true'></span></a>";
echo "<a href='usercontrol.php?del=$row[0]'>";
echo "<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>";
echo "</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
/table>
</div>
</div>
it's all about query out and show how many user in the table.
I've done the delete-record by link to PHP file and $_GET data (maybe improve later if have another solution that you will suggest )
Another things that i want to do is
Edit specific record without redirected to another page
My idea for right now is hidden form that popup after click edit such as i've click then form pop up with data record that stored and user can edit it and save it by submit to PHP file and then redirect back to this page
something like : Contain form within a bootstrap popover? post
the popover link
<div id="popover-head" class="hide">
some title
</div>
<div id="popover-content" class="hide">
<!-- MyForm -->
</div>
but i still can't figured out
How can i code out to make the link to open the specific popover-head/content maybe popover-head/content must be contain in id or something ?
What about PHP
What about JS/JQ also
Any solution what i just want only something to edit specific record that echo out
Sorry for my bad English
Thanks

You likely want to use AJAX for this.
This looks so painful to me - and if it worked a google spidering would delete all users on the page:
}
echo "<td>";
echo "<a href='#' ><span class='glyphicon glyphicon-wrench' aria-hidden='true'></span></a>";
echo "<a href='usercontrol.php?del=$row[0]'>";
echo "<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>";
echo "</a>";
echo "</td>";
echo "</tr>";
}
It could be written
} ?>
<td>
<a href='#' ><span class='glyphicon glyphicon-wrench' aria-hidden='true'></span></a>
<a class="del" href='#' data-userid='<?PHP echo row["User_ID"]; ?>'>
<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
</a>
</td>
</tr>
<?PHP } ?>
And then
$(function() {
$(".del").on("click",function(e) {
e.preventDefault(); stop the page from reloading
var id=$(this).data("userid");
$.get("usercontrol.php?del="+id,function() {
alert(id + "deleted");
});
});
});
To edit
Popup a form with the data using .show() and .hide()
change the data
AJAX the changes on submit - be sure to use preventDefault to
stop actual submission $("form").on("submit",function(e) { e.preventDefault(); $.post("save.php",$(this).serialize(),function(data) { alert("saved"); $("#formDiv").hide() });});
show the result
close the popup

replace onclick action to display inline output

i want to change the behavior of the button in this function
$STRING .= ''.$CORE->_e(array('auction','41')).'';
to when clicked to display the output of this function
$data = get_user_meta( $authorID, 'cellno', true);
if(strlen($data) > 0){
echo "<span><i class='fa fa-phone'></i> <a href='phone:".$data."' rel='nofollow' target='_blank'</a> </span>";
so that when " class="btn btn-info btn-lg" is clicked it will display the phone number inside it, for now it shows contact author, and opens a new page to the author page.
thanks everybody

Try this,
<?php
$STRING .= ''.$CORE->_e(array('auction','41')).'';
$data = get_user_meta( $authorID, 'cellno', true);
if(strlen($data) > 0){
echo "<span id='phoneNumber'><i class='fa fa-phone'></i> <a href='phone:".$data."' rel='nofollow' target='_blank'</a> </span>";
}
?>
<script>
$(document).ready(function(){
$('#phoneNumber').hide();
});
function showPhoneNumber(){
$('#phoneNumber').show();
}
</script>
Also, try learning onclick events.

Simple changing of innerHTML not working

I have this code, I want to click on the Link that's in the <span> and then that should change the innerHTML of exactly this <span>.
<span id="button_report_<?php echo $row->id ?>_spam"><a class="btn red btn-xs" onlick="changeSpamButton<?php echo $row->id ?>()" target="report_iframe_<?php echo $row->id ?>" href="resource/report.php?id=<?php echo $row->id ?>&ttype=currency&type=spam">Spam</a></span>
<span id="button_report_<?php echo $row->id ?>_na"><a class="btn yellow btn-xs" onlick="changeNAButton<?php echo $row->id ?>()" target="report_iframe_<?php echo $row->id ?>" href="resource/report.php?id=<?php echo $row->id ?>&ttype=currency&type=na">Unavailability</a></span>
<script type="text/javascript">
function changeSpamButton<?php echo $row->id ?>() {
document.getElementById("button_report_<?php echo $row->id ?>_spam").innerHTML = '<a class="btn default btn-xs">Spam</a>';
}
function changeNAButton<?php echo $row->id ?>() {
document.getElementById("button_report_<?php echo $row->id ?>_na").innerHTML = '<a class="btn default btn-xs">Unavailability</a>';
}
</script>
Any help is greatly appreciated. Thank you!

As I said, you'd have to change onlick to onclick. But to give you an idea how to simplify the event handling:
<span data-type="spam">
<a onclick="changeButton(this.parentNode)">Spam</a>
</span>
<span data-type="na">
<a onclick="changeButton(this.parentNode)">Unavailability</a>
</span>
<script type="text/javascript">
var content = {
'spam': '<a class="btn default btn-xs">Spam</a>',
'na': '<a class="btn default btn-xs">Unavailability</a>'
};
function changeButton(element) {
element.innerHTML = content[element.getAttribute('data-type')];
}
</script>
This makes your code easier to read, understand and maintain.
Reading material: Introduction to event handling - quirksmode.org

Modal reopens automatically after clicking the closing button

I've been trying to dynamically create a modal view in a table.
The data used to create the table is comming from a sql database.
Now my problem:
Whenever I click on a button called "Details" the modal view is opening and contains the data it should.
However, when I try to close the view with the "Close"- Button or the X in the top right corner the modal view will close for a second and reopen on its own.
The background will get darker after I do one of the above mentioned operations.
Here comes the tricky part. Whenever I close the view with the escape button on my keyboard, it'll close as it should and I'll get back to my previous view.
<?php
mysql_connect("localhost", "****" , "****");
mysql_select_db("hallo");
$sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
$query=mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($query)) {
$thisId = $row['id'];
$thisModalId = 'modal'.$thisId;
$thisModalIdHref = '#'.$thisModalId;
$thisFormDoneId = $row['id'].'FormDoneId';
// Create table row
echo "<tr onclick=\"input\" data-toggle=\"modal\" href='$thisModalIdHref'>";
echo "<td>";
echo $row['Name'];
echo "<td>";
echo $row['Betreff'];
echo "<td>";
echo "<button class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target='$thisModalIdHref'>";
echo "Details";
echo "</button>";
echo"<div class=\"modal fade\" id='$thisModalId' tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">";
echo "<div class=\"modal-dialog\">";
echo "<div class=\"modal-content\">";
echo "<div class=\"modal-header\">";
echo "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
echo "<h4 class=\"modal-title\" id=\"myModalLabel\">Weitere Information </h4>";
echo "</div>";
echo"<div class=\"modal-body\">";
echo "<dl class=\"dl-horizontal\">";
echo "<dt>Bereich</dt>";
echo "<dd>" .$row['Bereich']. "</dd>";
echo "</dl>";
echo"</div>";
echo"<div class=\"modal-footer\">";
echo "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
echo "<button type=\"button\" class=\"btn btn-primary\">Save changes</button>";
echo"</div>";
echo"</div>"; //<!-- /.modal-content -->
echo"</div>";//<!-- /.modal-dialog -->
echo"</div>";//<!-- /.modal -->
echo "</td>";
echo "</tr>";
}
?>
For clarification:
If the $thisModalId is changed to the previous "MyModal" it works, but the button will, as it's supposed to, open the same text.
If you need any more source code or something else, I'd be more than happy to post it.
Thanks in advance for your help guys.
Best regards.

This is probably caused by the fact that your modal div is defined inside the element (tr) that the onclick handler is defined on. If the close button handler does not consume the click event, it will bubble to the containing elements all the way up (div, div, div, div, td, tr). When it gets to the tr, the onclick handler will execute and the modal will open again.
Obviously, you can solve this by not having your modal div inside your table structure, which doesn't really have a function anyway. This means that you will have to perform more than one separate loop, because the divs have to be all the way outside the table. This does not have to mean that your code will get messy if you take the advice of some of the commenters above and separate your PHP from your HTML a little bit.
Try something like this:
<?php
// Collect data
mysql_connect("localhost", "****" , "****");
mysql_select_db("hallo");
$sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
$query=mysql_query($sql) or die (mysql_error());
$modals = array();
while($row = mysql_fetch_assoc($query)) {
$modals[] = array(
'id' => 'modal' . $row['id'],
'href' => '#modal' . $row['id'],
'FormDoneId' => $row['id'] . 'FormDoneId',
'Name' => $row['Name'],
'Betreff' => $row['Betreff'],
'Bereich' => $row['Bereich'],
);
}
?>
<table> <!-- Or something -->
<?php
foreach ($modals as $modal) {
// Create table rows
?>
<tr onclick="input" data-toggle="modal" href="<?php echo $modal['href'] ?>">
<td>
<?php echo $modal['Name'] ?>
<td>
<?php echo $modal['Betreff'] ?>
<td>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="<?php echo $modal['href'] ?>">
Details
</button>
</td>
</tr>
<?php
}
?>
</table>
<?php
foreach ($modals as $modal) {
// Create modal divs
?>
<div class="modal fade" id='<?php echo $modal['id'] ?>' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Weitere Information </h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>Bereich</dt>
<dd><?php echo $modal['Bereich'] ?></dd>
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div> //<!-- /.modal-content -->
</div>//<!-- /.modal-dialog -->
</div>//<!-- /.modal -->
<?php
}