Develop Reference

Multiple fields not validated inside modal that are dynamically generated

I'm validating fields inside modal popup,for single field it is working but if more than one field are appended at a time then validation does not takes place on those fields. Here we can see we add new field by adding add field button but those newly field did'nt get validated.
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
required($(this))
});
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <inputname=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
required($(this))
});
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" 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">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

You need call .each() on the dynamically added elements as well.
Dynamically added elements are not in DOM onload so ideally you need to do wrap .each() in a function when you add more fields to your modal just call that function again to check for empty inputs
To handle submit and store data we can .submit on your modal form. Get all the data via .serialize method and send all your form data to the backend file via ajax request.
Run Snippet below to see it working.
$(function() {
//Validate Data
var validate = $("#newModalForm").validate()
checkInput()
//Add dynamic inputs
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <input name=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
//Required Dynamic Input
checkInput()
});
//Validate all inputs
function checkInput() {
$('.form-control').each(function() {
required($(this))
});
}
//Required field message
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
//Submit form modal
$('#newModalForm').on('submit', function(e) {
//Prevent default submit behaviour
e.preventDefault()
//Store all the form modal form data
var data = $(this).serialize()
//Check all fieild have data
if (validate.errorList.length == 0) {
alert('All fields have value - Form will submit now')
//Request to backend
$.ajax({
url: 'your_url',
type: 'POST',
data: data,
success: function(response) {
//do something on success
},
error: function(xhr) {
//Handle errors
}
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" 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">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

Javascript - Multi-step form doesn't work, "next" button won't work

I have to make a multi-step form for a website.
I've used HTML, CSS and JS, but the JS seems to not work.
The "Next" button is not working at all.
On the website all the questions appear together, but I have to do something different.
The "next" button has to let other question appear when pushed, but is not like that.
Can you help me? Maybe I included the js in the worng way?
<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">Richiedi qui il tuo preventivo</h4>
</div>
<div class="modal-body">
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="description">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 form-box">
<form role="form" action="" method="post" class="registration-form">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Parte 1</h3>
<p>Racontati chi sei:</p>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-first-name">Nome</label>
<input type="text" name="form-first-name" placeholder="Nome" class="form-first-name form-control" id="form-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-last-name">Cognome</label>
<input type="text" name="form-last-name" placeholder="Cognome" class="form-last-name form-control" id="form-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-about-yourself">Nome della tua attività</label>
<textarea name="form-about-yourself" placeholder="Nome della tua attività"
class="form-about-yourself form-control" id="form-about-yourself"></textarea>
</div>
<button type="button" class="btn btn-next">Avanti</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Parte 2</h3>
<p>Le tue informazioni di contatto:</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email" class="form-email form-control" id="form-email">
</div>
<div class="form-group">
<label class="sr-only" for="form-number">Numero di telefono</label>
<input type="number" name="form-number" placeholder="Numero di telefono" class="form-password form-control" id="form-password">
</div>
<!--<div class="form-group">
<label class="sr-only" for="form-repeat-password">Repeat password</label>
<input type="password" name="form-repeat-password" placeholder="Repeat password..."
class="form-repeat-password form-control" id="form-repeat-password">
</div>-->
<button type="button" class="btn btn-previous">Indietro</button>
<button type="button" class="btn btn-next">Avanti</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Parte 3</h3>
<p>Dobbiamo avere ancora qualche informazione prima di calcolare il tuo preventivo:</p>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-number">Quante persone servi al giorno?</label>
<input type="text" name="form-facebook" placeholder="Numero" class="form-facebook form-control" id="form-question">
</div>
<div class="form-group">
<label class="sr-only" for="form-question">Compri bottiglie di plastica o di vetro?</label>
<input type="text" name="form-twitter" placeholder="Bottiglie di plastica o di vetro?" class="form-question form-control" id="form-question">
</div>
<button type="button" class="btn btn-previous">Indietro</button>
<button type="submit" class="btn">Calcola!</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</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>
+function($) {
'use strict';
var modals = $('.modal.multi-step');
modals.each(function(idx, modal) {
var $modal = $(modal);
var $bodies = $modal.find('div.modal-body');
var total_num_steps = $bodies.length;
var $progress = $modal.find('.m-progress');
var $progress_bar = $modal.find('.m-progress-bar');
var $progress_stats = $modal.find('.m-progress-stats');
var $progress_current = $modal.find('.m-progress-current');
var $progress_total = $modal.find('.m-progress-total');
var $progress_complete = $modal.find('.m-progress-complete');
var reset_on_close = $modal.attr('reset-on-close') === 'true';
function reset() {
$modal.find('.step').hide();
$modal.find('[data-step]').hide();
}
function completeSteps() {
$progress_stats.hide();
$progress_complete.show();
$modal.find('.progress-text').animate({
top: '-2em'
});
$modal.find('.complete-indicator').animate({
top: '-2em'
});
$progress_bar.addClass('completed');
}
function getPercentComplete(current_step, total_steps) {
return Math.min(current_step / total_steps * 100, 100) + '%';
}
function updateProgress(current, total) {
$progress_bar.animate({
width: getPercentComplete(current, total)
});
if (current - 1 >= total_num_steps) {
completeSteps();
} else {
$progress_current.text(current);
}
$progress.find('[data-progress]').each(function() {
var dp = $(this);
if (dp.data().progress <= current - 1) {
dp.addClass('completed');
} else {
dp.removeClass('completed');
}
});
}
function goToStep(step) {
reset();
var to_show = $modal.find('.step-' + step);
if (to_show.length === 0) {
// at the last step, nothing else to show
return;
}
to_show.show();
var current = parseInt(step, 10);
updateProgress(current, total_num_steps);
findFirstFocusableInput(to_show).focus();
}
function findFirstFocusableInput(parent) {
var candidates = [parent.find('input'), parent.find('select'),
parent.find('textarea'),parent.find('button')],
winner = parent;
$.each(candidates, function() {
if (this.length > 0) {
winner = this[0];
return false;
}
});
return $(winner);
}
function bindEventsToModal($modal) {
var data_steps = [];
$('[data-step]').each(function() {
var step = $(this).data().step;
if (step && $.inArray(step, data_steps) === -1) {
data_steps.push(step);
}
});
$.each(data_steps, function(i, v) {
$modal.on('next.m.' + v, {step: v}, function(e) {
goToStep(e.data.step);
});
});
}
function initialize() {
reset();
updateProgress(1, total_num_steps);
$modal.find('.step-1').show();
$progress_complete.hide();
$progress_total.text(total_num_steps);
bindEventsToModal($modal, total_num_steps);
$modal.data({
total_num_steps: $bodies.length,
});
if (reset_on_close){
//Bootstrap 2.3.2
$modal.on('hidden', function () {
reset();
$modal.find('.step-1').show();
})
//Bootstrap 3
$modal.on('hidden.bs.modal', function () {
reset();
$modal.find('.step-1').show();
})
}
}
initialize();
})
}(jQuery);

Laravel - Javascript | Form submits even after returning false

I am trying to verify user on submit and then continue the form submission if user is verified. I have written the verification logic and it works, but the form still submits if I return false when the verification fails.
Here is the form in question
<form method="POST" onsubmit="return verifyUser()" action="/pay_profile/{{$id->id}}" id="payment_form" name="payment_form">
<div class="col-md-12">
{{csrf_field()}}
<div class="form-group">
<label class="control-label col-md-3" style="text-align: left; margin-left: 10px; font-weight: bold;">Payment Amount:</label>
<div style="width: 50%" class="input-group col-md-5">
<input required name="amount" id="amount" type="text" class="form-control" autofocus="true" onfocus="rupee()" onkeyup="amount_in_words({{$id->loan->loan_amount - $id->loan->collected_amount}})" placeholder="Enter Amount..." >
<span class="input-group-btn">
<button id="pay" name="pay" data-target="#stack1" data-toggle="modal" disabled class="btn red" type="button">Pay</button>
</span>
</div>
<div class=" form-group col-md-12" style="color: green; font-weight: bold; font-style: italic; padding-left: 250px; margin-top: 5px;" id="container">
</div>
</div>
</div>
<div id="stack1" class="modal fade" tabindex="-1" data-width="400">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Enter Password</h4>
<p>
<input id="password" name="password" required type="password" class="col-md-12 form-control" autofocus="true"> </p>
<p>
<div style="color: red" id="error_pwd"></div>
</div>
</div>
</div>
<div class="modal-footer">
<a type="resets" style="margin-right: 30px;" data-dismiss="modal" class="btn dark btn-outline">Close</a>
<button type="submit" class="btn default btn-lg red">Ok</button>
</div>
</div>
</form>
and here is the onsubmit function
<script type="text/javascript">
function verifyUser()
{
function handleData( responseData ) {
console.log(responseData);
if( responseData== 'success')
{
document.getElementById("payment_form").submit();
console.log('success');
return true;
}
else
{
console.log('fail');
document.getElementById('error_pwd').innerHTML="<b>Wrong Password!</b>";
return false;
}}
var verifyPass=document.getElementById('password').value;
if(!verifyPass || verifyPass.trim().length == 0)
{
var verifyPass='fail';
}
$.ajax({
url: '/verify/'+verifyPass,
success: function ( data, status, XHR ) {
handleData(data);}
});
}
</script>

Just return false, you are submitting the form anyways (document.getElementById("payment_form").submit();). The problem comes because handleData() is executed asynchronously.
function verifyUser() {
function handleData(responseData) {
if (responseData == 'success') {
document.getElementById("payment_form").submit();
} else {
document.getElementById('error_pwd').innerHTML = "<b>Wrong Password!</b>";
}
}
var verifyPass = document.getElementById('password').value;
if (verifyPass && verifyPass.trim().length > 0) {
$.ajax({
url: '/verify/' + verifyPass,
success: function(data, status, XHR) {
handleData(data);
}
});
} else {
document.getElementById('error_pwd').innerHTML = "<b>No password provided!</b>";
}
//Return false to prevent form submition.
return false;
}

Fullcalendar: Bootstrap Modal Box not displaying elements correctly

A Full calendar Script in one of my project in which i added a Bootstrap modal. I am making it to popup on submit of a Button in my page.But the elements inside the modal are not visible clearly. where am i making the mistake?.
I do have a datepicker in my code, but it is also not displayed with proper 'prev','next' buttons. I have added a sample pic too.Kindly help me..
The following is my code:-
<div class="modal fade in" id="modal_calendar" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<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">Add Event </h4>
</div>
<div class="modal-body">
<form id="event_frm" class="form-horizontal">
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventsubject">calendar_eventsubject</label><div class="col-sm-8"><input type="text" name="calendar_eventsubject" value="" id="calendar_eventsubject" placeholder="calendar_eventsubject" data-validation-required-message="Enter the calendar_eventsubject" class="form-control" required="">
</div></div> </div>
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventbody">calendar_eventbody</label><div class="col-sm-8"><textarea name="calendar_eventbody" cols="40" rows="3" id="calendar_eventbody" placeholder="calendar_eventbody" data-validation-required-message="Enter the calendar_eventbody" class="form-control" required=""></textarea>
</div></div>
</div>
<div class="row">
<div class="form-group "><label class="control-label col-sm-3 " for="lbl_disp_code">common_date</label><div class="col-sm-8"><input type="text" name="lbl_disp_code" value="" id="lbl_disp_code" placeholder="common_date" data-validation-required-message="Enter the common_date" class="mts_date form-control" data-format="DD-MM-YYYY" data-single-date-picker="true" data-show-dropdowns="true" required="">
</div></div> <div class="control-label col-sm-3">
<label for="start_date">Start Date</label>
</div>
<div class="col-sm-7">
<input type="text" class="form-control hasDatepicker" id="event_start_date" placeholder="Start Date">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_event">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
customButtons: {
EventButton: {
text:'Add Event',
click:function(event, jsEvent, view){
$('#modal_calendar').modal('show');
}
}
},
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
});
$('#event_start_date').datepicker();
$('#save_event').click(function() {
var subject =$('#calendar_eventsubject').val();
var body =$('#calendar_eventbody').val();
var start_date = $('#event_start_date').val();
if($('#calendar_event_subject').val() =='') {
alert('subject required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#calendar_event_body').val() == '') {
alert('Body required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#event_start_date').val() == '') {
alert('Start Date required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
$.ajax({
cache: false,
type: "POST",
url:"calendar/save_event",
data : {'subject' : subject,'body' : body,'start_date' : start_date},
dataType: 'json',
success: function(result){
if (result!=null){
}
}
});
});
});
</script>
<style>
.datepicker
{
z-index:1151 !important;}
</style>
From this my output is like this:-

Viewing and Updating Data throught Modal Box In Laravel

guys. I need some help in viewing my data throught a modal box and replace it using update function.
Here's my button to view the modal box
{{ Form::open(array(
'route' => array('edit_spk', 'id'=> $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-success btn-line btn-rect" data-toggle="modal" data-target="#editSpk"><i class="icon-pencil icon-white"></i> Edit</button>
{{ Form::close() }}
Here's my view code for this modal box
<div class="col-lg-12">
{{ Form::open(array('url'=>'edit_spk','class'=>'form-horizontal', 'id'=>'block-validate')) }}
<div class="modal fade" id="editSpk" 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="H4"> Edit SPK</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-lg-2">Distribution Code</label>
<div class="col-lg-10">
<div class="input-group">
<input class="form-control" id="distribution_code" name ="distribution_code" type="text" data-mask="M99/99/99/9999"/>
<span class="input-group-addon">M99/99/99/9999</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Destination</label>
<div class="col-lg-9">
<input type="text" id="destination" name="destination" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">HLR</label>
<div class="col-lg-9">
<input type="text" id="hlr" name="hlr" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">First ICCID</label>
<div class="col-lg-9">
<input type="text" id="first_iccid" name="first_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Last ICCID</label>
<div class="col-lg-9">
<input type="text" id="last_iccid" name="last_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Quantity</label>
<div class="col-lg-9">
<input type="text" id="quantity" name="quantity" class="form-control" />
</div>
</div>
<div class="form-actions no-margin-bottom" style="text-align:center;">
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-line btn-rect" id="confirm">Update SKU</button>
</div> </div>
{{Form::close()}}
</div>
</div>
</div>
</div>
<!--END OF MODAL EDIT SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#editSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
var form = $(e.relatedTarget).closest('form');
$(this).get('.modal-body #distribution_code').data('form', form);
$(this).get('.modal-body #destination').data('form', form);
$(this).get('.modal-body #hlr').data('form', form);
$(this).get('.modal-body #first_iccid').data('form', form);
$(this).get('.modal-body #last_iccid').data('form', form);
$(this).get('.modal-body #quantity').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#editSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
Here's the route :
Route::put('spk/edit/{id}', array('as'=>'edit_spk','uses'=>'SpkController#edit'));
And here's the controller
public function edit($id)
{
$spk = Spk::find($id);
$spk->title = Input::get('distribution_code');
$spk->body = Input::get('destination');
$spk->done = Input::get('hlr');
$spk->done = Input::get('first_iccid');
$spk->done = Input::get('last_iccid');
$spk->done = Input::get('quantity');
$spk->save();
Session::flash('message', 'Successfully updated SPK !');
return Redirect::to('spk_view');
}
Can someone help me to get the data and view it into the element in modal box and make it updated using laravel ? thanks for your kindness :)

I encountered the same problem, here is how i solved it.
My modal is on the index.blade page, as follows:
<a data-toggle="modal" role="button" href="{{ URL::to('user/'.$user->id.'/edit') }}" class="btn btn-default"><i class="icon-pencil"></i></a>
Then the modal:
#if(!empty($user))
<!-- Form modal -->
<div id="edit_modal" class="modal fade" tabindex="-1" role="dialog">
<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"><i class="icon-paragraph-justify2"></i> Edit User</h4>
</div>
<!-- Form inside modal -->
{!! Form::model($user,array('route' => ['user.update', $user->id],'method'=>'PATCH')) !!}
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>First name</label>
<input type="text" class="form-control" placeholder="Chinedu"
name="name" value="{!! $user->name !!}">
</div>
</div>
</div>
{!! Form::close() !!}
#endif
#if(!empty($user))
<script>
$(function() {
$('#edit_modal').modal('show');
});
</script>
#endif
My controller methods are:
public function index()
{
//View all users
$users= User::orderBy('name', 'ASC')->paginate(10);
return view('user.index',compact('users'));
}
public function edit($id)
{
//
$users= User::orderBy('name', 'ASC')->paginate(10);
$user= User::findOrFail($id);
return view('user.index',compact('users','user'));
}
Hope this helps