Send php variable onclick through javascript code - javascript

I have a form table, in which when I click on Show button, then a popup window open. Till now everything is good.
But after click on Show button, I also want to send php variable in popup window and want to show values related to that variable. How it can be possible?
My table is below
<table align="center">
<?php
include("connection.php");
$query1=mysql_query("select * from career") or die(mysql_error());
while($row1=mysql_fetch_array($query1))
{
extract($row1);
?>
<tr>
<td>Designation</td>
<td><input type="text" name="des" value="<?php echo $designation; ?>"></td>
</td>
</tr>
<tr>
<td>Number of position</td>
<td><input type="text" name="des" value="<?php echo $no_of_position; ?>"></td>
</td>
</tr>
<tr>
<td>Experience</td>
<td><input type="text" name="des" value="<?php echo $experience; ?>"></td>
</td>
</tr>
<tr>
<td>Qualification</td>
<td><input type="text" name="des" value="<?php echo $qualification; ?>"></td>
</td>
<tr>
<td>Job profile</td>
<td><input type="text" name="des" value="<?php echo $job_profile; ?>"></td>
</tr>
<tr>
<td><?php echo"$id"; ?></td>
<td><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" id="id1">Show</button>
</td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
<?php } ?>
</table>
In above code when I click on Show Button, then popup window open, code is below:
<div id="id01" class="modal1">
<form class="modal1-content animate" action="xyz.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close modal1">×</span>
</div>
<div class="container">
<div>Content</div>
</div>
</form>
</div>
<script>
// Get the modal1
var modal1 = document.getElementById('id01');
// When the user clicks anywhere outside of the modal1, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
I want to send id variable, by which I can fetch values from database in popup window.
Thank you.

