title: How to prevent the main Laravel form to submit?
body: <p>I have 1 main form. I also have a sub form inside that main form. </p>
  
  <p>I can't seem to prevent the main form to stop submitting since the button type submit will submit the main form automatically. </p>
  
  <p><strong>Form UI</strong></p>
  
  <p><a href="https://i.stack.imgur.com/akFbq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/akFbq.png" alt="enter image description here"></a></p>
  
  <p>When I click on <code>delete</code> the modal slide up with 2 options </p>
  
  <p><a href="https://i.stack.imgur.com/4XduR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4XduR.png" alt="enter image description here"></a></p>
  
  <p>When I click on DELETE, I <strong>only</strong> one to submit to delete image that's it. </p>
  
  <hr>
  
  <p><strong>edit.blade.php</strong></p>
  
  <pre><code>@extends('layouts.be.master')
  @section('content')
  
  &lt;script type="text/javascript" src="/js/ckeditor.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://d.biossusa.com/css/root/hover-master/hover.css"&gt;
  
  &lt;style type="text/css"&gt;
  .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%;
  
  }
  &lt;/style&gt;
  
  
  &lt;?php $tags = explode(",", $portfolio-&gt;tag ); ?&gt;
  
  &lt;div class="card-body card-padding"&gt;
      &lt;div class="row"&gt;
  
          {!! Form::open(array('class' =&gt; 'form-horizontal', 'role' =&gt;'form', 'url'=&gt;'portfolio/'. $portfolio-&gt;id .'/update','files' =&gt; true)) !!}
  
  
          &lt;div class="col-sm-12"&gt;
  
              {{-- Name --}}
              &lt;div class="form-group"&gt;
                  &lt;label for="email" class="col-sm-2 control-label"&gt;Name&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                      &lt;input type="text" value="{{ $portfolio-&gt;name }}" name="name" class="form-control" id="name" placeholder="Name"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              {{-- Type --}}
              &lt;div class="form-group"&gt;
                  &lt;label for="email" class="col-sm-2 control-label"&gt;Type&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                      &lt;select name="type" class="form-control"&gt;
                        @foreach($portfolioTypes as $item)
                        &lt;option value="{{ $item }}"&gt;{{ $item }}&lt;/option&gt;
                        @endforeach
                    &lt;/select&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  
  
            {{-- Tags --}}
            &lt;div class="form-group"&gt;
              &lt;label for="email" class="col-sm-2 control-label"&gt;Tags&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
  
              &lt;/div&gt;
  
              &lt;input id="tags" name="tag"&gt;
          &lt;/div&gt;
  
          {{-- URL --}}
          &lt;div class="form-group"&gt;
              &lt;label for="url" class="col-sm-2 control-label"&gt;URL&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                  &lt;input name="url" type="text" value="{{ $portfolio-&gt;url }}" class="form-control" placeholder="URL"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          {{-- Images --}}
  
  
          &lt;div class="form-group"&gt;
  
              &lt;label for="email" class="col-sm-2 control-label"&gt;Images&lt;/label&gt;
  
  
              @foreach($images as $image)
  
                  &lt;?php
  
                  $crop_img = str_replace('full.jpg','crop.jpg',$image-&gt;img_path);
  
                  ?&gt;
  
  
                  &lt;div class="col-sm-2"&gt;
  
                      &lt;div class="_hover " style="background: transparent;"&gt;
                          &lt;p style="text-align:center;"&gt;
                              &lt;img class="img-responsive" src="{{ $image-&gt;image_path }}" alt=""&gt;
                          &lt;/p&gt;
                          &lt;div class="caption"&gt;
                              &lt;div class="blur"&gt;&lt;/div&gt;
                              &lt;div class="caption-text"&gt;
                                  &lt;h6 class="title lighter" style="padding:5px;border-radius: 10px;"&gt;
                                      {{ $image-&gt;id }}
                                  &lt;/h6&gt;
                                  &lt;p&gt;
                                      &lt;span&gt;
                                          &lt;a data-toggle="modal"  data-target="#delete_image_{{ $image-&gt;id or '' }}"&gt;
                                              delete
                                          &lt;/a&gt;
                                      &lt;/span&gt;
  
                                  &lt;/p&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
                  &lt;div class="modal fade" id="delete_image_{{ $image-&gt;id }}"&gt;
                      &lt;div class="model-content" style="margin-top: 200px;"&gt;
                          &lt;div class="col-sm-offset-4 col-sm-4 "&gt;
  
                          {!! Form::model($image, array( 'url' =&gt; '/portfolio/image/'.$image-&gt;id.'/destroy','method' =&gt; 'DELETE')) !!}
  
                              &lt;button type="submit" class="btn btn-danger btn-lg btn-block"&gt;Delete ({{ $image-&gt;id }})&lt;/button&gt;
                            &lt;a class="btn btn-primary btn-lg btn-block" data-dismiss="modal" &gt; Cancel &lt;/a&gt;
  
                          {!! Form::hidden('$id', $image-&gt;id)!!}
                          {!! Form::close()!!}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
              @endforeach
  
              &lt;br&gt;&lt;br&gt;
  
              &lt;input id="images" name="images[]" type="file"  multiple&gt;
  
          &lt;/div&gt;
  
          {{-- Description --}}
          &lt;div class="form-group"&gt;
  
              &lt;label for="email" class="col-sm-2 control-label"&gt;Description&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
  
                  &lt;textarea name="description" rows="20" cols="80" id="description"&gt;
                      {{ base64_decode($portfolio-&gt;description) }}
                  &lt;/textarea&gt;
                  &lt;script&gt;
                      CKEDITOR.replace( 'description' );
                  &lt;/script&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-sm-offset-4 col-sm-8"&gt;
                  &lt;a class="btn btn-default" href="/portfolio"&gt; Cancel &lt;/a&gt;
                  &lt;button type="submit" class="btn btn-info"&gt;Done&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
  
          {!!Form::close()!!}
  
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @stop
  
  @section('custom-scripts')
  
  &lt;link rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css"&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="/js/jquery.caret.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/jquery.tag-editor.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $( "select[name*='type']" ).val("{{ $portfolio-&gt;type }}");
  
      function readLogo(input) {
          if (input.files &amp;&amp; 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: [&lt;?php echo '"'.implode('","', $skillList).'"' ?&gt;]
          },
          forceLowercase: false,
          delimiter: ',', /* space and comma */
          placeholder: 'Enter tags ...',
          initialTags: [&lt;?php echo '"'.implode('","', $tags).'"' ?&gt;]
  
      });
  
  &lt;/script&gt;
  @stop
  </code></pre>
  
  <hr>
  
  <p>How would one go about debugging this further?</p>
  
  <p>My goal is to stay with HTML, blade and Laravel as much as possible to solve this problem.  </p>