Как предотвратить отправку основной формы laravel?

У меня 1 основная форма. У меня также есть вспомогательная форма внутри этой основной формы.

Кажется, я не могу предотвратить прекращение отправки основной формы, поскольку отправка типа кнопки отправит основную форму автоматически.

Форма UI

enter image description here

Когда я нажимаю на delete, открывается модальный слайд с двумя вариантами

enter image description here

Когда я нажимаю УДАЛИТЬ, я Только отправляю на удаление изображения, вот и все.


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

Как можно дальше отлаживать это?

Моя цель - как можно больше использовать HTML, blade и Laravel, чтобы решить эту проблему.

0
0
2 575
3

Ответы 3

Это неверный html, чтобы иметь форму внутри формы.

Я бы попытался разместить модальное окно вне основной формы.

Я бы сделал скрытую форму вне исходной формы, а затем отправил бы ее с помощью кнопки с атрибутом формы. Эта «форма» является допустимым атрибутом html5.

<button type="submit" form="id_of_form_to_submit" value="Submit">Submit</button>

Здесь вы можете найти дополнительную информацию: https://www.w3schools.com/Tags/att_button_form.asp

Может быть кому-то пригодится

$('#formId').submit(function (event) {
    event.preventDefault();
 });

Другие вопросы по теме