Bootstrap 4 modal experiencing issues with the form end tag functionality

Currently, I am facing an issue while attempting to incorporate a confirmation delete feature using a Bootstrap 4 modal in my Laravel project. The problem arises when the modal is opened, and the submit button fails to function. Upon inspecting the browser, it appears that the closing tag of my form was positioned improperly, right after the opening tag. Despite thorough scrutiny of my code, I am unable to identify the root cause of this discrepancy. Can anyone provide assistance in resolving this perplexing issue?

index.blade.php

<div class="panel-body">

    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Address</th>
                <th>Blood Group</th>
                <th>Type</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($patients as $patient)
            <tr>
                <td>{{ $loop-> index + 1 }}</td>
                <td>{{ $patient->name }}</td>
                <td>{{ $patient->address }}</td>
                <td>{{ $patient->blood_group }}</td>
                <td>{{ $patient->type_rh }}</td>
                <td>
                    <a href="{{ url('admin/patient/'.$patient->id.'/details') }}" target="_blank">
                        <i class="fa fa-eye" style="color:#006400"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="{{ url('admin/patient/'.$patient->id.'/edit') }}">
                        <i class="fa fa-edit" style="color:#e64980"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" data-toggle="modal" data-target="#deletePatient-{{ $patient->id }}">
                        <i class="fa fa-trash" style="color:#cc3300"></i>
                    </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="{{ url('admin/patient/pdf/'.$patient->id) }}" class="btn btn-primary pull-right"><i class="fas fa-file-pdf"></i>&nbsp;PDF</a>
                </td>
                <!-- Delete Modal -->
                <div class="modal fade" id="deletePatient-{{ $patient->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">

                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                 <h4>Confirm Delete</h4>

                            </div>
                            <form action="{{ url('admin/patient/'.$patient->id.'/delete') }}" method="POST">
                                {{ csrf_field() }}
                                {{ method_field('DELETE') }}
                            <div class="modal-body">
                                <p>Are you sure want to delete this?</p>
                            </div>
                            <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-danger">Delete</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </tr>

            @empty

            @endforelse
        </tbody>
        <tfoot></tfoot>

    </table>
</div>

https://i.sstatic.net/rcEhX.png

javascripttwitter-bootstraplaravelbootstrap-4bootstrap-modal

Answer №1

It is important to remember that when placing a FORM inside a DIV, it must be nested within a TD if you want it to be part of a TABLE.

Simply placing a div element in a table will not work the same as using TR or TD tags, which can result in HTML errors.

Remember:

There are only 2 correct ways to use forms within a table:

<form>
    <table>...</table>
</form>

and

<table>
    ...
    <tr>
        ...
        <td>
            <form>...</form>
        </td>
        ...
    </tr>
    ...
</table>

Answer №2

Update the button type as shown below

<form action="{{ url('admin/patient/'.$patient->id.'/delete') }}" method="POST">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}
     <div class="modal-body">
          <p>Are you sure you want to delete this?</p>
     </div>
     <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-danger">Delete</button>
     </div>
</form>

Change the appearance of the submit button to the following

<button type="submit" class="btn btn-danger">Delete</button>

Answer №3

Here is a PHP example:

$modalcontent .= '
<div class="modal fade" id="modal_'.$modalid.'">
          <div class="modal-dialog">
            <div class="modal-content">
</div></div</div>';

echo '<tr><td></td><td></td></tr>';

$modalcontent .= '
<div class="modal fade" id="modal_'.$modalid.'">
          <div class="modal-dialog">
            <div class="modal-content">
</div></div</div>';

echo '<tr><td></td><td></td></tr>';

$modalcontent .= '
<div class="modal fade" id="modal_'.$modalid.'">
          <div class="modal-dialog">
            <div class="modal-content">
</div></div</div>';
echo '<tr><td></td><td></td></tr>';
..
</tbody></table>

//Now, simply display the modal content:
echo $modalcontent; //-> this will remove all modals from the table.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Deactivate the backface culling feature when loading an imported .obj file in three.js

I'm struggling with disabling wireframe rendering on the rear side of my vehicle. Any ideas on how to deactivate backface culling in wireframe mode for three.js? Check out this link for a helpful image ...

javascriptthree.js.objwireframe

Are your divs getting truncated?

Currently faced with a perplexing issue where inserting elements into a div causes scaling problems, resulting in most of the divs being cut off. This glitch occurs when two new elements are added. Despite changing page sizes and thoroughly debugging by o ...

javascripthtmlcss

Sending data from an Angular application using AJAX to FormSpree.io

