How to prevent the main Laravel form to submit?

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.

That is my entire form

My subform is my delete of each image

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">

            
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" value="" name="name" class="form-control" id="name" placeholder="Name">
                </div>
            </div>

            
            <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=""></option>
                      @endforeach
                  </select>
              </div>
          </div>


          
          <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>

        
        <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="" class="form-control" placeholder="URL">
            </div>
        </div>


        


        <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="" alt="">
                        </p>
                        <div class="caption">
                            <div class="blur"></div>
                            <div class="caption-text">
                                <h6 class="title lighter" style="padding:5px;border-radius: 10px;">
                                    
                                </h6>
                                <p>
                                    <span>
                                        <a data-toggle="modal"  data-target="#delete_image_">
                                            delete
                                        </a>
                                    </span>

                                </p>

                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal fade" id="delete_image_">
                    <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 ()</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>

        
        <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">
                    
                </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("");

    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

---

---

Questions

How would one go about and debug this further ?

---

I'm open to any suggestions at this moment.

Any hints/suggestions / helps on this be will be much appreciated!

via Chebli Mohamed