Trouble submitting echo'd form from another page - php

Page 1: It displays the form fine
<div id = "consult-form">
<?php include('consultation.php') ?>
</div>
Page 2: consultation.php
<div id="acordeon">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseThree">
Consult Form
</a>
</h4>
</div>
<form action="postconsult.php" method="post" name ="consult-form" id="consult-form">
<div class = "col-md-8">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h5>Why did you sign up?</h5>
<textarea class="form-control" name = "q1" id="q1"></textarea>
</div>
<h5>What are your goals?</h5>
<textarea class="form-control" name = "q2" id="q2"> </textarea>
<div class="footer text-center">
<button type="submit" class="btn btn-fill btn-success"
>Submit</button>
<button id="reset" class="btn btn-fill btn-danger" type="reset">Reset</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
postconsult.php
$comment = 'pleasework';
$last_id = mysqli_insert_id($conn);
$pbr = $conn->prepare("UPDATE `memberInfo` mi
INNER JOIN `loginInfo` AS li
ON li.userID = mi.UserID
SET `q1` = '$comment'
WHERE mi.userID = '1026'");
//mysqli_real_escape_string($conn, $q1);
//$pbr->bind_param("s", $comment);
$pbr->execute();
What I originally was trying was calling
<button type="submit" class="btn btn-fill btn-success" onClick="submitconsult();">Submit</button>
but it gave me the same problem as above
function submitconsult() {
// Returns successful data submission message when the entered information is stored in database.
var data = $('#consult-form').serialize();
$.ajax({
type: "POST",
url: "postconsult.php",
data: data,
cache: false,
success: function(html) {
//alert(html);
//document.getElementById('regform').reset();
}
});
}
If I go directly to consultation.php and hit submit it updates the database fine, but it doesn't work when I echo it.
What am I doing wrong?
Thanks

There are problem with id consult-form, there are 2 of them: one into first file and second into consultation.php. Try to change first file to something like this:
<div id = "consult-form-wrapper">
<?php include('consultation.php') ?>
</div>

Related

saving data without reloading a page

I have a simple form in which a user can fill the form and can add multiple input fields as he/she wishes,
Here is HTML
<form id="paramsForms">
{{csrf_field()}}
<div class="modal-body">
<dvi class="container h-100">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-12 animated bounceInDown myForm" id="multiple-container">
<div class="card-header">
<h4>Bidders Information</h4>
</div>
<div class="card-body" id="add_info">
<div id="dynamic_container">
<small id="bidder">Bidder 1</small>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
</div>
<input type="text" placeholder="Bidders Name" name="bidders_name[]" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
</div>
<input type="text" placeholder="atribute name" name="params_name[]" id="field1" class="form-control"/>
<input type="number" placeholder="atribute value" name="params_value[]" id="field2" class="form-control"/>
<a class="btn btn-secondary btn-sm moreinput_field" id="add_more_input">
<i class="fa fa-plus-circle"></i>
</a>
</div>
</div>
</div>
<div class="card-footer" id="card-footer">
<a class="btn btn-success btn-sm" id="add_more"><i class="fa fa-plus-circle"></i> Add</a>
<!-- <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button> -->
</div>
</div>
</div>
</dvi>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
Here is js to save the form
$("#paramsForms").on('submit', function(e){
e.preventDefault();
$.ajax({
type:"POST",
url: "/parameters",
data: $("#paramsForms").serialize(),
success: function(response){
console.log(response)
alert('data saved');
},
error: function(error){
console.log(error)
alert('Data not saved');
}
})
})
Here is controller store function
public function store(Request $request)
{
$parameters = new Parameter;
$parameters->params_name = $request->input('params_name');
$parameters->params_value = $request->input('params_name');
$parameters->bidders_name = $request->input('bidders_name');
// dd($parameters);
$parameters->save();
}
The dd($parameters) in-store function gives the following.
So when I remove dd($parameters) and click submit button I get the following error on console (network).
message: "Argument 1 passed to Illuminate\Database\Grammar::parameterize() must be of the type array, string given, called in C:\xampp\htdocs\roayalad-blog\vendor\laravel\framework\src\Illuminate\Database\Query\Grammars\Grammar.php on line 869
What is wrong with my codes?
The issue is that you are sending params_name and params_name as an array but controller as handling as strings. Make this change in controller:
public function store(Request $request)
{
$parameters = new Parameter;
$record_count = count($request->input('params_name'));
for($i=0; $i<$record_count; $i++) {
$parameters->params_name = $request->input('params_name')[$i];
$parameters->params_value = $request->input('params_name')[$i];
$parameters->bidders_name = $request->input('bidders_name')[$i];
$parameters->save();
}
}
Above code will execute one query each record. You can also do bulk insertion. This is the link.
Try just
$request->params_name[$i]
Instead of
$request->input(“params_name”)[$i]

How to pass value from other table in form modal bootstrap

I created a modal form to update the record with storage field that has an option and have to be taken from another table but if storage data already exist in the database then show existing data.
I did this code but it cannot show existing data.
If I change the code for "storage" to : ABC then it can show existing data in database.
<?php
// to connect database
include '../connection/connect.php';
$query_storage = mysqli_query ($connect, "SELECT * from storage ORDER BY
storages ASC");
?>
//code for modal bootstrap
<div id="add_data_Modal" class="modal fade">
<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">Reagent Detail Information</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Storage</label>
<select class="form-control" name = "storage" id="storage" required >
<?php while($row = mysqli_fetch_assoc($query_storage)){?>
<option value="<?php echo $row['id_storage']; ?>">
<?php echo $row['storages']; ?></option>";
<?php }
?>
</select>
<br />
<label>Min Stock</label>
<input type="text" name="min_stock" id="min_stock" class="form-control" />
<br />
<input type="hidden" name="reagent_id" id="reagent_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function(){
var reagent_id = $(this).attr("id");
$.ajax({
url:"php/reagent_master/fetch.php",
method:"POST",
data:{reagent_id:reagent_id},
dataType:"json",
success:function(data){
$('#storage').val(data.storages);
$('#min_stock').val(data.min_stock);
$('#max_stock').val(data.max_stock);
$('#reagent_id').val(data.id_reagent_master);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
get data from database by stroge and then if record found with this storage show your error message. Storage already exists

PHP-jQuery-AJAX: How to POST values while using a form in Modal

I'm having an issue passing input and textarea values from a form in modal to AJAX so I can pass them to php.
The input field and textarea values are coming up blank when I submit the form in modal and jquery is not displaying any errors. It simply POST an empty (blank) string for each element.
for example, it shows something like this.
subject=&content=
in the dialog box, I load a name and an ID and both POST successfully but the input values which are not loaded with the form, are not being sent. I understand that the name and ID do POST because they are loaded on DOM along with the form but I do not know how to pass values that are not loaded along with the form in modal.
This is a sample of the form.
<?php while($row = mysqli_fetch_array($res)){
//row data for each post
$r_id = $row['r_id'];
$name = $row['name'];
?>
<div id="m_f_box" class="modal fade msg-box-custom" tabindex="-1" data-width="400">
<div class="modal-header-custom">
<h5 class="modal-title">Send to <span><?php echo $name ?></span></h5>
</div>
<form id="user_m_form" name="user_m_form" action="#" method="POST">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div id="s_row" class="col_full">
<h5>Asunto</h5>
<input id="m_subject" name="m_subject" class="required sm-form-control" type="text" maxlength="40"></input>
</div>
<div id="m_row" class="col_full">
<h5>Mensaje</h5>
<textarea id="m_content" name="m_content" class="required sm-form-control" type="text"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="send_m" name="user_m_form" class="button button-mini button-blue" value="<?php echo $r_id ?>">Send</button>
<button type="button" id="can_m" name="can_m" data-dismiss="modal" class="button button-mini button-blue">Cancel</button>
</div>
</form>
</div>
<?php } ?>
This is a sample of the jquery/ajax call.
<script type="text/javascript">
$(document).on('click', '#send_m', function(e){
e.preventDefault();
var r_id = $('#send_m').val();
var subject = $('#m_subject').val();
var content = $('#m_content').val();
//var form_data = $('#user_m_form').serialize(); test with serialized form data.
//alert(subject); test what is being sent as an alert
//console.log(subject); test what is being sent to view in console
$.ajax({
type:'POST',
url:'test_file.php',
data: { r_id : recipient_id,
subject : subject,
content : content,
},
cache: false,
success:function(res){
//do some stuff
}
});
return false;
});
</script>
Any ideas on why and/or how to POST these values?
Thanks in advance,
Note: Excuse the formatting for the HTML portion. It's hard to properly format everything using a phone.
Note: If you are trying to define multiple modal using while loop,
Your HTML
<div id="m_f_box" class="modal fade msg-box-custom" tabindex="-1" data-width="400">
<div class="modal-header-custom">
<h5 class="modal-title">Send to <span><?php echo $name ?></span></h5>
</div>
<form id="user_m_form" name="user_m_form" action="#" method="POST">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div id="s_row" class="col_full">
<h5>Asunto</h5>
<input id="m_subject_<?php echo $row['r_id']; ?>" name="m_subject" class="required sm-form-control" type="text" maxlength="40"></input>
</div>
<div id="m_row" class="col_full">
<h5>Mensaje</h5>
<textarea id="m_content_<?php echo $row['r_id']; ?>" name="m_content" class="required sm-form-control" type="text"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="<?php echo $row['r_id']; ?>" name="user_m_form" class="button button-mini button-blue send" value="<?php echo $r_id ?>">Send</button>
<button type="button" id="can_m" name="can_m" data-dismiss="modal" class="button button-mini button-blue">Cancel</button>
</div>
</form>
</div>
<?php } ?>
Your Script
<script type="text/javascript">
$(document).on('click', '.send', function(e){
var r_id = (this).attr('id');
var subject = $('#m_subject'+id).val();
var content = $('#m_content'+id).val();
//......
//.......
});
</script>
Note: You just need to understand the JQuery selector (ID and Class). See the difference between #ID and .Class selectors in Jquery.
You are generating multiple Modal with same ID and try to get those field values using IDs (selector). But the IDs for each modal input fields must be unique to get the value. and for on click operation the button must have unique ID or you just need to define class as above code has.
See how I have defined class for click button and getting ID for each modal. Modal must be unique in the sense of their field.
Example done POST request with Ajax call on ModalBox
My View page code:
<div class="panel panel-default">
<div class="panel-body">
<p class="text-danger">There are total <span class="text-bold">{{ sizeof($data) }}</span> Departments.</p>
<table class="table" id="department-data">
<tr>
<th>#</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
<th>Manage</th>
</tr>
<?php $order = 0; ?>
#foreach($data as $key)
<tr>
<td>{{ ++$order }}</td>
<td id="department_name">{{ $key->title }}</td>
<td>
<a href="#">
<button class="btn btn-default edit-department" data-toggle="modal" data-target="#updateDepartmentModel" id="{{ $key->id }}"><i class="fa fa-pencil"></i></button>
</a>
</td>
<td>
<button id="{{ $key->id }}" class="btn btn-danger delete-btn" data-toggle="modal" data-target="#delete-department"><i class="fa fa-trash"></i></button>
</td>
<td>
<a href='program/{{ $key->id }}' id="delete-id">
<button class="btn btn-primary"><i class="fa fa-cog"></i></button>
</a>
</td>
</tr>
#endforeach
</table>
</div>
</div>
Modals on the same page:
<!-- Add New Department Modal -->
<div class="modal fade" id="newDepartmentModel" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ url('department/create') }}" method="POST">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group">
<label for="title">Department Name:</label>
<input type="text" class="form-control" id="title" name="title">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<!-- ./Model -->
<!-- Update Department Modal -->
<div class="modal fade" id="updateDepartmentModel" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update a Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="old-title">Department Name:</label>
<input type="text" class="form-control" id="old-title" name="title">
</div>
</div>
<div class="modal-footer">
<button type="submit" id="edit-dept" class="btn btn-primary edit-dept">Edit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<!-- ./Model -->
Here is Script:
<script type="text/javascript">
var token = '{{ Session::token() }}';
var url = '{{ route('department/edit') }}';
var dept_id = '';
// Setup Ajax
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Update the department
$(document).on('click', '.edit-department', function () {
var department_id = $(this).attr('id');
console.log(department_id);
dept_id = department_id;
$.get('department/'+department_id, function (data) {
$('#old-title').val(data.title);
console.log(data);
});
});
// Handle Post Request (Edit Department)
$(document).ready(function () {
$('#edit-dept').click(function () {
$.ajax({
method: 'POST',
url: url,
data: { id: dept_id, title: $('#old-title').val(), _token: token},
dataType: 'JSON'
}).done(function (data) {
//console.log(data);
});
});
});
</script>
Routes is:
Route::post('department/edit', function (\Illuminate\Http\Request $request){
$id = $request->input('id');
$title = $request->input('title');
DB::table('departments')->where('id', $id)->update(array('title' => $title));
return redirect('department')->with('alert_info', 'Department was successful Update!');})->name('department/edit');
Put this line on page Head:
<!-- csrf for meta -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
And in Controller Create and Get routes:
Route::post('department/create', 'DepartmentController#store');
Route::get('department/{id}', 'DepartmentController#showById');
And these definitions:
public function store(StoreDepartmentPostRequest $request)
{
$department = new Department;
$department->title = $request->input('title');
$department->timestamps = time();
$department->save();
return redirect('department')->with('alert_success', 'Department was successful added!');
}
public function showById($id){
$data = Department::findOrFail($id);
return response()->json($data);
}

how to save previous page clikable url in database using php?

i have following div in project. after clicking on "request for demo" button , it will redirect to next window to registration form (link is mentioned in javascript function). i want to save relevant div id in database after clicking on button and save register.
following is my html and javascript
<div class="row">
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Supermarkets, Fruits & Vegetables</b></span>
<hr>
<p>Uninterrupted fast billing, inventory control, CRM & Loyalty programs makes your shoppers happier</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<!--<button type="button" onclick="openWin()" class="btn btn-default" id="demo-btn" data-toggle="modal" data-target="#demoModal">Request for Demo</button>-->
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Supermarkets, Fruits and Vegetables" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Grocery & Departmental Stores</b></span>
<hr>
<p>POS for grocery, departmental store, hypermarket and convenience store with GSmartPOS</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Grocery and Departmental Stores" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Pharmacy, Medical Shop POS</b></span>
<hr>
<p>Prefilled drug index, update stock position and bill from Day One. Manage batches and expiry with ease</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Pharmacy Medical Shop POS" >Request for Demo</button>
</div>
<br>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Apparel & Footwear</b></span>
<hr>
<p>POS Features like matrix-inventory, non-moving stock analysis, can help keep inventory latest and fashionable</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Apparel and Footwear" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Electrical & Electronics POS</b></span>
<hr>
<p>Perfect solution to manage serialized inventory for mobile, computer electrical and electronics shops</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Electrical and Electronics POS" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Fashion Jewellery Shop</b></span>
<hr>
<p>An integrated, modular & scalable POS for furniture, glass & crockeries, opticals, music, toys & baby shop retail</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Fashion Jewellery Shop" >Request for Demo</button>
</div>
</div>
following function is called on each div button,
<script>
function openWin() {
window.open("register.php");
}
</script>
after clicking on each div button following form will be open in new window,
<div class="register">
<div class="container">
<div class="row main">
<div class="main-register main-center">
<form class="" method="post" id="contact-form">
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-phone fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="contact_no" placeholder="Enter your contact number"/>
</div>
</div>
</div>
<input type="hidden" id="requestType">
<div class="form-group ">
<button class="btn btn-primary btn-lg btn-block register-button submit">Register</a>
</div>
</form>
<span class="success" style="display:none">Thank You for Register with us.</span>
</div>
</div>
</div>
</div>
form will be save using ajax and php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".modalBtn").click(function(){
var formName = $(this).attr("id");
$('#requestType').val(formName);
$('.success').hide();
$('.error').hide();
$('#contact-form').show();
$("#demoModal").modal();
});
$(".submit").click(function() {
var name = $("#name").val();
var requestType = $('#requestType').val();
var contact_no = $("#contact_no").val();
var email = $("#email").val();
//alert(requestType);
var dataString = 'name='+ name + '&contact_no=' + contact_no + '&email=' + email+ '&requestType=' + requestType;
if(name=='' || contact_no=='' || email=='')
{
$('.success').fadeOut(200).hide();
$('.error').show();
}
else
{
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
$('#contact-form').hide();
}
});
}
return false;
});
});
</script>
Php code to insert data is,
<?php
require('connection.php');
if($_POST) {
$id = $_POST['regid'];
$name = $_POST['name'];
$contact_no = $_POST['contact_no'];
$email = $_POST['email'];
$requestType = $_POST['requestType'];
if ($id == '') {
$sql = "INSERT INTO registration(name,contact_no,email,requestType) VALUES ".
"('".$name."', '".$contact_no."', '".$email."','".$requestType."')";
}
$query_result = mysql_query( $sql );
if(!$query_result ) {
echo 'Could not enter data: ' . mysql_error();
} else {
//header("Location: lead-view.php?s=Y");
$successMsg = 'Record instered successfully';
}
}
?>
i want save those div id as in url after submitting form of relevant dive click button. url will be save in "requestType" field in database. please help.
You can make use of sessionStorage for passing the requestType value.
https://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/
While calling openWin() pass the div value to it. For example:
<button type="button" onclick="openWin('abc')" class="modalBtn btn btn-default" id="Supermarkets, Fruits and Vegetables" >Request for Demo</button>
Then save this value in sessionStorage as follows:
function openWin(div_value) {
sessionStorage.setItem("registerType", div_value);
window.open("register.php");
}
You can retrieve this variable in register.php:
var registerType = sessionStorage.getItem("registerType");
Add this value to the hidden input control in register form and save it to database.
<input type="hidden" id="requestType">

