我是 Laravel 的初学者,我正在尝试创建一个表单并将其提交到数据库。
我设法使用以下代码将数据保存到数据库中。
我的刀片:
<form id="castingform" method="post" action="castingss" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" id="id_hidden" name="id" />
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_name">Nom</label>
<input type="text" class="form-control" id="casting_name" name="casting_name" placeholder="Nom" >
<span class="text-danger">{{ $errors->first('casting_name') }}</span>
</div>
<div class="form-group col-md-6">
<label for="casting_cin">CIN</label>
<input type="text" class="form-control" id="casting_cin" name="casting_cin" placeholder="Cin">
<span class="text-danger">{{ $errors->first('casting_cin') }}</span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_email">Email</label>
<input type="text" class="form-control" id="casting_email" name="casting_email" placeholder="Email">
<span class="text-danger">{{ $errors->first('casting_email') }}</span>
</div>
<div class="form-group col-md-6">
<label for="casting_phone">Téléphone</label>
<input type="tel" class="form-control" id="casting_phone" name="casting_phone" placeholder="Téléphone">
<span class="text-danger">{{ $errors->first('casting_phone') }}</span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_age">Age</label>
<input type="number" class="form-control" id="casting_age" name="casting_age" placeholder="Age">
<span class="text-danger">{{ $errors->first('casting_age') }}</span>
</div>
<div class="form-group col-md-6">
<label for="casting_sexe">Sexe</label>
<div class="custom-control custom-radio">
<input type="radio" name="casting_sexe" id="casting_sexeh" class="custom-control-input" value="homme">
<label class="custom-control-label" for="casting_sexeh">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="casting_sexe" id="casting_sexef" class="custom-control-input" value="femme">
<label class="custom-control-label" for="casting_sexef" >Femme</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_city">City</label>
<input type="text" class="form-control" name="casting_city" id="casting_city">
<span class="text-danger">{{ $errors->first('casting_city') }}</span>
</div>
<div class="form-group col-md-6">
<label for="casting_address">Address 2</label>
<input type="text" class="form-control" id="casting_address" name="casting_address" >
<span class="text-danger">{{ $errors->first('casting_address') }}</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" name="casting_photo" class="custom-file-input" id="casting_photo">
<label class="custom-file-label" for="casting_photo">Choose file</label>
</div>
</div>
<div class=" col-md-6">
<span id="store_image" text-align: center></span>
</div>
</br> </br> </br> </br> </br>
<span class="result"></span>
<div class="form-group" align="center">
<input type="hidden" name="action" id="action" />
<input type="hidden" name="hidden_id" id="hidden_id" />
<input type="submit" name="action_button" id="action_button" class="btn btn-warning" value="ADD" />
</div>
<div class=" col-md-6">
<span id="form_result"></span>
</div>
</form>
<!--------------------- script---------------------
<script type="text/javascript">
$(document).ready(function(){
$('#castingform').on('submit', function(event){
event.preventDefault();
if($('#action').val() == 'Add')
{
$.ajax({
url:"{{ route('castingss.store') }}",
method:"POST",
data: new FormData(this),
dataSrc: "",
contentType: false,
cache:false,
processData: false,
dataType:"json",
success:function(data)
{
var html = '';
if(data.errors)
{
html = '<div class="alert alert-danger">';
for(var count = 0; count < data.errors.length; count++)
{
html += '<p>' + data.errors[count] + '</p>';
}
html += '</div>';
}
if(data.success)
{
alert('je suis là');
html = '<div class="alert alert-success">' + data.success + '</div>';
$('#sample_form')[0].reset();
$('#datatableRows').DataTable().ajax.reload();
}
$('#form_result').html(html);
}
})
}
});
});
</script>
我的控制器:
public function store(Request $request)
{
$rules = array(
'casting_name' => 'required',
'casting_cin' => 'required|max:8|unique:castings',
'casting_email' => 'required|email|unique:castings',
'casting_phone' => 'required',
'casting_age' => 'required',
'casting_sexe' => 'required',
'casting_city' => 'required',
'casting_address' => 'required',
'casting_photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
);
$error = Validator::make($request->all(), $rules);
if($error->fails())
{
return response()->json(['errors' => $error->errors()->all()]);
}
$image = $request->file('casting_photo');
$new_name = rand() . '.' . $image->getClientOriginalExtension();
$image->move(public_path('castingimages'), $new_name);
$form_data = array(
'casting_name' => $request->casting_name,
'casting_cin' => $request->casting_cin,
'casting_email' => $request->casting_email,
'casting_phone' => $request->casting_phone,
'casting_age' => $request->casting_age,
'casting_sexe' => $request->casting_sexe,
'casting_city' => $request->casting_city,
'casting_address' => $request->casting_address,
'casting_photo' => $new_name
);
Casting::create($form_data);
return response()->json(['success' => 'Data Added successfully.']);
}
一切对我来说都很好,但现在我想在表单中添加其他内容。我想根据输入年龄的值来显示其他输入。这意味着如果年龄小于 18 岁,则必须显示另外两个输入,一个是担保人的姓名,另一个是担保人的识别号,并且年龄与姓名和标识符一起记录在数据库中担保人,如果年龄超过 18 岁,我们什么都不做,我们将数据库中的数据记录为 18 岁。
我怎么能这样做?如果您有任何想法,请给我指导以实现这一目标。
先感谢您。
编辑
<script type="text/javascript">
$(document).ready(function(){
$('#castingform').on('submit', function(event){
event.preventDefault();
var castingAgeInput = document.getElementById('casting_age');
var guarantorContainer = document.querySelector('.js-guarantor-container');
var guarantorIdentificationNumberContainer = document.querySelector('.js-guarantor_identification_number-container');
castingAgeInput.addEventListener('change', function(evt) {
if (+evt.target.value < 18) {
guarantorContainer.removeAttribute('hidden');
guarantorIdentificationNumberContainer.removeAttribute('hidden');
} else {
guarantorContainer.setAttribute('hidden', true);
guarantorIdentificationNumberContainer.setAttribute('hidden', true);
}
if($('#action').val() == 'Add')
{
$.ajax({
url:"{{ route('castingss.store') }}",
method:"POST",
data: new FormData(this),
dataSrc: "",
contentType: false,
cache:false,
processData: false,
dataType:"json",
success:function(data)
{
var html = '';
if(data.errors)
{
html = '<div class="alert alert-danger">';
for(var count = 0; count < data.errors.length; count++)
{
html += '<p>' + data.errors[count] + '</p>';
}
html += '</div>';
}
if(data.success)
{
alert('je suis là');
html = '<div class="alert alert-success">' + data.success + '</div>';
$('#sample_form')[0].reset();
$('#datatableRows').DataTable().ajax.reload();
}
$('#form_result').html(html);
}
})
}
});
});
</script>
但它不起作用
您只需添加这些字段hidden
并切换它们的可见性:
var castingAgeInput = document.getElementById('casting_age');
var guarantorContainer = document.querySelector('.js-guarantor-container');
var guarantorIdentificationNumberContainer = document.querySelector('.js-guarantor_identification_number-container');
castingAgeInput.addEventListener('change', function(evt) {
if (+evt.target.value < 18) {
guarantorContainer.removeAttribute('hidden');
guarantorIdentificationNumberContainer.removeAttribute('hidden');
} else {
guarantorContainer.setAttribute('hidden', true);
guarantorIdentificationNumberContainer.setAttribute('hidden', true);
}
});
<div class="form-group col-md-6">
<label for="casting_age">Age</label>
<input type="number" class="form-control" id="casting_age" name="casting_age" placeholder="Age">
<span class="text-danger">{{ $errors->first('casting_age') }}</span>
</div>
<div class="form-group col-md-6 js-guarantor-container" hidden>
<label for="guarantor">Guarantor</label>
<input type="number" class="form-control" id="guarantor" name="guarantor" placeholder="Guarantor">
<span class="text-danger">{{ $errors->first('guarantor') }}</span>
</div>
<div class="form-group col-md-6 js-guarantor_identification_number-container" hidden>
<label for="guarantor_identification_number">Guarantor identification number</label>
<input type="number" class="form-control" id="guarantor_identification_number" name="guarantor_identification_number" placeholder="Age">
<span class="text-danger">{{ $errors->first('guarantor_identification_number') }}</span>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句