Show custom prompbox html and pass result to php - javascript

I have created a table where it displays the list of users. Every user has a message button. on click of message button, I want to show a custom prompt box where user will be able to type a message. On click of submit, typed message will be sent to php page.
<div style="overflow: auto;height: 400px; width: 100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Id</th>
<th>Package</th>
<th>Date</th>
<th>Referring Agent</th>
<th>Action</th>
</tr>
<?php if(!empty($records)){
foreach($records as $k=>$v){
?>
<tr>
<td><?php echo $v['id']; ?></td>
<td><h3><?php echo $v['package']; ?></h3></td>
<td><?php echo $v['submit_date']; ?></td>
<td><?php echo $v['agent']; ?></td>
<td>
<div class="pagging">
Message
</div>
</td>
</tr>
<?php
}
}else{
?>
<tr>
<td colspan="5" align='center'><?php echo "No record added yet"; ?>
</tr>
<?php
}
?>
<!--<tr class="odd">
<td>2</td>
<td><h3>Lorem ipsum dolor sit amet, consectetur.</h3></td>
<td>12.05.09</td>
<td>Administrator</td>
<td>
<div class="pagging">
Send Notification
</div>
</td>`enter code here`
</tr>-->
</table>
</div>
in php i am getting the id by this way and here I want the message typed as well. Kindly help
if (isset($_GET['id'])){
$id=$_GET['id'];
}

A quick example how to make one:
<input type="button" value="Show" onClick="showDiv()">
This is button that will trigger event (show div).
<div id="someDiv" style="display: none">
<form action="file.php" method="POST">
<textarea name="textArea" rows="4" cols="20"></textarea><br>
<input type="submit" name="submit" value="Submit message">
</form>
</div>
This is your custom prompt (message).
<script>
function showDiv()
{
var div = document.getElementById('someDiv');
if (div)
div.style.display = 'inherit';
}
</script>
This is JavaScript function that displays your custom prompt.
What you need to do is add onClick event to button and insert somewhere JavaScript function (better in separate JS file) and hide your prompt in the same HTML document.
Hope that helps!

Related

PHP checkbox only showing first value

I am trying to iterate the row data of each message for each value in the database by a checkbox as when clicked you get the string value on this row
the Code:
<div id="Ticket" style="display:none;" class="tabcontent">
<table class="table">
<thead>
<tr>
<th>Ticket ID </th>
<th>username</th>
<th>Data published</th>
<th>Subject</th>
<th>problem</th>
<th>Statues</th>
<th>Solved?</th>
<th>More Details</th>
</tr>
</thead>
<tbody>
<?php
$query=" Select * FROM tickets where resolved=0";
$result_opened = mysqli_query($db, $query);
while($row = mysqli_fetch_array($result_opened)){ ?>
<tr>
<td data-label="id"><?php echo $row['id']?></td>
<td data-label="username"><?php echo $row['username']?></td>
<td data-label="publish"><?php echo $row['published']?></td>
<td data-label="subject"><?php echo $row['subject']?></td>
<td data-label="problem"><?php echo $row['problem']?></td>
<td data-label="">Open</td>
<td> </i> <br/><br/>
</td>
<td><input type="checkbox" id="toggle">
<label for="toggle">see more</label>
<dialog >
<h>Message</h><br><br>
<p>
//Here I am getting only the first value//
<?php echo $row['message'] ?>
</p>
<label for="toggle">close</label>
</dialog></td></tr>
<?php }?>
</tbody>
</table>
</div>
but I keep on getting only the last value in the specific row
image:
I tried many ways to fix it but the main problem is its only getting the first value in the while loop.
The problem arises because you are assigning same id to all checkbox component.
Instead use this -
input type="checkbox" id="toggle-<?=$row['id']?>">

Added textbox via javascript not detected by form when submitted

I have a javascript which adds text boxes when clicked,
I tried to submit the data but it can only detect the original textbox
Here is the code of javascript
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.setAttribute('name','description[]');
textbox.setAttribute('id', 'tasks');
textbox.setAttribute('class', 'form-control form-control2');
textbox.setAttribute('required', 'true');
textbox.setAttribute('placeholder', 'Describe Problem Encountered...');
document.getElementById('appendtb').appendChild(textbox);
Here is a part of code in html
<tr>
<td colspan="6" id="appendtb">
<!-- this is the textbox that it detects-->
<?php echo form_input(['name'=>'description[]','placeholder'=>'Describe Problem Encountered...','class'=>'form-control form-control2','required'=>'true','id'=>'task']); ?>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" id="addTask" onclick="addTaskfield()" class="btn btn-outline-primary" name="btnAddTask" value="Add Task"/>
</td>
<td colspan="3" align="right">
<?php echo form_submit(['name'=>'submit','value'=>'Submit Request','class'=>'btn btn-outline-success btn-submitC']); ?>
</td>
</tr>
Here is the PHP code
$description = $this->input->post('description');
print_r($description);
exit();

Stripe checkout pull value from html