Currently, I am using a jQuery script to send ajax requests to for static form submission. The documentation provided by FormSpree suggests the following approach: $.ajax({ url: "//formspree.io/<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

javascriptjqueryajaxangularjs

Determine whether a specific text is contained within a given string

Can someone help me determine if a specific text is included in a string? For example, I have a string str = "car, bicycle, bus" and another string str2 = "car" I need to verify if str2 exists within str. I'm new to JavaScript so I appreciate you ...

javascript

Hover over a particular element using a loop in Vue.js

Is there a way to change the price button to an Add to Cart button on mouseover, considering the true false data trigger for each item? How can we specify which item to target when hovering over the price section? Below is the code snippet: template: < ...

javascriptvue.js

Encountered an error while parsing a module in React: Unexpected token

After deciding to incorporate the npm package react-radio-buttons into my project, I encountered an error upon installation and implementation in my component: ./node_modules/react-radio-buttons/index.jsx 80:6 module parse failed: Unexpected token (80:6) ...

javascriptreactjsobjectnpmpackage

Broken links detected in the Full Page Navigation menu on a one-page website

The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...

javascriptjqueryhtmlcssnavigation

Cannot trigger a click event on nginclude in AngularJS

I have a question regarding including a new page using the nginclude directive. The click event defined in the included page is not working properly. Main Application: <div ng-app=""> <input type="text" ng-model="ss"/> <div ...

javascriptangularjs

The presence of an undefined variable in `esm.js` is resulting in an overwhelming amount of

After upgrading from Node v14 to Node v16, I encountered a strange error specifically when running node with node -r esm. The error message reads: ReferenceError: myVar is not defined This results in an extensive output of the esm.js module spanning 5000 ...

javascriptnode.js

Obtain the contenteditable span's value

I'm facing an issue with a content editable span - I want to extract its value when the post button is clicked, but it's not working as expected. Please note that I am unable to convert the span to a textbox or div, I specifically need the value ...

javascriptjqueryhtmlcontenteditable

Save the text found within an element to Appim wd.js

I am a beginner with Appium and I am currently exploring the workshop Git project, which utilizes wd.js and Grunt. From my research in the documentation and forums, I have learned that there are two methods for accessing the text of native elements within ...

javascriptselenium-webdrivermocha.jsappium

Guide to extracting a key from the route module with the help of vuex-router-sync

I have a Vuex store setup as shown below, and I am using vuex-router-sync to keep it in sync. This plugin adds a router module to my store. However, I am unsure of how to retrieve this object from the store since there are no associated getters with this m ...

javascriptvue.jsvuejs2vuex

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

javascriptcssreactjsmaterial-ui

An unassigned variable automatically sets the disabled attribute to true on an input field

Is this behavior a problem or normal? Consider the following form structure: <form #form="ngForm" > <div> <label>field1</label> <input type="text" name="field1" [(ngModel)]="mainVar" [disabled]="someVar" /> ...

javascriptangularangular2-formsangular2-directivesangular2-ngmodel

Servlet question: What causes the XMLHttpRequest responseText to consistently appear empty?

I've been going crazy trying to figure out how to solve this issue. I have a servlet deployed in Tomcat running on localhost:8080 that looks like this: @WebServlet(urlPatterns = { "/createcon" }, asyncSupported = true) public class CreateCon extends ...

javascriptajaxtomcatservlets

Having trouble getting webpack and babel to start using npm

Greetings, wonderful people of the internet! I am a newcomer to the enchanting world of programming and I am facing a perplexing issue. Although Webpack is trying to guide me towards the solution, I seem to be struggling with fixing it on my own. const pa ...

javascriptnode.jsnpmwebpackbabeljs

Choose an element that has been generated dynamically using jQuery

Here is an example HTML table to work with: <table id="#myTable"> <tr id="#row123"><td>Content</td></tr> </table> To insert a new row using jQuery, you can use the following code: $('#myTable').prepend(&ap ...

javascriptjqueryjquery-selectors

Sequencing asynchronous functions in Angular: Ensuring one function runs before another

When working with a save function that requires you to call another function to retrieve the revision number and make an API call, both of which are asynchronous in nature, how can you ensure one function waits for the other to execute? $scope.getRevision ...

javascriptangularjs

Press the body to update state in React and close the dropdown

Seeking a solution for closing a dropdown menu when a user clicks outside of it or on another element? Consider the following code snippet written in React: var Hello = React.createClass({ getInitialState() { return { openDropdown: false ...

javascriptreactjs

How can I transfer form data to a PHP variable using an AJAX request?

Encountering some difficulties, any insights? I have included only the necessary parts of the code. Essentially, I have an HTML form where I aim to extract the value from a field before submission, trigger an ajax call, and fill in another field. It seems ...

javascriptphpajaxforms