How to prevent the main Laravel form to submit? - php

Question

I have 1 main form. I also have a sub form inside that main form.
I can't seem to prevent the main form to stop submitting since the button type submit will submit the main form automatically.
Form UI
When I click on delete the modal slide up with 2 options
When I click on DELETE, I only one to submit to delete image that's it.
edit.blade.php
#extends('layouts.be.master')
#section('content')
<script type="text/javascript" src="/js/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="http://d.biossusa.com/css/root/hover-master/hover.css">
<style type="text/css">
.portfolio-images {
border: solid 1px silver;
}
._hover{
padding: 0px;
position: relative;
overflow: hidden;
border: 1px solid #D8D8D8;
/*border-radius: 10px;*/
}
._hover:hover .caption{
opacity: 1;
transform: translateY(-150px);
-webkit-transform:translateY(-150px);
-moz-transform:translateY(-150px);
-ms-transform:translateY(-150px);
-o-transform:translateY(-150px);
}
._hover img{
z-index: 4;
}
._hover .caption{
position: absolute;
top:150px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;
}
._hover .blur{
background-color: rgba(0,0,0,0.8);
height: 300px;
z-index: 5;
position: absolute;
width: 100%;
}
._hover .caption-text{
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top:-20px;
width: 100%;
}
</style>
<?php $tags = explode(",", $portfolio->tag ); ?>
<div class="card-body card-padding">
<div class="row">
{!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'portfolio/'. $portfolio->id .'/update','files' => true)) !!}
<div class="col-sm-12">
{{-- Name --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" value="{{ $portfolio->name }}" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
{{-- Type --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select name="type" class="form-control">
#foreach($portfolioTypes as $item)
<option value="{{ $item }}">{{ $item }}</option>
#endforeach
</select>
</div>
</div>
{{-- Tags --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
</div>
<input id="tags" name="tag">
</div>
{{-- URL --}}
<div class="form-group">
<label for="url" class="col-sm-2 control-label">URL</label>
<div class="col-sm-10">
<input name="url" type="text" value="{{ $portfolio->url }}" class="form-control" placeholder="URL">
</div>
</div>
{{-- Images --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Images</label>
#foreach($images as $image)
<?php
$crop_img = str_replace('full.jpg','crop.jpg',$image->img_path);
?>
<div class="col-sm-2">
<div class="_hover " style="background: transparent;">
<p style="text-align:center;">
<img class="img-responsive" src="{{ $image->image_path }}" alt="">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6 class="title lighter" style="padding:5px;border-radius: 10px;">
{{ $image->id }}
</h6>
<p>
<span>
<a data-toggle="modal" data-target="#delete_image_{{ $image->id or '' }}">
delete
</a>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete_image_{{ $image->id }}">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-4 ">
{!! Form::model($image, array( 'url' => '/portfolio/image/'.$image->id.'/destroy','method' => 'DELETE')) !!}
<button type="submit" class="btn btn-danger btn-lg btn-block">Delete ({{ $image->id }})</button>
<a class="btn btn-primary btn-lg btn-block" data-dismiss="modal" > Cancel </a>
{!! Form::hidden('$id', $image->id)!!}
{!! Form::close()!!}
</div>
</div>
</div>
#endforeach
<br><br>
<input id="images" name="images[]" type="file" multiple>
</div>
{{-- Description --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea name="description" rows="20" cols="80" id="description">
{{ base64_decode($portfolio->description) }}
</textarea>
<script>
CKEDITOR.replace( 'description' );
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<a class="btn btn-default" href="/portfolio"> Cancel </a>
<button type="submit" class="btn btn-info">Done</button>
</div>
</div>
</div>
{!!Form::close()!!}
</div>
</div>
#stop
#section('custom-scripts')
<link rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript" src="/js/jquery.tag-editor.js"></script>
<script type="text/javascript">
$( "select[name*='type']" ).val("{{ $portfolio->type }}");
function readLogo(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#portfolio-icon').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$( "input[name*='logo_path']" ).change(function(){
readLogo(this);
});
$('#tags').tagEditor({
autocomplete: {
delay: 0,
position: { collision: 'flip' },
source: [<?php echo '"'.implode('","', $skillList).'"' ?>]
},
forceLowercase: false,
delimiter: ',', /* space and comma */
placeholder: 'Enter tags ...',
initialTags: [<?php echo '"'.implode('","', $tags).'"' ?>]
});
</script>
#stop
How would one go about debugging this further?
My goal is to stay with HTML, blade and Laravel as much as possible to solve this problem.

Answer 1

May be Use to someone
$('#formId').submit(function (event) {
event.preventDefault();
});

Answer 2

It is invalid html to have a form inside a form.
I'd try to place the modal outside the main form.

Answer 3

I would make hidden form outside of the original form and then send it with button that has form attribute. That "form" is valid html5 attribute.
<button type="submit" form="id_of_form_to_submit" value="Submit">Submit</button>
Here you can find more information:
https://www.w3schools.com/Tags/att_button_form.asp