I am having trouble finding the closest selected option (text) near a submit button in multiple forms (with multiple submit buttons).
But I don't get anything how to fix this?
Code :
$(document).ready(function() {
$("form").submit(function() {
var x = $(this).closest('form').find('input[type=submit]');
var y = $(x).closest('select option:selected').text();
alert(y);
});
});
<form action="<?php echo site_url('manage/deleteVendor'); ?>" method="POST">
<table cellspacing='10'>
<tr>
<td>Delete Vendor</td>
</tr>
<tr>
<td>Vendor</td>
<td><select name="vendor" class="vendor">
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor->ID; ?>" ><?php echo $vendor->NAME; ?></option>
<?php } ?>
</select></td>
<td><input type="submit" name ="submit" value="Delete Vendor"/></td>
</tr>
</table>
</form>
<form action="<?php echo site_url('manage/deleteVendor'); ?>" method="POST">
<table cellspacing='10'>
<tr>
<td>Delete Vendor 2</td>
</tr>
<tr>
<td>Vendor</td>
<td><select name="vendor" class="vendor">
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor->ID; ?>" ><?php echo $vendor->NAME; ?></option>
<?php } ?>
</select>
</td>
<td><input type="submit" name ="submit" value="Delete Vendor"/></td>
</tr>
</table>
</form>
Find the closest select and find the selected option in it followed by .html() to get the text.
var y=$('selector').closest('select').find(':selected').html(); //find the text
var x=$('selector').closest('select').find(':selected').val(); //find the value
alert(y);
alert(x);
Edit: After viewing you HTML
var SelectedOptionText=$('.vendor').find(':selected').html();
alert(SelectedOptionText);
Edit: Based on your commment
$(document).ready(function() {
$("form").submit(function() {
var x =$(this).find('.vendor :selected').html();
alert(x);
});
});
Related
Table edit button in loop is hiding and showing the first row of table with each edit button click. I need to hide and show each row in loop with its own edit button.
<?php
$counter = 0;
foreach($db->getRecordSet($sqlRecord) as $row){ $counter += 1;
?>
<tr id="rowDetails">
<td> <?php echo($counter); ?> </td>
<td > <?php echo($row['item_code']); ?> </td>
<td > <?php echo($row['item_name']); ?> </td>
<td > <?php echo($row['description']); ?> </td>
<td > <?php echo($row['quantity']); ?> </td>
<td > <?php echo($row['p_cost']); ?> </td>
<td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>
</td>
</tr>
<tr id="editContent" style="display:none;">
<td class="w10" id="row1"><input type="text" class="form-control" name="item_code" id="item_code" value="<?php echo($row['item_code']); ?>" required="required" /></td>
</tr>
<?php
}
?>
</tr>
<?php } ?>
</table>
-------------------------
function hideRow(){
if(
document.getElementById('editContent').style.display=='none') {
document.getElementById('editContent').style.display='';
document.getElementById('rowDetails').style.display='none';
} else {
document.getElementById('editContent').style.display='none';
document.getElementById('rowDetails').style.display='';
}
try to use jquery bro.
change this line of code:
<td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>
to :
<td ><input type="button" name="edit" class="hide_button" /></td>
then change :
function hideRow(){
if(
document.getElementById('editContent').style.display=='none') {
document.getElementById('editContent').style.display='';
document.getElementById('rowDetails').style.display='none';
} else {
document.getElementById('editContent').style.display='none';
document.getElementById('rowDetails').style.display='';
}
To:
$( document ).ready(function() {
$(".hide_button").click(function(){
$(this).parents('tr').hide();
});
});
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);
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);
});
});
I want to sum table rows dynamically as the user inputs values. Since the number of rows can vary I want to use a php loop to accomplish this. I'm having problems getting the loop to work correctly. If, for example, there are two individual rows to sum only the bottom row will be summed.
<script type="text/javascript">
var sumScoreF = function(a) {
var rowtotal = 0;
n = new Array();
for (i = 1; i <= 3; i++) {
if (parseInt(document.getElementById(a + i).value) > 0) {
n[i] = parseInt(document.getElementById(a + i).value);
rowtotal += n[i];
}
}
document.getElementById(a + 'total').value = rowtotal;
};
</script>
The following is an example of a single row sum. The total column continues to be summed as values are entered. This is a nice effect but not necessary.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<tr>
<td>
<input name="p1g1" id="p1g1" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g2" id="p1g2" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g3" id="p1g3" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1gtotal" id="p1gtotal" type="text" value="" />
</td>
</tr>
</table>
Here is my attempt at looping additional rows using php and javascript. The first row will not sum but the second row will. I think the problem is with the javascript variable "m" in that it goes directly to the last row but I can't figure out how to fix it.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<script type="text/javascript">
var k = <?php echo json_encode($j); ?>;
var m = 'p'+k+'g';
</script>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>
Any help is greatly appreciated. Thanks.
Used PHP to echo the loop variable within the onChange javascript function call:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>
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" />