Help submitting form

Posted 1 year ago by elliotk

Hello,

I am working on some new concepts using a modal form in Bootstrap 4.

I have the modal form popping up, and data being passed through no problem. I am just having trouble submitting the form.

I have a table of tags, to output them, I loop through each one and create a new row in the table. At the end of the table, there are buttons to edit and delete. To delete, I'd like the modal pop up to confirm.

            <table class="table table-striped table-responsive" data-toggle="dataTable" data-form="deleteForm">>
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Tag ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Slug</th>
                        <th scope="col">Actions</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tags as $tag)
                    <tr>
                        <th scope="row">{{ $tag->id }}</td>
                            <td>{{ $tag->name }}</td>
                            <td>{{ $tag->slug }}</td>
                            <td>
                                <a href="/admin/tags/{{ $tag->slug }}/edit">
                                    <button type="button" class="btn btn-sm btn-primary">
                                        Edit
                                    </button>
                                </a>
                            </td>
                            <td>
                                <form action="/admin/tags/{{ $tag->slug }}" method="POST" class="form-delete">
                                    {{ csrf_field() }}
                                    {{ method_field('DELETE') }}
                                    <button id="delete-button" type="button" class="btn btn-sm btn-danager" data-toggle="modal" data-act="{{ $tag->name }}" data-target="#exampleModal">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

That's the table, you'll see on the button for delete, it has a data-act property which is the tag name, which gets passed to the modal.

Here's the modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirm Deletion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        PLACEHOLDER
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" name="delete-confirm" id="delete-confirm">Delete</button>
      </div>
    </div>
  </div>
</div>

Here, we have a "delete-confirm" button.

I then have some JavaScript which listens for the modal opening, and set's the text on the modal itself. This is working fine.

 <script>
  $('#exampleModal').on('show.bs.modal', function (event) {
    var button=$(event.relatedTarget) // get the button
    var modal = $(this) // get the modal form
    modal.find('.modal-body').text('Are you sure you want to delete ' + button.data('tar')) // set the modal body text to include button data

    $('#exampleModal').modal({ backdrop: 'static', keyboard: false })
    .on('click', '#delete-confirm', function(){ // when the delete button is clicked on the modal
        $button.parentElement.submit(); // submit the form - attempt 1
        $button.form.submit(); // submit the form - attempt 2
    });
})
</script>

I am then trying to take the $button go up to the parent form and submit it.

I can't do something like

$('form#myForm').submit();

because, 1. I don't name the form or give it an ID, and 2. each tag I output get's it's own form, and they would have the same name. Hence the above.

Looking for some advice or guidance, any help appreciated.

Thanks

Please sign in or create an account to participate in this conversation.