Created
October 24, 2019 08:35
-
-
Save adeguntoro/ac65c4d1fc2c9408e57d639522b09181 to your computer and use it in GitHub Desktop.
dynamic vs static form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dynamic form controller : | |
public function store(Request $request) { | |
dd($request->post()); | |
} | |
##################### | |
static form controller : | |
public function store(Request $request) { | |
dd($request->post()); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>{{ config('app.name') }}</title> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> | |
<div class="container"> | |
<a class="navbar-brand" href="{{ url('/') }}"> | |
{{ config('app.name') }} | |
</a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
<!-- Left Side Of Navbar --> | |
<ul class="navbar-nav mr-auto"> | |
</ul> | |
</div> | |
</div> | |
</nav> | |
<div class="container"> | |
<div class="row justify-content-center"> | |
<div class="col-md-12"> | |
<div class="card"> | |
<div class="card-header">Recipe</div> | |
<div class="card-body"> | |
<form action="{{ route('resep.store')}}" method="post"> | |
@csrf | |
<table class="table table-bordered" id="ingredients"> | |
<thead> | |
<tr> | |
<th>Total</th> | |
<th>ingredients</th> | |
<th>Option</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
<button type="submit" class="btn btn-primary">Submit</button> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> | |
<script> | |
$(document).ready(function(){ | |
var count = 1; | |
dynamic_field(count); | |
function dynamic_field(number) { | |
html = '<tr>'; | |
html += '<td><input type="text" name="total[]" class="form-control" /></td>'; | |
html += '<td><input type="text" name="ingredients[]" class="form-control" /></td>'; | |
if(number > 1) { | |
html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>'; | |
$('tbody').append(html); | |
} else { | |
html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>'; | |
$('tbody').html(html); | |
} | |
} | |
$(document).on('click', '#add', function(){ | |
count++; | |
dynamic_field(count); | |
}); | |
$(document).on('click', '.remove', function(){ | |
count--; | |
$(this).closest("tr").remove(); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@extends('layouts.app') | |
@section('content') | |
<div class="container"> | |
<div class="row justify-content-center"> | |
<div class="col-md-12"> | |
<div class="card"> | |
<div class="card-header">Dashboard</div> | |
<div class="card-body"> | |
<form action="{{ route('produk.store')}}" method="POST"> | |
@csrf | |
<div class="form-group"> | |
<label for="name">Name</label> | |
<input type="text" name="name" class="form-control"> | |
</div> | |
<div class="form-group"> | |
<label for="price">Price*</label> | |
<input type="number" name="price" class="form-control" step="0.01"> | |
</div> | |
<div class="form-group"> | |
<label for="properties">Properties</label> | |
@for ($i=1; $i<=3; $i++) | |
<div class="row"> | |
<div class="col-md-2"> | |
<input type="text" name="properties[{{ $i }}][key]" class="form-control"> | |
</div> | |
<div class="col-md-4"> | |
<input type="text" name="properties[{{ $i }}][value]" class="form-control"> | |
</div> | |
</div> | |
@endfor | |
</div> | |
<div> | |
<input class=" btn btn-danger" type="submit"> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
@endsection |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
try this one