I have different products and it should have a view description that when clicked, a modal will popup and will show descriptions designated to it. But, I tried first getting the value of the hidden field to test it out. It shows the value of the hidden field when I clicked the first button but when I clicked the others, it didn't change. For example:
Button 1 (View Description):
Button 2 (View Description):
When I clicked button 1 it will show in the modal the value of the hidden field which is 1. But when I click the button 2 it will show in the modal 1 again. What should I do to get the value of the hidden field by clicking the button? Here is my code:
<div id="display">
<?php
include('database_connection.php');
$query = "SELECT * FROM tbl_product ORDER BY id DESC";
$statement = $connect->prepare($query);
if($statement->execute())
{
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<form method="post">
<div class="col-md-3" style="margin-top:12px;">
<div style="border:1px solid #333; background-color:#f1f1f1; border-radius:5px; padding:16px; height: 383px;" align="center">
<img src="images/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info">'.$row["name"].'</h4>
<h4 class="text-danger">$ '.$row["price"] .'</h4>
<input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
<input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
<input type="hidden" name="getprod" id="getprod" value="'.$row["id"].'"/>
<input type="button" name="description" data-toggle="modal" data-target="#myModal" style="margin-top:5px;" class="btn btn-success form-control description" value="View Description" />
</div>
</div>
</form>
';
}
echo $output;
}
?>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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">Modal title</h4>
</div>
<div class="modal-body">
<?php $prod = $_POST["getprod"]; ?>
<h1><?php echo $prod; ?></h1>
</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>
</div>
</div>
</div>
</body>
Related
enter image description here
The image is showing the data in the table.
What I want is when I click the view button, it will pop up the modal to display the row of data.
I want get the row of data and display in the pop up modal.
After I added this script, the modal will pop up and close directly.
The modal cannot show, the modal just display one second and close directly
script code
$(document).ready(function() {
$('.resetbtn').on('click', function() {
$('#resetmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#pass_id').val(data[0]);
});
});
button code
<button type="button" style="border:none; background-color: transparent;" data-toggle="modal" data-target="#resetmodal" class="resetbtn">view<i class="glyphicon glyphicon-asterisk" style="font-size:15px; color:blue;"></i></button> |
modal code
<div class="modal fade" id="resetmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="exampleModalLabel"><b>RESET PASSWORD</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="modal-body">
<div class="form-group">
<input name="pass_id" id="pass_id" type="text" class="form-control" value="<?php echo $db_pass_id; ?>"></input>
</div>
<div class="form-group">
<label><b>Password : </b></label> <span class="validation">*</span>
<input name="p_password3" id="p_password3" type="password" class="form-control input-box" onkeypress="return AvoidSpace(event)" onblur="this.value=removeSpaces(this.value);" minlength="6" required></input>
<input type="checkbox" onclick="myFunction3()"> Show Password</input>
</div>
<div class="form-group">
<label><b>Confirm Password : </b></label> <span class="validation">*</span>
<input name="p_password4" id="p_password4" type="password" class="form-control input-box" onkeypress="return AvoidSpace(event)" onblur="this.value=removeSpaces(this.value);" minlength="6" required></input>
<input type="checkbox" onclick="myFunction4()"> Show Password</input>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="reset" class="btn btn-primary">RESET</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
data-target="#resetmodal" does the show/hide for you!. But inside your script you have
$('#resetmodal').modal('show');
In other words, you are showing modal with that script and hiding with data-target="#resetmodal"
I work Laravel application we display data on datatable. When we update data using Bootstrap modal box using foreach then only fetch last data in the table.
Button where we link:
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
#endforeach
Modal box:
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
Just insert your modal inside #foreach directive (your loop) and that should work on your current code.
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
#endforeach
I have two ajax forms on one page, the first one is set to hide after it has been submitted and this works perfectly, my problem is when I submit the second one with the presence of the 1st one it wouldn`t work (when I click the submit nothing happens) although it works when I submit it after the first when has been hidden..
here are my two forms codes and the ajax handler
<!-- Form 1 -->
<div class="panel-heading " role="tab">
<input type="submit" class="deep_blue" data-toggle="modal" data-target="#post_form" value="Add Origin Text">
<div class="modal fade" id="post_form" tabindex="-1" role="dialog" aria-labelledby="postModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<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="postModalLabel">
<p style="color: #580024; margin-bottom: 0px;">
<b>Add Origin Text
</b>
</p>
</h4>
</div>
<div class="modal-body">
<form action="" method="post" class="profile_post registration-form">
<fieldset>
<div class="form-bottom">
<div class="form-group">
<p style="color: #580024;">Poet</p>
<textarea class="form-control btn-" name="addorigin_epoet"><?php echo $epoet_name ?></textarea><br>
<p style="color: #580024;">Poem</p>
<textarea class="form-control btn-" name="addorigin_epoem"><?php echo $epoem_title ?></textarea><br>
<p style="color: #580024;">Origin Title</p>
<textarea class="form-control btn-" placeholder="..." name="addorigin_otitle"></textarea><br>
<p style="color: #580024;">Origin Body</p>
<textarea class="form-control btn-" placeholder="..." name="addorigin_origin"></textarea><br>
<input type="hidden" name="user_from" value="<?php echo $userLoggedIn; ?>">
<input type="hidden" name="addorigin_ie" value="<?php echo $ie; ?>">
</fieldset>
</form>
</div>
<button type="button" class="btn btn-primary" name="post_button" id="submit_profile_post"><p">Add</p>
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>
<!-- Form 2 -->
<div class="panel-heading " role="tab" id="headingError" >
<input type="submit" class="deep_blue" data-toggle="modal" data-target="#post_form2" value="Submit Error">
<div class="modal fade" id="post_form2" tabindex="-1" role="dialog" aria-labelledby="postModalLabel2" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal2" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="postModalLabel2">
<p style="color: #580024; margin-bottom: 0px;">
<b>Submit Error
</b>
</p>
</h4>
</div>
<div class="modal-body">
<form id="error" action="" method="post" class="profile_post registration-form">
<fieldset>
<div class="form-bottom">
<div class="form-group">
<p style="color: #580024;">Poet</p>
<textarea class="form-control btn-" name="error1"><?php echo $epoet_name ?></textarea><br>
<p style="color: #580024;">Poem</p>
<textarea class="form-control btn-" name="error2"><?php echo $epoem_title ?></textarea><br>
<p style="color: #580024;">Error</p>
<textarea class="form-control btn-" placeholder="Error" name="error3"></textarea><br>
<input type="hidden" name="user_from" value="<?php echo $userLoggedIn; ?>">
<button type="button" class="btn btn-primary" name="post_button" id="submit_profile_post"><p style="color: #580024; margin-bottom: 0px;">Submit</p>
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close
</button> </fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- ajax_submit_profile_post -->
if(isset($_POST['addorigin_origin'])) {
$post = new Post($con, $_POST['user_from']);
$post->submitPostAddorigin($_POST['addorigin_ie'],$_POST['addorigin_epoet'],$_POST['addorigin_epoem'],$_POST['addorigin_otitle'],$_POST['addorigin_origin']);
}
if(isset($_POST['error3'])) {
$error = new Post($con, $_POST['user_from']);
$error->submitPostError($_POST['error1'],$_POST['error2'],$_POST['error3']);
}
$(document).ready(function() {
$('.button_holder').on('click', function() {
document.search_form.submit();
})
//Button for profile post
$('#submit_profile_post').click(function(){
$.ajax({
type: "POST",
url: "includes/handlers/ajax_submit_profile_post.php",
data: $('form.profile_post').serialize(),
success: function(msg) {
$("#post_form").modal('hide');
location.reload();
},
error: function() {
alert('Failure');
}
});
});
});
Tomorrow I am presenting my code in sprint. Everything was working fine until a few hours ago. I have a modal which pops up when a user clicks on Edit. It was giving the values according to id.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div>
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
I am very upset and confused and don't know what to do.
Any help would highly be appreciated
Edit:
After reading the comments; i have understood that only one id would be updated every time. How could i change the id dynamically and update data of that specific id and each time it should get only clicked id.
Controller Function to update:
public function updateCommunity($id, CommunityRequest $request) {
$updateCommunity = Community::findOrFail($id);
$updateCommunity->update($request->all());
return back();
}
View Buttons:
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal">Edit</button>
| Delete</td>
</tr>
#endforeach
Update
I understand you have all the communities listed in a list somewhere outside this modal, each entry has an edit and delete button. Upon clicking edit button user should be presented a modal with a single form to edit community he clicked that button for. All this using a single modal element.
The fact that you don't want to use more than one modal means you want to generate less DOM in order to provide faster loading times, if that's the case then edit your view buttons.
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal" data-community="{{ json_encode($communities) }}">Edit</button>
| Delete</td>
</tr>
#endforeach
Notice new data-community attribute in edit button.
Now change your modal to provide a template for community edit form instead of providing a form for each community.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit: <span></span></h4>
</div>
<div class="modal-body">
<form class="form-group" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
Now what you need to do it listen to edit community button click event (the one from view buttons), get data-community object from it, open a modal and fill with to fit edited community.
search for $('modal-title span') and .html() community name into it
search for $('#editCommunityForm') and change it's action to \update\{community_id}
search for $('button[form="editCommunityForm"]) and on click send form using ajax
There are many other ways to do this, better ways, it's just a simple example on how you can make it work.
Original answer
How come your submit button is outside of foreach but in an image it is displayed after each form? Also you are closing <div> tag in a loop that you opened before that loop.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div> // You are closing a tag opened before foreach loop
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
After you fix this you can simply edit form id by adding $editCommunity->id to it, like so:
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
Then you can edit button's form parameter to match your form:
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button>
You should end up with this:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button><br /><br />
#endforeach
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
I have a PHP form working with MySQL and passing data to another page, In the first page, a mysql query selects some records and then prints it on the page, one of this records is obviously the ID, which is also printed in the value of an hidden field, in order to use it in the next page
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
and the result is correct, I have 10 different ids when checking the page output code
<input type="hidden" name="cat_id" value="1" />
<input type="hidden" name="cat_id" value="2" />
<input type="hidden" name="cat_id" value="3" />
...
the problem comes when I submit the form (I have 1 form for each DB result, so if I have 10 entries I have also 10 hidden fields with 10 different values), even if I submit the 2nd or the 10th form, in the next page, the value of $_POST['cat_id'] is always 1, according to a general print of $_POST
Array
(
[cat_id] => 1
)
Does someone understands why?
EDIT: Adding the complete forms output script for clarification
<div class="container">
<div class="row">
<?php
if($c == 0){
?>
<h3>Il catalogo è momentaneamente vuoto.</h3>
<?php
} else {
while($row = $result->fetch_assoc()) {
?>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="thumbnail">
<div class="caption-img" style="background: url('imgs/thumb.jpg');"></div>
<a href="#" data-toggle="modal" data-target="#myModal">
<div class="caption-link">
<h3><?php echo $row['titolo']; ?></h3>
<span class="glyphicon glyphicon-book"></span>
</div>
</a>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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">Password</h4>
</div>
<div class="modal-body">
<p>Perfavore inserisci la password necessaria per visualizzare questo elemento</p>
<form action="show.php" method="post">
<input type="password" class="form-control" name="psw" />
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary" name="view">Prosegui</button>
</form>
</div>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>
Your form is broken, it cannot have its parent element closing before the form closes:
<div class="modal-body">
<p>Perfavore inserisci la password necessaria per visualizzare questo elemento</p>
<form action="show.php" method="post">
<input type="password" class="form-control" name="psw" />
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
</div> <!-- HERE IS YOUR ISSUE -->
<div class="modal-footer"> <!-- HERE IS YOUR ISSUE -->
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary" name="view">Prosegui</button>
</form>
</div>
It should look more like this:
<form action="show.php" method="post">
<div class="modal-body">
<p>Perfavore inserisci la password necessaria per visualizzare questo elemento</p>
<input type="password" class="form-control" name="psw" />
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary" name="view">Prosegui</button>
</div>
</form>