If I understand correctly you need an ajax call to a php page like this:
modalService.php
if(!isset($_GET['id']){
echo "no request";
exit;
}
$id = $_GET['id'];
//Do your query and echo the modal content
table
<td><?php echo $id; ?></td>
<td>
<button onclick="myFunction('<?php echo $id; ?>')" >Show</button>
</td>
JS
function myFunction(id){
var modal = document.getElementById("id01");
modal!==null && (modal.style.display="block");
var modalServiceUrl = "./modalService.php?id="+id;
//xhr to get modalService
}
EDIT: USING JQUERY
<button data-queryid="<?php echo $id; ?>" class="showModal">Show</button>
jQuery(document).ready(function($){
var modal = document.getElementById("id01");
$("button.showModal").on("click", function(){
modal.fadeIn();
var id = $(this).attr("data-queryid");
var modalServiceUrl = "./modalService.php?id="+id;
modal.load(modalServiceUrl);
});
});

Related

Passing parameters to [Javascript] functions

I have this php grid display from ms sql server.
<?php while ($record = sqlsrv_fetch_array($result1)) { ?>
<tr bgcolor="#db97c6">
<td nowrap="nowrap" align="center"><?php echo $record['ProductName']; ?></td>
<td nowrap="nowrap" align="center"><?php echo $record['BrandName']; ?></td>
<td nowrap="nowrap" align="center"><?php echo $record['ProductPrice']; ?></td>
<td nowrap="nowrap" align="center"><?php echo number_format($record['ProductQty'],0); ?></td>
<td nowrap="nowrap" align="center"><?php echo number_format($record['TotalValue'],2); ?></td>
<td nowrap="nowrap" align="center"><?php echo number_format($record['Discount'],2); ?></td>
<td nowrap="nowrap" align="center"><?php echo number_format($record['NetValue'],2); ?></td>
<td nowrap="nowrap" align="center"><?php echo number_format($record['QtySupplied'],0); ?></td>
<td align="center">
<img src="images/update.png" height="15" width="15">
</td>
</tr>
<?php
}
?>
I want to pass PurchaseOrderDetlID to a javascript function which will open a popup window to edit the selected record
this is the javascript function.
function openForm(ParamId) {
$MyPurchaseOrderDetlID = ParamId;
document.getElementById("popupForm").style.display="block";
}
this is the popup window
<div class="login-popup">
<div class="form-popup" id="popupForm">
<form action="ProfileSrc.php" class="form-container">
<input type="text" id="ParamId" name="ParamId" value = "<?php echo $MyPurchaseOrderDetlID;?>" style="width:60px" >
<br>
<label for="QtyIn"> <strong>Qty Supplied</strong></label>
<br><br>
<input type="number" id="QtyIn" name="QtyIn" value=0.00 style="width:60px; text-align: right" required>
<br><br>
<button type="submit" class="btn">Save</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
</div>
I am unable to pass PurchaseOrderDetlID to the popup (edit) window
You can pass it through the js function parameter. The same way you change the style of the form (display = block), you can set the value of the input:
function openForm(ParamId) {
document.getElementById("popupForm").style.display = "block";
document.getElementById("ParamId").value = ParamId;
}
Also no need to add the value in the form using PHP:
<input type="text" id="ParamId" name="ParamId" value="" style="width:60px">
This way every time openForm gets called/triggered it will set the value of the input with the desired value.

PHP submit button while loop

Hi guys im having a bit of a problem on how to get the value of the table row everytime i click an add button. what im trying to achieve is that to pass the value of the row to another php file for sql query. at the moment i have a table using a while loop and displaying a list of names from the database with a "ADD" button per row. When ever i click the add button regardless of which row i always get the value of the last row. can someone please point of on which part of the code i made a mistake?
here is my code
<form action="addFriend.php" method="post"> <table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="addedUser" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<button type="submit" name="row_<?php echo $i; ?>" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
</form>
Try Below code. As you want only $row["username"] and it is already stored in button value. Add form in while loop and give same name for button so that you can get username in addFriend.php
<table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="addedUser" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<form action="addFriend.php" method="post">
<button type="submit" name="row" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
</form>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
Now in addFriend.php you can get value by $_POST['row'];
Try Below script
<form action="addFriend.php" method="post"> <table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="**addedUser[]**" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<button type="submit" name="row_<?php echo $i; ?>" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
</form>
In addFriend.php
print form data using print_r($_REQUEST);

Uncaught TypeError When Passing Variable from FancyBox Into Parent

i have a problem when i passing variable value from FancyBox. First, i will tell the code :
Here is the code in the FancyBox :
JavaScript
function post_value(no){
parent.setSelectedUser(document.forms[no]["NO_INDUK"].value);
parent.$.fancybox.close();
}
html
while($baris = mysqli_fetch_assoc($hasil))
{
//1 item($baris);
$no++;
?>
<tr>
<form name="<?php echo $no ?>" method='post'>
<td><?php echo $no ?></td>
<td><input id="NO_INDUK" class="form-control" type="text" name="NO_INDUK" size="5" value="<?php echo $baris["NO_INDUK"] ?>" readonly/></td>
<td><?php echo $baris["NAMA_SISWA"] ?></td>
<td><?php echo $baris["NAMA_WALI"] ?></td>
<td><?php echo $baris["ALAMAT"] ?></td>
<td>
<a class="btn btn-success" href="#" onclick='post_value(<?php echo $no ?>)'> Pilih</a>
</td>
</form>
</tr>
<?php
} //untuk while
?>
Then this is source page view :
html source view
<tr>
<form name="2" method='post'>
<td>2</td>
<td><input id="NO_INDUK" class="form-control" type="text" name="NO_INDUK" size="5" value="112312" readonly/></td>
<td>Angga Lisdiyanto</td>
<td>asa</td>
<td>asdsad</td>
<td>
<a class="btn btn-success" href="#" onclick='post_value(2)'> Pilih</a>
</td>
</form>
</tr>
<tr>
<form name="3" method='post'>
<td>3</td>
<td><input id="NO_INDUK" class="form-control" type="text" name="NO_INDUK" size="5" value="2543" readonly/></td>
<td>Fina Arzika Humaidah</td>
<td>Nur Kojim</td>
<td>Campurejo, Panceng, Gresik</td>
<td>
<a class="btn btn-success" href="#" onclick='post_value(3)'> Pilih</a>
</td>
</form>
</tr>
Then when i click the button 'Pilih', the FancyBox won't close and the value is not passed. If the javascript code like this one, it can successfull passing a value :
function post_value(no){
parent.setSelectedUser(no); //just test, passing from no value
parent.$.fancybox.close();
}
After debugging it with Chrome, there are error in this line :
parent.setSelectedUser(document.forms[no]["NO_INDUK"].value);
And the error message is :
Uncaught TypeError: Cannot read property 'NO_INDUK' of undefined
That is, i hope there are any reply and i would be very happy if there are someone can help me out.
Thanks :)
SOLVED (with my blacked eyes!).
So as #JFK said, onclick='post_value(n)' is passing form index not the form's name. So i try it out with adding several char in the form's name like this :
<form name="form<?php echo $no ?>" method='post' action="">
Then in the button is like this one :
onclick='post_value("form<?php echo $no ?>")'
And on the JavaScript :
function post_value(NamaForm){
parent.setSelectedUser(document.forms[NamaForm]["NO_INDUK"].value);
parent.$.fancybox.close();
}
That is.
Sorry for Indonesian language may confuse you. :)

