We Keep Coding

I want to show Modal popup and pass data to modal according to user-id in Laravel Blade

I want to show a popup modal with information for an individual user when someone clicks on view Details Button.
I want to pass the user data according to the user-id and show this in the modal popup. My data are in $user.
I want to do exactly done in the link below website http://ssipgujarat.in/sgh201920/problem_statement.php as you click on view details, it shows the modal for that particular problem statement. I hope that it make sense to you.
#extends('layouts.app')
#section('content')
<div class="container" id="blur-wrapper">
<div class="row">
#foreach($data as $user)
#if($user->user_type == 'user')
<div class="col-md-6 col-sm-12">
<div class="card-wrapper">
<div class="info-wrapper">
<h2>{{ $user->first_name }} {{ $user->last_name }}</h2>
<h6>{{ $user->email }}</h6>
<hr/>
<h6>Department: {{$user->StudentProfile->department}}</h6>
<h6>Sem: {{ $user->StudentProfile->sem }}</h6>
</div>
<div class="button-wrapper">
<form action="{{ $user->id }}">
{{-- <button class="btn btn-primary" id="view-detail">View Details</button>--}}
<a class="btn btn-info" id="view-detail" href="{{ $user->id }}">View Details</a>
</form>
<form method="POST" action="/admin/reject/{{ $user->id }}">
#csrf
<button class="btn btn-danger" type="submit">Delete Account</button>
</form>
</div>
</div>
<div class="popup">
<h2>{{ }}</h2>
</div>
</div>
#endif
#endforeach
</div>
</div>
#endsection

On your view details button assuming you are using bootstrap,your code should
<input type="button" class="button_edit" data-toggle="modal" data-target="#exampleModal{{$user->id}}" value="Edit"/>
on your routes
on your modal's code
#foreach($users as $user)
<div class="modal fade" id="exampleModal{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Edit Brand
</h5>`enter code here`
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-offset-2">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" value="{{$user->first_name}}">
</div>
<input type="submit" value="Edit" class="btn btn-success">
</div>
</div>
</div>
</div>
</div>
#endforeach