I am going to be placing a value in a custom data type. I am using stripe checkout and am trying to have it so a span text content, so that I can turn that value/text into a variable.
HTML:
<!--Totals-->
<div class="col-xs-12 col-sm-6 pull-right">
<p class="lead">Amount Due <?php echo '$date'; ?> + <?php echo '$paymentdatesetting'?></p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th style="width:50%">Subtotal:</th>
<td id='subtotal'>$subtotal</td>
</tr>
<tr>
<th>Tax ($tax-country)</th>
<td><?php echo '$total-tax'; ?></td>
</tr>
<tr>
<th>Shipping:</th>
<td><?php echo '$shipping'; ?></td>
</tr>
<tr>
<th>Total:</th>
<td>$<span id='total'>100</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--/Totals-->
Ignore the php code that is mostly sudo code that is to remind me of things.
JS and stripe checkout code:
<script type="text/javascript">
var totalvalue = document.getElementById("#total").textContent="newtext";
</script>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js"
class="stripe-button"
data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT"
data-amount= totalvalue
data-name="SeaitManageit"
data-description="Inovice"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency= invoicecurency>
</script>
</form>

Update MySQL data from HTML using Javascript

I'm a beginner in HTML, PHP, JavaScript and MySQL. I've written a HTML code to enter data into a simple table containing columns "Name" and "Email" in MySQL by employing a seperate PHP file. Then I tried fetching the table contents using PHP. But now I need a little help in updating the data. My code is as follows:
enter code here<!DOCTYPE html>
<html>
<script language="javascript" src="update.js"></script>
<?php
$a=mysqli_connect("localhost","root","","test4");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($a,"select * FROM test");
?>
<table border="1" cellspacing="1" cellpadding"1">
<tr>
<th>pkid</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
for ($i=0; $i<mysqli_num_rows($result); $i++)
{
$row = mysqli_fetch_array($result)
?>
<tr>
<td id="pkid"><?php echo $row['pkid'] ?></td>
<td id="name"><?php echo $row['name'] ?></td>
<td id="email"><?php echo $row['email'] ?></td>
<td><input type=submit onclick="myfunc()" value="View"/></td>
</tr>
<?php
}
?>
</table>
<form action="insert.php" method="post">
<table border="2">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>
<input type="submit" value="Add">
</tr>
</table>
</form>
</html>
<?php
mysqli_close($a);
?>
Here is the Code for Update Data to MYSQL :
Html File :
<title>Listing Details for Update</title>
<?php
include ('config.php');
$tbl_name="user"; // Table name
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<table width="400" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="4"><strong>List data from mysql </strong> </td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center"><strong>pkid</strong></td>
<td align="center"><strong>Name</strong></td>
<td align="center"><strong>Email-Id</strong></td>
<td align="center"><strong>Action</strong></td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><? echo $rows['pkid']; ?></td>
<td><? echo $rows['name']; ?></td>
<td><? echo $rows['email']; ?></td>
<td align="center">update</td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
mysql_close();
?>
Here you can find the way for Update Single Field, Multiple Field Etc.,
http://php.sysaxiom.com/update_data.php
http://php.sysaxiom.com/update_multiple_data.php
If you need to change the contents of the table to have different rows/row data, (and you want to do it live) you will need to use AJAX. jQuery has fairly straightforward ajax usage, so for actual implementation, I would look to that. You'll also need another PHP file that just returns the raw HTML required to fill in the table. Pseudocode (jquery) below:
$.post("url","dataToPost",function(data){$("#table id where I want to put new data).innerHTML=data});
Basically, the $.post() posts the dataToPost to the url and sets the innerHTML of whatever you select to the resultant data.

PHP - UPDATE a row in a dynamic HTML table

I have a dynamic table that I created in HTML:
<table id="rounded-corner" width="51%" border="1" align="center" cellpadding="2" cellspacing="0">
<tr>
<th width="19%">Job Type</th>
<th width="24%">Job Description</th>
<th width="19%">Type of Piping</th>
<th width="19%">Scheduled Start Time</th>
<th width="19%">Scheduled End Time</th>
</tr>
<?php do { ?>
<tr>
<td nowrap><?php echo $row_selectJobs['JobType']; ?></td>
<td><?php echo $row_selectJobs['JobDesc']; ?></td>
<td><?php echo $row_selectJobs['PipeType']; ?></td>
<td align="center"><?php echo substr($row_selectJobs['TimeStart'],0,-3); ?></td>
<td align="center"><?php echo substr($row_selectJobs['TimeEnd'],0,-3); ?></td>
</tr>
<?php } while ($row_selectJobs = mysql_fetch_assoc($selectJobs)); ?>
</table>
I was wondering if there is a way to add a button to each row so that you can modify the contents of that row. Remember, it's a dynamic table. I'm new to PHP and I really just stole this code from Dreamweaver and modified it for my own needs.
jQuery would be pretty simple to do this for. In your do loop just add another TD and use echo to output something like
<input type='button' class='changeRow' value='Edit' />
For each of the other TD's you will first want to output the values inside a span with a classname something like
<span class="labelValue">..What your PHP actually outputs..</span>
Then a hidden textbox, or something like that depending on how you want to actually do the editing. Each with a className relating to that row. so
<input type='text' class='editInput' value='' style='display: none;'/> etc...
Then using jQuery you can link it all together to make it editable like
$(document).ready(function(){
$('.changeRow').click(function(){
var tb = $(this).parents('tr').find('input.editInput');
var label = $(this).parents('tr').find('span.labelValue');
if($(this).val() == 'Edit'){
tb.val(label.html());
label.hide();
tb.show();
$(this).val('Save');
}
else{
label.html(tb.val());
tb.hide();
label.show();
$(this).val('Edit');
}
});
});
So when your HTML is output, it would look something like this
<td> <!-- The extra td for your edit button -->
<input type="button" class="changeRow" value="Edit">Some Job Type</span>
</td>
<td nowrap>
<span class="labelValue">Some Job Type</span>
<input type="text" class="editInput" value="" style="display: none;" />
</td>

Categories

Resources