I have multiple inputs and can I can add more by clicking on the button (+) to clone a div anywhere.
I need it so that when I save the form and the data is empty redirect back with all of the divs and inputs.
e.g: add five inputs, and when click submit and redirect I need show this inputs (five inputs).
This is my sample code:
<form class="m-form m-form--fit m-form--label-align-right" id="m_form_1" method="post">
<div class="m-portlet__body">
#if(is_array(old('name')) && count(old('name')) > 0)
<div id="countriesContainer">
#foreach(old('name') as $key => $item)
<div class="form-group m-form__group row countries">
<label class="col-form-label col-lg-2">{{ trans('general.language') }}</label>
<div class="col-2">
<select class="form-control m-bootstrap-select m_selectpicker" data-live-search="true" name="language[]">
<option value="">{{ trans('general.select_item') }}</option>
#foreach($language as $row)
<option value="{{ $row->locale }}" {{ old('language')[$item] == $row->locale ? 'selected' : '' }}>{{ $row->name }}</option>
#endforeach
</select>
</div>
<div class="col-lg-6">
<input type='text' class="form-control m-input lang" name="name" value="{{ old('name')[$item] }}" placeholder="{{ trans('countries.name') }}"/>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom add">
<i class="fa fa-plus"></i>
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom remove">
<i class="fa fa-minus"></i>
</a>
</div>
</div>
#endforeach
</div>
#else
<div id="countriesContainer">
<div class="form-group m-form__group row countries">
<label class="col-form-label col-lg-2">{{ trans('general.language') }}</label>
<div class="col-2">
<select class="form-control m-bootstrap-select m_selectpicker" data-live-search="true" name="language">
<option value="">{{ trans('general.select_item') }}</option>
#foreach($language as $row)
<option value="{{ $row->locale }}" {{ old('language') == $row->locale ? 'selected' : '' }}>{{ $row->name }}</option>
#endforeach
</select>
</div>
<div class="col-lg-6">
<input type='text' class="form-control m-input lang" name="name" placeholder="{{ trans('countries.name') }}"/>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom add">
<i class="fa fa-plus"></i>
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom remove">
<i class="fa fa-minus"></i>
</a>
</div>
</div>
</div>
#endif
</div>
</form>
and here is my controller code:
$language = $request->get('language');
$name = $request->get('name');
$status = (int)$request->get('status');
$validator = Validator::make($request->all(), [
"name.*" => "required",
]);
<input name="name" ... should be <input name="name[]" ... if multiple input fields exists with same name it should be an array.
for receiving old value you need loop index . not the $item
so ith should be
<input name="name[]" value="{{ old('name')[$loop->index] }}" ...
Related
I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
when "golongan" is selected then the value of "gaji pokok" automatically appears.
when "asisten ahli" is selected then the value of "tunjangan fungsional" automatically appears.
when "pembantu ketua | asisten ahli" is selected then the value of "tunjangan struktural" automatically appears.
<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/gaji/insert" method="POST" enctype="multipart/form-data">
#csrf
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<select name="nama" type="text" class="form-control select2 #error('nama') is-invalid #enderror" value="{{ old('nama') }}">
<option>-- Nama Karyawan --</option>
#foreach ($karyawan as $data)
<option value="{{ $data->nama }}">{{ $data->nama }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('nama')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="gol" type="text" class="form-control select2 #error('gol') is-invalid #enderror" onchange="getddl()" value="{{ old('gol') }}">
<option>-- Golongan dan M K G --</option>
#foreach ($golongan as $data)
<option value="{{ $data->gol }} | {{ $data->mkg }}">{{ $data->gol }} | {{ $data->mkg }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_gol" type="text" placeholder="Gaji Pokok" class="form-control #error('tunjangan_gol') is-invalid #enderror" value="{{ old('tunjangan_gol') }}" id="gol">
<div class="invalid-feedback">
#error('tunjangan_gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_fungsi" type="text" class="form-control select2 #error('jbt_fungsi') is-invalid #enderror" value="{{ old('jbt_fungsi') }}">
<option>-- Jabatan Fungsional --</option>
#foreach ($fungsi as $data)
<option value="{{ $data->jbt_fungsi }}">{{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_fungsi" type="text" placeholder="Tunjangan Fungsional" class="form-control #error('tunjangan_fungsi') is-invalid #enderror" value="{{ old('tunjangan_fungsi') }}">
<div class="invalid-feedback">
#error('tunjangan_fungsi')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_struktur" type="text" class="form-control select2 #error('jbt_struktur') is-invalid #enderror" value="{{ old('jbt_struktur') }}">
<option>-- Jabatan Struktural & Fungsional --</option>
#foreach ($struktur as $data)
<option value="{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('jbt_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_struktur" type="text" placeholder="Tunjangan Struktural" class="form-control #error('tunjangan_struktur') is-invalid #enderror" value="{{ old('tunjangan_struktur') }}">
<div class="invalid-feedback">
#error('tunjangan_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="total_gaji" type="text" placeholder="Total Gaji" class="form-control #error('total_gaji') is-invalid #enderror" value="{{ old('total_gaji') }}">
<div class="invalid-feedback">
#error('total_gaji')
{{ $message }}
#enderror
</div>
</div>
</div>
</div>
</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</button>
</div>
</form>
</div>
</div>
</div>
how to package it with Javascript onChange in laravel ?
Sorry, I couldn't understand your language well, but you can do something like this with jquery
<div class="form-group mb-3">
<select id="country-dropdown" class="form-control">
<option value="">-- Select Country --</option>
#foreach ($countries as $data)
<option value="{{$data->id}}">
{{$data->name}}
</option>
#endforeach
</select>
</div>
<div class="form-group mb-3">
<select id="state-dropdown" class="form-control">
</select>
</div>
<div class="form-group">
<select id="city-dropdown" class="form-control">
</select>
</div>
you can leave the dependent dropdown empty, then get those depentdent dropdown through ajax like these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
/*------------------------------------------
--------------------------------------------
Country Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#country-dropdown').on('change', function () {
var idCountry = this.value;
$("#state-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-states')}}",
type: "POST",
data: {
country_id: idCountry,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (result) {
$('#state-dropdown').html('<option value="">-- Select State --</option>');
$.each(result.states, function (key, value) {
$("#state-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
$('#city-dropdown').html('<option value="">-- Select City --</option>');
}
});
});
/*------------------------------------------
--------------------------------------------
State Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#state-dropdown').on('change', function () {
var idState = this.value;
$("#city-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-cities')}}",
type: "POST",
data: {
state_id: idState,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (res) {
$('#city-dropdown').html('<option value="">-- Select City --</option>');
$.each(res.cities, function (key, value) {
$("#city-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
}
});
});
});
</script>
and declare the routes that you will call in url in ajax
Route::post('etch-states', [DropdownController::class,
'fetchState']);
Route::post('fetch-cities', [DropdownController::class, 'fetchCity']);
In the controller do something like this:
public function fetchState(Request $request)
{
$data['states'] = State::where("country_id", $request->country_id)
->get(["name", "id"]);
return response()->json($data);
}
/**
* Write code on Method
*
* #return response()
*/
public function fetchCity(Request $request)
{
$data['cities'] = City::where("state_id", $request->state_id)
->get(["name", "id"]);
return response()->json($data);
}
I want to auto submit my form when value is inserted in the "Thumb_Print_Code" Field. below is my form. I want to do this without clicking on save nutton
Im working on Php Laravel Framework.
<form method="POST" action="{{ route('added') }}" id="myform">
#csrf
<div class="form-group row">
<label for="Thumb_Print_Code" class="col-md-4 col-form-label text-md-right">{{ __('Thumb Print Code') }}</label>
<div class="col-md-6">
<input id="Thumb_Print_Code" type="int" class="form-control #error('Thumb_Print_Code') is-invalid #enderror" name="Thumb_Print_Code" value="{{ old('Thumb_Print_Code') }}" required autocomplete="Thumb_Print_Code">
#error('Thumb_Print_Code')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Save Attendance ') }}
</button>
</div>
</div>
<br>
</div>
</form>
Please let me know how can I achieve my end goals ?
I want to show reply forms in my comment section based on comment reply button that has been clicked but currently it shows forms of all comments instead of specific comment. The question is
How do I get closest form in order to just show one form at the time?
Code
// this button exist in all comments with same class
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
//reply form DIV
<div class="blog-form mt-6 replyComment" style="display:none">// form here</div>
// New comment form DIV
<div class="blog-form mt-6 originalComment"> //form here </div>
$('.reply').click(function (e) {
e.preventDefault();
$('.replyComment').show();
$('.originalComment').hide();
});
Update
Full commenting code
<div class="blog-comments mt-4">
#include('errors.errors')
#if(isset($post))
#forelse($post->comments as $comment)
<div class="comments-1 w-100">
<div class="comments-photo">
#if(!empty($comment->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $comment->user->avatar }}" alt="{{$comment->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$comment->user->name}}">
#endif
</div>
<div class="comments-info">
<h6> {{$comment->user->name}} <span>{{$comment->created_at->format('M d, Y')}}</span></h6>
<div class="port-post-social float-right">
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
</div>
<p class="mt-1">{!! $comment->comment !!}</p>
</div>
</div>
<div class="blog-form mt-6 replyComment" style="display:none">
<h4 class="mb-3">Post a Reply</h4>
<form method="post" action="{{ route('reply.add') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
<input type="hidden" name="comment_id" value="{{ $comment->id }}" />
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
#forelse($comment->replies as $reply)
<div class="comments-1 comments-2 w-100">
<div class="comments-photo">
#if(!empty($reply->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply->user->avatar }}" alt="{{$reply->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply->user->name}}">
#endif
</div>
<div class="comments-info p-3 bg-light">
<h6> {{$reply->user->name}} <span>{{$reply->created_at->format('M d, Y')}}</span></h6>
<div class="port-post-social float-right">
<button type="button" class="btn btn-sm btn-secondary text-light reply">Reply</button>
</div>
<p class="mt-1">{!! $reply->comment !!}</p>
</div>
</div>
<div class="blog-form mt-6 replyComment" style="display:none">
<h4 class="mb-3">Post a Reply</h4>
<form method="post" action="{{ route('reply.add') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
<input type="hidden" name="comment_id" value="{{ $reply->id }}" />
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
#forelse($reply->replies as $reply2)
<div class="comments-1 comments-2 ml-5 w-100">
<div class="comments-photo">
#if(!empty($reply->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply2->user->avatar }}" alt="{{$reply2->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply2->user->name}}">
#endif
</div>
<div class="comments-info bg-light p-3">
<h6> {{$reply2->user->name}} <span>{{$reply2->created_at->format('M d, Y')}}</span></h6>
<p class="mt-1">{!! $reply2->comment !!}</p>
</div>
</div>
#empty
#endforelse
#empty
#endforelse
#empty
<h3>Be the first to leave a comment.</h3>
#endforelse
#else
{{-- reserved for products reviews --}}
#endif
</div>
<div class="blog-form mt-6 originalComment">
<h4 class="mb-3">Post a Comment</h4>
<form method="post" action="{{ route('comments.store') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
Minimizing the forms above for better understanding
Structure
<comments>
-reply button
<reply form></reply form>
<comment reply>
-reply button
<reply form></reply form>
<comment reply replies>
<comment reply replies>
</comment reply>
</comments>
<comment form>
</comment form>
It seems that the <div> that you want to show is the element that follows the button's comments-1 ancestor.
Given this, I would use .closest('.comments-1') to select the ancestor, and .next('.replyComment') to select the element that follows.
$('.reply').click(function (e) {
e.preventDefault();
$(".replyComment, .originalComment").hide();
$(this).closest('.comments-1').next('.replyComment').show();
});
Depending on whether there is a form above the button (then it won't work):
function opens(arg) {
var closest = document.getElementsByClassName("blog-form");
closest[arg].style.display = "block";
for(var i = 1; i < closest.length; i++) {
if(i != arg) {
closest[i].style.display = "none";
}
}
}
<button onclick = "opens(0)">Reply</button>
<form class = "blog-form" style = "display: none">
<input>
</form>
<form class = "blog-form" style = "display: none">
<input>
</form>
<button onclick = "opens(1)">Another Reply</button>
In order for this to work, I'm manipulating the CSS display property.
I added javascript, jquery at the bottom of my blade page to allow me to add a new line containing all the table with id="dynamic_field".(but without the button name "add" after the second, it should be a cross for deleting)
And my question is : how I can put all this these lines in $('#dynamic_field').append(....here....) because I try copy paste and there is everytime syntax error..
here the blade file:
#extends ('layout.layout')
#section('containerContent')
<div class="col-md-12">
<form method="POST" enctype="multipart/form-data" id="add_tour">
{{ csrf_field() }}
#if (count($errors))
<div class="form-group">
<div class="alert alert-danger">
<ul>
#foreach($errors->all() as $error)
<li> {{ $error }}</li>
#endforeach
</ul>
</div>
</div>
#endif
<div class="content">
<h1>Create a new Tour:</h1>
<div class="form-group">
<div class="col-lg-6">
<input class="form-control" type="text" name="tourLabel" placeholder="Tour label">
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<textarea class="form-control" placeholder="Resume of tour" name="tourResume" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<select id='nameArtist' name='nameArtist'>
<option value=''>Select Music Artist or Band</option>
#foreach ($artists as $artist)
<option value="{{ $artist->id }}">{{ $artist->artist_name }}</option>
#endforeach
</select>
</div>
</div>
<h2 align="center">Add Concert to your Tour:</h2>
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><select id='concertRoom' name='concertRoom'>
<option>Select your concert room</option>
#foreach ($roomsconcert as $room)
<option value="{{ $room->id }}">{{ $room->name }}</option>
#endforeach
</select>
</td>
<td><input class="form-control" type="date" name="dateConcert"{{ Form::datetime('') }}></td>
<td><input class="form-control" type="text" name="concertDuration" placeholder="Duration of the event (min)"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More concert</button></td>
</tr>
</table>
</div>
<a class="btn btn-primary" href="{{route('show-tour') }}" > Back </a>
<button class="btn btn-success" type="submit"> {{ 'Submit' }}</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i = 1;
$('#add').click(function() {
i++;
var htmlContent = $('#dynamic_field').html();
/*
$('#dynamic_field').append(htmlContent);
*/
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
</script>
#endsection
thanks
Try wrapping your javascript with #verbatim Directive
#verbatim
<script type="text/javascript">
......
</script>
#endverbatim
in there i want to add shopping cart in my project. i have try make it but its still want work.
this my controller :
function postCreate(){
echo '<pre>';
print_r(Request::all());
exit;
$data['list'] = DB::table('package')
->join("cms_car","cms_car.id","=","package.id_cms_car")
->join("zone","zone.id","=","package.id_zone")
->select("package.*","cms_car.car as name_car","cms_car.photo as car_photo");
return view('detail',$data);
}
and here my view for listing :
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-petrol.png') }}" style="max-width:15px;">
#else
#endif
{{$row->driver}}</p>
<p>
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-driver.png') }}"style="max-width:15px;">
#else
#endif
{{$row->fuel}}</p>
<h6 class="post-price">price :</h6>
<p>Rp. {{$row->price}}</p>
</div>
</div>
<hr>
<div class="col-md-6">
Unit Quality :<br><br>
<div class="input-group" style="width: 150px;">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number btn-minus" data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quantity" class="form-control input-number" value="1" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number btn-plus" data-type="plus">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-6">
<h3 style="margin-top:40px" id="price{{$row->id}}">Rp. {{number_format($row->price)}}</h3>
</div>
</div>
</div>
#endforeach
in there i want to make cart it only add when i change the unit quantity
form input name : quantity
have someone tell me what improvements do i have to make to the code to achieve my goal?
I recommend using this package Crinsane/LaravelShoppingcart
There are somany shopping cart module available on github. They are very easy to integrate, try one of them:
LaravelShoppingcart
laravel-cart