Reputation: 29
I've put my button inside form, but it doing nothing when clicked. I have no idea what is wrong. The button is near at the bottom of this code
<form enctype="multipart/form-data" class="form-horizontal" method="post" action="{{base_url()}}admin/unit/update/{{$unit->id_unit}}">
<div class="box-body">
<div class="form-group">
<div class="col-md-3 col-sm-3 control-label" style="padding-top:40px;">
<a class="btn btn-primary btn-sm" onclick="AddNewImage(this)">
<i class="fa fa-plus"></i>
Add New Image
</a>
</div>
<div class="col-md-9">
<div class="row">
@foreach ($gambar->result() as $value)
<div id="image-upload" class="col-md-4 col-sm-4 submit-image" style="padding-top:8px;padding-bottom:8px">
<div class="image-placeholder">
<img src="{{base_url()}}gambar/unit/{{$value->gambar}}" class="img-responsive" style="margin:0 auto;object-fit: cover;width: 150px;height: 150px">
</div>
<div class="step7" id="step7" style="padding-top:10px; text-align:center">
<input type="file" name="userfile[]" style="display:none" onchange="readURL(this);" required>
<a class="custom-upload btn btn-small btn-primary" onclick="openUpload(this)"><i class="fa fa-upload"></i></a>
<a href="{{ base_url('admin/unit/hapus_detail/'.$value->id) }}" class="custom-upload btn btn-small btn-primary"><i class="fa fa-times"></i></a>
</div>
<div class="clearfix"></div>
</div>
@endforeach
<input type="hidden" name="count_img">
</div>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<a href="{{ base_url('admin/unit') }}">
<button type="button" class="btn btn-default">Cancel</button>
</a>
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
<!-- /.box-footer -->
</form>
Upvotes: 1
Views: 627
Reputation: 1238
An invalid form control with name='userfile[]' is not focusable.
Try to add novalidate attribute to the form.
<form enctype="multipart/form-data" class="form-horizontal" method="post" action="{{base_url()}}admin/unit/update/{{$unit->id_unit}}" novalidate>
Edit :
The reason is simple. Your file element is required AND empty. So, the browser have to show a pop up message to ask you to fill this field. Or, the file element is also HIDDEN (display: none), so, the browser is unable to do this, and an error occurs.
So, add novalidate is a solution, but you can also remove required attribute to the file element
Upvotes: 3