I am trying to get an edit form to work with the loop in the php. I have a delete button and it works just fine. The edit form keeps presenting only the first row in the table. In firebug, it shows that all the other forms are there with the correct unique id for each but only the first form shows when edit is clicked on different rows. Can someone help me as to why?
<table id="table_id" class="table table-hover table-striped">
<thead>
<tr>
<th>ID #</th>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($search_sql)) {
?>
<tr>
<td id = "clicked"><?=$row['ID']?></td>
<td id = "clicked"><?=$row['Product']?></td>
<td id = "clicked"><?=$row['Quantity']?></td>
<td id = "clicked">$ <?=$row['Price']?></td>
<td>
<button class="btn btn-warning btn-sm" onclick="div_show2(this, '<?=$row['ID']?>'); return false;"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<!-- Modal for the Edit Data Form -->
<div id ="hidden-form2">
<div id = "popupContact">
<form action= "updateData.php" id = "editForm<?=$row['ID']?>" method="POST" name="editForm">
<input type="hidden" name="ID" value="<?=$row['ID']?>">
<div class="form-group">
<label for="product">Product</label>
<input type="text" class="form-control" id="product<?=$row['ID']?>" name="product" value="<?=$row['Product']?>">
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="text" class="form-control" id="quantity<?=$row['ID']?>" name="quantity" value="<?=$row['Quantity']?>">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price<?=$row['ID']?>" name="price" value="<?=$row['Price']?>">
</div>
<button type="button" class="btn btn-default" onclick="formHide2()">Close</button>
<button type="submit" id="save" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<!--End of Edit Form-->
</td>
<td>
<!--Delete Button Form-->
<form method="post" action="deleteData.php">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-trash"></span>Delete</button>
<input type="hidden" id="ID" name="ID" value="<?=$row['ID']?>">
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
//script for calling the edit forms as a modal popup
//Function To Display Popup for Edit form
function div_show2() {
document.getElementById("editForm").reset();
document.getElementById('hidden-form2').style.display = "block";
}
//Function to Hide Popup
function formHide2(){
document.getElementById('hidden-form2').style.display = "none";
}
Your show_div2 function is only showing one element.
document.getElementById('hidden-form2').style.display = "block";
That shows you why you are only seeing the first row.
Update your HTML and Javascript as follows
HTML
<div id="hidden-form2<?=$row['ID']?>">
Javascript
function div_show2(id) {
document.getElementById("editForm"+id).reset();
document.getElementById('hidden-form2'+id).style.display = "block";
}
To avoid having any problems like this in the future, always make sure that your id's are unique.
The first 4 td I see all use the same id name clicked. Try to fix that first and see what happens.
<td class="clicked" id="clickedID<?=$row['ID']?>"><?=$row['ID']?></td>
<td class="clicked" id="clickedProduct<?=$row['ID']?>"><?=$row['Product']?></td>
<td class="clicked" id="clickedQuantity<?=$row['ID']?>"><?=$row['Quantity']?></td>
<td class="clicked" id="clickedPrice<?=$row['ID']?>">$ <?=$row['Price']?></td>
Related
We have a table whose contents are fetched from database. Now, we want to fill a form by data of the relevant row of table that was clicked in Laravel.
This is how the table (left) and the form looks
Table code:
<table id="category_table" class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
#foreach($cat as $c)
<tr>
<?php $index=1;?>
<td>{{$c->cat_name}}</td>
<td width="5%"><button class="btn btn-info" onclick=fill(this)><i class="fa fa-arrow-right"></i></button>
</tr>
<?php $index=$index+1;?>
#endforeach
</tbody>
<tfoot>
</tfoot>
</table>
This is a part of form code:
<div class="card-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" value="">
</div>
<div class="form-group">
<label for="short_name">Short Name</label>
<input type="text" class="form-control" id="short_name" placeholder="Short Name">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" placeholder="Description"></textarea>
</div>
This is the javascript part that fetched the selected table row value through which we need to fetch other values from the database into form:
<script type="text/javascript">
function fill(e)
{
var $item = $(e).closest("tr").find("td:first").text();
document.getElementById("name").value= $item;
}
}
</script>
You can do something like this:
<button class="btn btn-info" data-model='{{$c->toJson()}}' onclick="fill()">
// then in js something like
function fill() {
let $item = $(this).attr("data-model");
console.log($item); // item should have all the data
}
Edit:
The questioner didn't make use of Laravel Eloquent Models. That's why the solution, in this case, deals with normal php objects like so:
data-model='{{ json_encode($c)}}'
I have a form that receives a 2D array from the controller and I have generated the table through thymeleaf.
<div class="col-4 offset-4">
<form id="sudokuBoard" method="post" enctype="application/x-www-form-urlencoded" class="form-group text-center">
<div class="container">
<table class="row-eq-height table-striped table-bordered text-center">
<!--/*#thymesVar id="board" type=""*/-->
<tr th:each="row: ${board}">
<td th:each="value: ${row}">
<div th:switch="${value}" class="col-xs-4">
<input name="cellValue" th:case="0" class="content form-control input" style="text-align:center" type="text" pattern="[0-9]*" maxlength="1" value="0" onkeypress="return isNumber(event)" oninput="moveMade()">
<input name="cellValue" th:case="*" class="content form-control input" style="text-align:center;background-color:lightgreen" type="text" th:value="${value}" readonly>
</div>
</td>
</tr>
</table>
<div class="gap-10"></div>
<button type="submit" class="btn btn-outline-primary btn-sm">Check Solution</button>
<button class="btn btn-outline-primary btn-sm" id="btnNewGame">New Game</button>
<button class="btn btn-outline-primary btn-sm" id="solveBoard"> Solve Puzzle</button>
</div>
</form>
</div>
All input fields have the same name and I want to dynamically assign the names through Thymeleaf so they become cellValueX in order to differentiate each cell in order to check the validity of moves entered by the user.
You use the attribute th:name. See this for a list of attributes you can use with Thymeleaf. I don't know specifically from your code what you want to use for X in cellValueX, but possibly something like this?
<tr th:each="row, y: ${board}">
<td th:each="value, x: ${row}">
<input th:name="|cellValue${x.index}_${y.index}|" ... />
</td>
</tr>
I'm trying to read value from table once modal show with form.
I'm not able to get value from table behind modal. is there any specific rules?
What am I doing wrong? Would like to read value of backed table fields and wants to use for calculation of the modal fields.
please check example here -
Sample Code
/*doesn't read value of rollno from table when modal input box on change*/
$('#frm_name').change(function() {
var $row = $(this).closest('tr');
var rowID = $row.attr('class').split('_')[1];
var rollno = $row.find('.td_rollno').text();
alert(rollno);
});
HTML
<table class="table table-responsive">
<thead>
<tr>
<th>NAME</th>
<th>ROLL NUMBER</th>
<th>CONTACT NO</th>
<th>ADDRESS</th>
<th>EDIT</th>
</tr>
</thead>
<tbody>
<tr class="trID_1">
<td class="td_name">Name Row1</td>
<td class="td_rollno">12345</td>
<td class="td_contact">Mickey Mouse</td>
<td class="td_address">123 Mouse Lane</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<tr class="trID_2">
<td class="td_name">Name Row2</td>
<td class="td_rollno">22222</td>
<td class="td_contact">Wiley Coyote</td>
<td class="td_address">RR3 Road Runner Lane</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<tr class="trID_3">
<td class="td_name">Name Row3</td>
<td class="td_rollno">33333</td>
<td class="td_contact">Pepe LePew</td>
<td class="td_address">88 Stink Street</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">EDIT RECORD</h4>
</div>
<div class="modal-body">
<form id="updateValues" action="update.php" method="POST" class="form">
<div class="form-group">
<label for="name">NAME</label>
<input type="text" class="form-control" name="name" id="frm_name">
</div>
<div class="form-group">
<label for="contact">CONTACT</label>
<input type="text" class="form-control" name="contact" id="frm_contact">
</div>
<div class="form-group">
<label for="address">ADDRESS</label>
<textarea class="form-control" rows="3" name="address" id="frm_address"></textarea>
</div>
<input type="hidden" name="frm_id">
<input type="submit" class="btn btn-primary btn-custom" value="Save changes">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="results"></div>
</div>
</div>
Your markup suggests trying to update a record with a modal form that posts to update.php. Separately, you have a jQuery function that looks like an attempt to update the table contents with the modal inputs.
If I understand you correctly, you will want to instead read the docs for your particular PHP framework for how to:
submit forms via AJAX
handle successful update with a script that will update the DOM accordingly
I have a jsp file that is not running my javascript functions. It worked when it was in an html file. Here is the html and javascript used to create this. The javascript switches the visibility of parts of a form when radio buttons are clicked.
<script language="Javascript">
//How many Questions
function CTDefault(){
document.getElementById("CTDefault").style.visibility="visible";
document.getElementById("CTManual").style.visibility="hidden";
document.getElementById("CTFile").style.visibility="hidden";
}
//Manual
function CTManual(){
document.getElementById("CTDefault").style.visibility="hidden";
document.getElementById("CTManual").style.visibility="visible";
document.getElementById("CTFile").style.visibility="hidden";
}
//Load Data from Form
function CTFile(){
document.getElementById("CTDefault").style.visibility="hidden";
document.getElementById("CTManual").style.visibility="hidden";
document.getElementById("CTFile").style.visibility="visible";
}
</script>
<!--Buttons-->
<div id="enterDataToggle" class="btn-group" data-toggle="buttons" >
<!--Default-->
<label class="btn btn-default active" id="checkin-label">
<input type="radio" onClick="CTDefault()" checked> Default
</label>
<!--Input Data Manually-->
<label class="btn btn-default active" id="checkin-label">
<input type="radio" checked onClick="CTManual()">
Input Data Manually
</label>
<!--Load Data from File-->
<label class="btn btn-default active" id="checkin-label"
<input type="radio" value="checking" onClick="CTFile()">
Load Data from File
</label>
</div>
<!-- CT Input Data Default-->
<div style= "visibility:hidden; position:absolute" id="CTDefault">
<h4>Default-If you don't have this data, we have data for you. You do not have to do anything else. If you have data please click input data manually or load data from file.</h4>
</div>
<!--CT Manually-->
<div style=" position:absolute" id="CTManual">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Mean</th>
<th>Standard Deviation</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<input name="CTMean" type="text" style="width:100%" required>
</th>
<th>
<input name="CTStd" type="text" style="width:100%" required>
</th>
</tr>
</tbody>
</table>
</div>
Any help is appreciated! :)
Maybe if you declare your script after the html tags:
<!--Buttons-->
<div id="enterDataToggle" class="btn-group" data-toggle="buttons" >
<!--Default-->
<label class="btn btn-default active" id="checkin-label">
<input type="radio" name="option" onClick="CTDefault()" checked> Default
</label>
<!--Input Data Manually-->
<label class="btn btn-default active" id="checkin-label">
<input type="radio" name="option" checked onClick="CTManual()">
Input Data Manually
</label>
<!--Load Data from File-->
<label class="btn btn-default active" id="checkin-label">
<input type="radio" name="option" value="checking" onClick="CTFile()">
Load Data from File
</label>
</div>
<!-- CT Input Data Default-->
<div style= "visibility:hidden; position:absolute" id="CTDefault">
<h4>Default-If you don't have this data, we have data for you. You do not have to do anything else. If you have data please click input data manually or load data from file.</h4>
</div>
<!-- CT Input Data Default-->
<div style= "visibility:hidden; position:absolute" id="CTFile">
<h4>CTFile.</h4>
</div>
<!--CT Manually-->
<div style=" position:absolute" id="CTManual">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Mean</th>
<th>Standard Deviation</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<input name="CTMean" type="text" style="width:100%" required>
</th>
<th>
<input name="CTStd" type="text" style="width:100%" required>
</th>
</tr>
</tbody>
</table>
</div>
<script language="Javascript">
//How many Questions
function CTDefault(){
document.getElementById("CTDefault").style.visibility="visible";
document.getElementById("CTManual").style.visibility="hidden";
document.getElementById("CTFile").style.visibility="hidden";
}
//Manual
function CTManual(){
document.getElementById("CTDefault").style.visibility="hidden";
document.getElementById("CTManual").style.visibility="visible";
document.getElementById("CTFile").style.visibility="hidden";
}
//Load Data from Form
function CTFile(){
document.getElementById("CTDefault").style.visibility="hidden";
document.getElementById("CTManual").style.visibility="hidden";
document.getElementById("CTFile").style.visibility="visible";
}
</script>
Your plunker: https://plnkr.co/edit/m0f9XPdA4t85mYJpizl4?p=preview
PS:
one label tag wasn't closed properly
element with id CTFile didn't exists in your example
you should name your radio buttons with a unique name
I have a form in Angular setup like the following.
Users can make changes and submit one at a time and it works as expected but I'd like to add a "Submit All" that would submit each item one at a time as though the user were pressing the submit button for each. Im a little stumped on the best way to do this. As of right now I cannot submit them as a batch due to API constraints. I would also like to keep jQuery out of the equation.
My first thought is to create a new object that contains the info for each item and then loop over it and submit that way. I am unsure how to set this up in my controller.
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th>Name</th>
<th></th>
<th>Age</th>
<th>Kids</th>
<th></th>
</thead>
<tbody>
<tr class="pending-item animate-repeat"
data-ng-repeat="user in Users"
data-ng-form="userForm"
role="form"
data-ng-submit="submitUser(user, userDetails)"
novalidate>
<td class="img-container">
<img data-ng-src="{{user['image']['url']}}"
alt="{{user['image']['alt'] || ' '}}"
class="img-responsive" >
</td>
<td class="col-xs-6">
<div class="user-info">
<p class="user-name">
{{user['name']}}
</p>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon">Age</span>
<input type="number" min="0"
name="age"
class="form-control age"
data-ng-init="userDetails.age = user['age']"
data-ng-model="userDetails.age"
required>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<input type="number" min="0" step="1"
name="kids"
class="form-control kids"
data-ng-disabled="user['kids'] === true"
data-ng-pattern="/^\d+$/"
data-ng-init="userDetails.kidsCount = user['kids']['quantity']"
data-ng-model="userDetails.kidsCount"
required>
<div class="input-group-addon"># of kids</div>
</div>
</td>
<td>
<div class="btn-group btn-col">
<button type="submit"
class="btn btn-success btn-sm"
data-ng-disabled="userForm.$invalid || userDetails.working"
data-ng-click="submitUser(user, userDetails)">
Submit
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<button ng-click="submitAllUsers()">Submit All Users</button>
</div>
Yes, create a object in your controller, say $scope.formData={}, and then bind it with your elements using ng-model or data-ng-model and then on button click pass this object in your controller and do the required stuff.