Did this with jQuery and Ajax and a data-entry attribute:
blade (CSS: bulma)
<!-- list of elements -->
<li class="dashboard">
<p class="img-hover-dashboard-info showQuickInfo" data-entry="{{ $highlight->id }}"></p>
</li>
<!-- MODAL -->
<div class="modal" id="QuickInfo">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Quick-Info</p>
<button class="delete closeQuickInfo" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- PUT INFORMATION HERE, for example: -->
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Rubrik</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" id="category" type="text" value="" readonly>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Kunde</label>
</div>
<div class="field-body">
<div class="field">
<input class="input" id="customer" type="text" value="" readonly>
</div>
</div>
</div>
<!-- END PUT INFORMATION HERE -->
</section>
<footer class="modal-card-foot">
<button class="button is-link closeQuickInfo">Schließen</button>
</footer>
</div>
</div>
jQuery
$(document).ready(function () {
$('.showQuickInfo').click(function () {
$('#QuickInfo').toggleClass('is-active'); // MODAL
var $entry = this.getAttribute('data-entry');
getEntryData($entry);
});
}
function getEntryData(entryId) {
$.ajax({
url: '/entries/getEntryDataForAjax/' + entryId,
type: 'get',
dataType: 'json',
success: function (response) {
if (response.length == 0) {
console.log( "Datensatz-ID nicht gefunden.");
} else {
// set values
$('#category').val( response[0].category );
$('#customer').val( response[0].customer );
// and so on
}
}
});
}
Controller
public function getEntryDataForAjax(int $id)
{
$entries = new Entry();
$entry = $entries->where('id', $id)->get();
echo json_encode($entry);
}

php form bootstrap modal after submit modal stay open

how to? php form bootstrap modal after submit modal stay open and echo $error
i want after click on submit in form modal, modal stay open
and i can see the $error from php change
<!-- signIn modal -->
<div class="portfolio-modal modal fade" id="signInModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading"><h3>התחבר</h3></div>
<div class="panel-body">
<form action="" method="POST" role="form" id="signInForm">
<div class="form-group">
<label for="InputEmail">הכנס אימייל</label>
<input type="email" name="email" class="form-control" id="InputEmail">
</div>
<div class="form-group">
<label for="InputPassword">הכנס סיסמא</label>
<input type="password" name="password" class="form-control" id="InputPassword">
</div>
<button type="submit" id="signInBtn" value="signin" name="submit1" class="btn btn-primary btn-block">כניסה</button>
<span><?= $error; ?></span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

how to get values from field which is out of form

I have a form
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal">Toggle Modal</a>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
</form:form>
when I click on the link in form which is
<a class="btn btn-block waves-button waves-effect" data-toggle="cat" href="#modal">Show cat</a>
I want to show the following
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
I want to get values selected from select and submit them when I submit the form using Javascript, I'm unable to place the select field in form for some reason.

You will need to use a javascript function. You can either have the cat div loaded from the beginning and hidden using javascript to show/hide it or you can call it via Ajax.
I included the div in your form and set the style to hidden with javascript either revealing it or hiding it on click. You can remove the if and just set to to display block when clicked if you don't want to hide it again. It's worth noting that this will not clear the values. If you want to clear values when closing it then you should call it with AJax and clear the div when closing.
<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Title</label>
<form:input path="title" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label">Company</label>
<form:input path="company" cssClass="form-control"/>
</div>
</div>
</div>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" >Location</label>
<form:input path="location" cssClass="form-control"/>
</div>
</div>
</div>
<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal" onClick="swap(); return false">Toggle</a>
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1" style="display: none;" >
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Seclect Categories</h2>
</div>
<div class="modal-inner">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="modal-footer">
<p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-10 col-md-push-1">
<button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
</div>
</div>
</div>
<script type="text/javascript">
var counter = 1
function swap() {
if (counter%2 == 0) {
document.getElementById('cat').style.display = 'none';
}
if (counter%2 != 0) {
document.getElementById('cat').style.display = 'block';
}
counter += 1;
}
</script>
</form:form>

passing more than one items variable into a Bootstrap modal with jquery

I am trying to figure out how to pass more than one variable into a bootstrap modal. I know how to pass one variable but I can not figure out how to send two variable. Can I add two variable to the same link below.
I would like to add one more Item Like this
<a data-id="<?=$sid?>" class="open-AddsigningId btn btn-primary btn-xs" href="#PaySigning">Pay Signing</a>
This is the jquery script
$(document).on("click", ".open-AddsigningId", function (e) {
e.preventDefault();
var _self = $(this);
var mysignId = _self.data('id');
$("#signId").val(mysignId);
$(_self.attr('href')).modal('show');
});
This is the modal I am passing the items to
<!--Pay Signing-->
<div class="modal fade" id="PaySigning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Pay Signing</h4>
</div>
<div class="modal-body">
<div class="row well">
<form action="formpross.php" id="closeform" method="post" class="form-horizontal" role="form">
<div class="row">
<div class="col-xs-3">
<label for="totalowed" class="control-label">Total Owed:</label>
<input name="totalowed" type="text"id="totalowed" class="form-control input-sm"/>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="paiddate" class="control-label">Paid Date:</label>
<input name="paiddate" type="text"id="datepicker1" class="form-control input-sm" data-toggle="tooltip" data-placement="right" title="Date the signing company paid the invoice" value="<?php echo $paiddate;?>">
</div>
<div class="col-xs-3">
<label for="totalpaid" class="control-label">Total Paid:</label>
<input name="totalpaid" type="text"id="totalpaid" class="form-control input-sm"/>
</div>
<div class="col-xs-3">
<label for="checkn" class="control-label">Check Number:</label>
<input name="checkn" type="text"id="checkn" class="form-control input-sm"data-toggle="tooltip" data-placement="right" title="Check Number of the check from the signing company" value="<?php echo $checkn;?>">
</div>
</div>
<div class="modal-footer">
<input name="id" id="signId" type="hidden" value=""/>
<input name="pid" type="hidden" value="<?php echo $pid;?>"/>
<input name="processtp" type="hidden" value="paysigning"/>
<button id="submit" class="btn btn-primary btn-block btn-xs center">Pay Signing</button>
</div>
</form>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

You can use any number of data-* attributes
<a data-id="<?=$sid?>" data-something="<?=$somevalue?>" class="open-AddsigningId btn btn-primary btn-xs" href="#PaySigning">Pay Signing</a>
then
var something= _self.data('something');
$("#something").val(something);

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>

As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});