Passing variables to a bootstrap modal form

I have a table that shows film reviews stored in a mysql database. Each of these reviews can be edited with a form that resides within a bootstrap modal. The problem I have is I can't understand how to give each form within the modal a unique ID. At the moment the modal only ever echoes varibales from the first row of reviews in the database. Many thanks.
The Jquery
<script type="text/javascript">
//Edit Review
$(document).ready(function(){
$(".editReview").click(function (e) {
$('#myModal').modal({
e.preventDefault();
var username = $(this).data("username");
var film_id = $(this).data('filmid');
var id = $(this).data('id');
var review = $(this).data('review');
$.post('ajax_editReview.php', {username: username, film_id: film_id, id: id, review: review},
function(data){
$('#myModal').modal('hide');
$("#message").html(data);
$("#review").val('');
$("#message").fadeIn(500);
$("#message").fadeOut(2500);
});
return false;
});
});
</script>
The Form
<div class="container">
<?php
$sql = "SELECT * FROM user_reviews WHERE username='$username' ORDER BY DATE desc";
$result = $db_conx->query($sql);
while($row = $result->fetch_assoc()) {
$id = $row['id'];
$film_id = $row['film_id'];
$review = $row['review'];
$movie = $tmdb->getMovie ($film_id);
echo '
<div class="row">
<div class="col-md-1">
<img id="image1" src="'. $tmdb->getImageURL('w150') . $movie->getPoster() .'" width="80" />
</div>
<div class="col-md-4">
<h3>
' . $movie->getTitle() .'
</h3>';
<p>
'.$review. '
</p>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-success btn-xs pull-right" data-toggle="modal" data-id="'.$id.'" data-username="'. $username.'" data-filmid="'.$film_id .'" data-target="#myModal">edit review</button>
<!-- Modal -->
<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"><h3> Edit your review for '. $movie->getTitle().'</h3></h4>
</div>
<div class="modal-body">
<form>
<div class="editReview">
<div class="form-group">
<label for="review">Review:</label>
<textarea class="form-control" rows="5" id="review" placeholder="'. $review.'" name="review"></textarea>
<input type="hidden" id="username" name="username" value="'.$username.'">
<input type="hidden" id="film_id" name="film_id" value="'. $film_id.'">
<input type="hidden" id="film_title" name="film_title" value="'.$movie->getTitle.'">
<input type="hidden" id="id" name="id" value="'.$id.'">
</div>
<button type="submit" id="FormSubmitReview" data-dismiss="modal" class="btn btn-danger btn-sm pull-right">Save Review</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
</div>
</div>';
}
?>
You need to have the modal only once on your page and it seems like you a creating a new one for every review, you don't need to do that, just output it once.
You then need to use the event show.bs.modal like so.
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var username = button.data("username");
var film_id = button.data('filmid');
var id = button.data('id');
var review = button.data('review');
....
});

Categories