我对 Web 开发很陌生，我正在为我的实习项目创建基本的 CRUD。我的客户要求我制作一个单独的创建表单，我需要将这些输入上传到数据库，假设我有 3 个表：商店、水果（一家商店有很多水果）和蔬菜（一家商店有很多蔬菜）
我最终制作了多个表单，其中一个主要表单用于商店输入，而模态内的一些附加表单用于水果和蔬菜输入（表单是分开的）。提交并传递给控制器后，我只能从商店表单中获取输入，而不能从其他表单中获取输入。
脚本和样式：
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Adding and removing fruit table row
$(".fruit-add").click(function(){
var fruit_pic = $("#fruit_pic").val();
var fruit_pic_name = $("#fruit_pic").val().replace(/C:\\fakepath\\/i, '')
var fruit_name = $("#fruit_name").val();
var markup = "<tr><td>" + fruit_pic_name + "</td><td>" + fruit_name + "</td><td>" + "<button type='button' class='fruit-remove'> Delete </button>" + "</td></tr>";
$(".fruit-table").append(markup);
});
$("body").on("click",".fruit-remove",function(){
$(this).parents("tr").remove();
});
//Adding and removing vegetable table row
$(".vegetable-add").click(function(){
var vegetable_pic = $("#vegetable_pic").val();
var vegetable_pic_name = $("#vegetable_pic").val().replace(/C:\\fakepath\\/i, '')
var vegetable_name = $("#vegetable_name").val();
var markup = "<tr><td>" + vegetable_pic_name + "</td><td>" + vegetable_name + "</td><td>" + "<button type='button' class='vegetable-remove'> Delete </button>" + "</td></tr>";
$(".vegetable-table").append(markup);
});
$("body").on("click",".vegetable-remove",function(){
$(this).parents("tr").remove();
});
});
</script>
我的店铺形式：
<form method="post" action="/add-shop/store" id="addShop" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group">
<label for="shop_name">Shop name</label>
<input type="text" class="form-control" name="shop_name" id="shop_name" aria-describedby="shop_name">
@if($errors->has('shop_name'))
<div class="text-danger">
{{ $errors->first('shop_name')}}
</div>
@endif
</div>
<div class="form-group">
<label> Fruits </label>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th>Picture</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody class="fruit-table">
</tbody>
</table>
</div>
<!-- Button trigger fruit modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addFruit">
Add fruit
</button>
</div>
<div class="form-group">
<label> Vegetables </label>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th>Picture</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody class="vegetable-table">
</tbody>
</table>
</div>
<!-- Button trigger vegetable modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addVegetable">
Add vegetable
</button>
</div>
<div class="form-group text-right">
<button type="button" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
我在弹出模式上的表单：
<!-- Fruit Modal -->
<div class="modal fade" id="addFruit" tabindex="-1" role="dialog" aria-labelledby="addFruit" aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="form_fruit">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addFruit">Fruit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="fruit_pic">Picture</label>
<input type="file" accept="image/*" name="fruit_pic[]" id="fruit_pic" class="form-control">
</div>
<div class="form-group">
<label for="fruit_name">Name</label>
<input type="text" name="fruit_name[]" class="form-control" id="fruit_name">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary fruit-add" data-dismiss="modal">Add</button>
</div>
</div>
</form>
</div>
</div>
<!-- Vegetable Modal -->
<div class="modal fade" id="addVegetable" tabindex="-1" role="dialog" aria-labelledby="addVegetavle" aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="form_vegetable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addVegetable">Vegetable</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="vegetable_pic">Picture</label>
<input type="file" accept="image/*" name="vegetable_pic[]" id="vegetable_pic" class="form-control">
</div>
<div class="form-group">
<label for="vegetable_name">Name</label>
<input type="text" class="form-control" name="vegetable_name[]" id="vegetable_name" placeholder="Deskripsi">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary vegetable-add" data-dismiss="modal">Add</button>
</div>
</div>
</form>
</div>
</div>
控制器功能：
public function add()
{
return view('add-shop');
}
public function storeTest(Request $request)
{
echo "test\n"; //works
echo $request->fruit_name; //doest work
if($request->hasfile('fruit_pic')){ //doesnt work
foreach($request->file('fruit_pic') as $image){
echo $request->fruit_name;
}
}
echo $request->shop_name; //work
}
当我尝试提交表单时，我得到了 shop_name 但不是所有其他表单属性（水果和蔬菜）
我感觉我的方法不太对，有什么问题，有没有更好的方法来应用它？
快速浏览一下您应该在操作中使用的表格
{{url(}}
{{route()}}
您没有收到商店表格，因为它本身的模型不在表格中，请确保将其放在form您提交原始表格标签的位置。另一种选择，如果你真的想把它放在外面，你可以在表单中做一个隐藏的输入，然后用模型中的java脚本把你的数据放在那里，然后提交表单
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句