A simple way to position a button separate from a form

I have a form with an action like the following:

<form action="edit.php" method="post">
.
.

<button class="btn btn-success"  name="submit_mult" type="submit">Edit</button>
</form>

Initially, I used this form for the first button, and now I want to use the same form for a second button, but this time it is for deletion. However, since the current form action is set to "edit.php", I need to use formaction="delete.php". This overrides the action attribute of the form when you click on that button.

The issue is that I want the second button to be displayed outside of the form, not inside. I tried to figure out how to make this work...

Here is what I wrote:

 <div id="delete"><button class="btn btn-success" formaction="Multi_Edit/delete.php"  name="submit_mult" type="submit">Delete</button></div>

Unfortunately, it's not working when I place this button outside of the form, but it works fine when it's inside the form.

How can I solve this so that the button works outside of the form with formaction="delete.php"? If this can be achieved using jQuery, how would I write that in jQuery!

Answer №1

Give this a shot

Add an identifier to the form

<form action="edit.php" method="post" id="myForm" >
.
.

Include an ID for the button

<div id="delete"><button class="btn btn-success" formaction="Multi_Edit/delete.php"  name="submit_mult" id="myDeleteButton" type="submit">delete</button></div>

Then, use jQuery to handle the form submission

$("#myDeleteButton").click(function(){
     $("#myForm").attr('action','Multi_Edit/delete.php');
     $("#myForm").submit();
});

Answer №2

To implement the use of the form attribute, you simply need to add form="theForm":

<form action="edit.php" method="post" id="theForm">...</form>
<div id="delete"><button form="theForm" class="btn btn-success" formaction="Multi_Edit/delete.php"  name="submit_mult" type="submit">delete</button></div>

For further information, check out: http://www.sitepoint.com/the-html5-form-attribute/

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

Setting up popover functionality in TypeScript with Bootstrap 4

Seeking assistance with initializing popovers using TypeScript. I am attempting to initialize each element with the data-toggle="popover" attribute found on the page using querySelectorAll(). Here is an example of what I have tried so far: export class P ...

"Unlocking the power of Bootstrap modals in Django

Using Django, I have a loop of div elements. When I click on a div, I want a modal to be displayed. Here is my HTML code: {% for object in theobjects %} <div class="row" style="margin-top:0.5%;"> <div name="traitement" <!-- onclic ...

Transferring HTML content using jQuery AJAX and PHP

Can anyone help me with displaying the content of a division on one page to another? <div id="box-cont" class="box-content"> <?php echo $stat;// Includes multiple images and s ...

Images for the background of the table header and sorting icons

Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...

`I'm encountering issues when trying to pass an array through localStorage into a new array`

This is a complex and detailed question that I am struggling to find a solution for. Despite using deprecated mysql due to hosting limitations, the problem lies elsewhere. Part 1 involves dataLoader.php, which queries the database and retrieves posx and p ...

Issue with sync-request when using post data doesn't seem to be functioning

I am currently working on a Node.js application where I need to make synchronous requests. After some research, I came across the sync-request npm package for making these requests. However, when I tried using the code below, I encountered an error with th ...

Issue with MVC HTML Helper DropDownListFor failing to submit the chosen value

I'm facing an issue with jQuery form serialize as it's not sending the value of the drop down list to the controller. The control is able to retrieve the ID and Name from the .cshtml file. HTML-code @using (Html.BeginForm("", "", FormMethod.Pos ...

the angular-ui-tinymce directive allows for seamless image uploads using a file browser

Utilizing jQuery, we have the ability to incorporate local images into the tinymce editor similar to what is demonstrated in this jsfiddle, by following the guidelines provided in the documentation. The Angular module for tinymce can be found at angular-u ...

Utilizing PHP and AJAX for an Innovative Login System

I am facing an issue with my sign in form implementation using ajax, jquery, and PHP. The problem I am encountering is that the $result variable always returns false. As a beginner in this field, I hope to receive assistance from all of you. Below is the ...

Tips for ensuring the vertical scroll bar is always visible on a div element

I need help with maintaining a vertical scroll bar on a div regardless of its height. .myclass { overflow-y: scroll; } <div class="myclass"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the in ...

Is it possible to create a button that can bring in a .css file?

Is there a way to create a button that imports styles from a .css file, or is it possible to change multiple CSS properties with buttons to create different website themes? This is the CSS file I have: .body { background-image: url("example.png"); } ...

JavaScript OOP problem with object instances

I'm currently working on developing an app in JavaScript and trying to grasp the concept of Object-Oriented Programming. I created a simple "class" where I set an empty array in its prototype. However, when I create objects from this class and pass va ...

What is the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

When using ElementUI, the translation of &nbsp to a space in el-select is not supported

Whenever I am using el-select, the label displays &nbsp but unfortunately it does not change into a space when viewed in the browser For inquiries contact [email protected] <el-select v-model="value" filterable @change="currentSel" id ...

Is there a more efficient method for validating the values of an AJAX request?

I am currently working on developing an AJAX backend for a Django application and I'm not sure if I'm approaching it the right way. Currently, in order to accept integer values, I find myself having to typecast them using int(), which often leads ...

Rearranging the Array based on the specific number in a consistent manner

I am in the process of developing a quiz creation platform. My goal is to display the answers to a question to users in a randomized order. My aim is to avoid the need to store the sequence in which the answers were presented by shuffling them randomly. ...

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

Navigating with jQuery Scrollbars

Looking to incorporate a bit of animation in jQuery, trying out the following line: window.parent.scroll(coord[0], coord[1]); The next block of code doesn't seem to be achieving what I had in mind. Do you have any suggestions? $(window.parent).anim ...

Guide on incorporating a dropdown menu within a Jssor slider

I am facing an issue with trying to include a dropdown menu inside the Jssor slider. The menu does not drop down when placed inside it. Here is the code snippet: <head> <script src="jquery.js"></script> <script src="jssor.slider.min. ...

Error message 'Not Found' is displayed for all routes except for / when using Laravel 5.1 on an AWS EC2 instance

I am currently in the process of setting up a Laravel 5.1 project on EC2 (AWS). After installing a LAMP stack (PHP 5.6) and Composer, everything appears to be functioning correctly. I was able to successfully run migrations for the Laravel app. However, wh ...