check-box check before delete

I have a check-box for each user and the value of the check-box is the user id
What is the best suitable JavaScript Which disables the delete a.button until have clicked the correct corresponding check-box
If button is disabled I would like to be able to use bootstraps disabled="disabled"
<div class="table-responsive" id="user">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td></td>
<td><b><a><?php echo $column_username;?></a></b></td>
<td><b><a><?php echo $column_status;?></a></b></td>
<td><b><a><?php echo $column_date_added;?></a></b></td>
<td class="text-right"><b><?php echo $column_action;?></b></td>
</tr>
</thead>
<tbody>
<?php if ($users) { ?>
<?php foreach ($users as $user) { ?>
<tr>
<td class="text-center">
<input type="checkbox" name="selected" value="<?php echo $user['user_id']; ?>" />
</td>
<td class="text-left"><?php echo $user['username']; ?></td>
<td class="text-left"><?php echo $user['status']; ?></td>
<td class="text-left"><?php echo $user['date_added']; ?></td>
<td class="text-right">
<i class="fa fa-pencil"></i> Edit User
<i class="fa fa-pencil"></i> Delete User
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
First, all the delete buttons should be disabled when you first load the HTML. You can add the disabled='disabled' attribute to each delete button in your PHP code.
Then in JavaScript you look for a change event on the checkbox:
$("input[type='checkbox']").change(function() {
var thisRow = $(this).parents("tr");
if(this.checked) {
thisRow.find("a.btn-danger").attr("disabled", false);
} else {
thisRow.find("a.btn-danger").attr("disabled", "disabled");
}
});

Javascript PHP/MySQL - Insert row value from database into textfield

Possibly very easy to do but I cannot work it out!
I'm trying to make a button which inserts row value pulled out from the database into a textfield.
<?php while ($row = mysql_fetch_array($query)) { ?> <tr>
<td><?php echo $row['mobile_number']; ?></td>
<td><input type="button" value="select" onclick="clickMe()" /></td>
</tr>
<?php } ?>
<input type="text" id="textfield" />
so when the button "select" is clicked, the textfield would get populated with the mobile number.
Many thanks for your help in advance.
Try this:
<script>
function clickMe(number) {
document.getElementById("textfield").value = number;
// or jQuery
$("#textfield").val(number);
}
</script>
<?php while ($row = mysql_fetch_array($query)) { ?> <tr>
<td><?php echo $row['mobile_number']; ?></td>
<td><input type="button" value="select" onclick="clickMe(<?php echo $row['mobile_number']; ?>)" /></td>
</tr>
<?php } ?>
<input type="text" id="textfield" />

Categories