modify the form action depending on the button that is selected

I need help changing the form action based on which button is clicked.

Form

<form action="addline.php" method="post" id="rundataform">
.....
<input value="Select1" type="submit" class="button1" > // click this to run addline.php
<input value="Select2" type="submit" class="button2" > // click this to run addline2.php
</form>

I have tried using JavaScript but couldn't get it to work. Can someone provide me with a working code snippet?

Kris

Answer №1

<form action="addline.php" method="post" id="rundataform">
<script>
function switchAction(value) {
    document.forms[0].action = value;
}
</script>
<input value="Select1" onmouseover="switchAction('addline.php')" type="submit"  class="button1" > // button one
<input value="Select2" onmouseover="switchAction('addline1.php')" type="submit" class="button2" > // button two
</form>

Here's a simple trick to achieve this:

<form action="addline.php" method="post" id="rundataform">
<script>
function switchAction(value) {
document.forms[0].action = value;
}
</script>
<input value="Select1" onmouseover="switchAction('addline.php')" type="submit"  class="button1" > // button one
<input value="Select2" onmouseover="switchAction('addline1.php')" type="submit" class="button2" > // button two
</form>

Answer №2

If you're looking to utilize ajax functionality, here's a helpful tip.

<script type="text/javascript><
        $(#button).click(function(){
            $.ajax({
                type: 'POST',
                url: 'required.php',
                success: function(data) {

                }
            });
        });
</script>

This method allows you to specify the button id and designate the desired URL of the php file for control transfer.

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

Enhance your website design with a custom content scroller using Bootstrap and

Having trouble getting this plugin to work with bootstrap on my website. Does anyone have a solution for this issue? Alternatively, does anyone know of another approach I could take? UPDATE: I managed to fix the problem myself. Add the following code ...

What's causing the browser to repeatedly display a "cannot get" message?

I've been working on a project utilizing node js and express. Despite fixing some errors, I still encounter a "cannot get" error when executing the code in the browser. The terminal confirms that the Express server has started at port : 3000 and the M ...

Can users sign up using the allowSignUp feature in the auth0-js 8.x.x version?

I have transitioned to the new Auth0 hosted login page, replacing the deprecated widget. In the past, with the lock widget, you could disable sign up by passing an allowSignUp boolean in the option object like so: var options = { allowSignUp: false }; ...

Tips for sending a String[] to my Angular 2 HTML template

In the export class of my component, I have a string array variable declared like this; barChartLabel:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; To display t ...

What is the best way to assign a value to react-select when working with grouped options?

Is there a way to update the value of a react-select component that has grouped options, as discussed in this post? Responding to @Tholle's comment: I didn't mention that I'm using Typescript because it might limit the number of responses. ...

The Firebase cloud function will only activate when I manually input data into the Firestore database via the console

I'm having trouble getting my function to trigger when I programmatically add data to Firestore. It only seems to work when I manually add data through the console. Below is the code for my function: exports.updateFirestoreStatistics = functions.fir ...

Guide on displaying a grid in the center of the screen with a vertical sliding feature

I've noticed certain apps displaying a grid view or form on an alert box with vertical sliding, but I'm clueless about how to make it happen. As far as I know, this can be achieved using jQuery.. Any assistance would be greatly appreciated. Th ...

Mongoose does not support sorting with plain objects

I'm looking to retrieve a plain JavaScript object instead of a Mongoose object. Query chatModel.find({'userId':userId},{ "_id":0,"message":1,"type":1 }).sort({createdDateISO:-1}) .lean().exec((e ...

Animating with jQuery to a specific offset or position

Currently, I am utilizing jQuery animate to modify the location of an element: $('#item').animate({'top' : '-50'}, 0); The goal is to set the position without any animations. I experimented with both offset and position, but ...

Can process.env.NODE_ENV be found within Azure App Service?

I am integrating NodeJS with my Angular application using ExpressJS. I came across an npm package called norobot that I want to install in order to utilize the process object. I need guidance on how and where to set the NODE_ENV in an App Service on Micro ...

Encounter an error while attempting to store and retrieve an array of JavaScript objects in localStorage and parsing the data

I'm dealing with an array of JavaScript objects, like this: var objectList = [{phone: true},{name: 'room'}]. My goal is to store this array in localStorage, retrieve it later, and continue working with the objects it contains. Here is what ...

Transform a dynamic list object in a form into JSON using javascript

I have been using a form submission script that converts form inputs to JSON and submits with ajax. It has worked well for simple forms in the past, but I am encountering an issue when trying to use it for lists. Within the form, there is a dynamic list o ...

Issues with Dependency Injection in Angular.js

I've been working on Dependency Injection and trying to make my code more modular in Angular.js. After researching some tutorials, I decided to try and rewrite it. Here's what I initially planned (although I may have misunderstood some concepts, ...

Utilizing the Twitter API 1.1 to retrieve a list of tweets

As I work on updating my CMS component, I am incorporating integration with the Twitter API to fetch and showcase a list of tweets related to a user or search query. I have chosen to utilize the Twitter Restful API v1.1 as the 1.0 version is set to be disc ...

unable to update state with data retrieved from API

Having some trouble updating the state of my component with data from a fetch request. Although I can see the data when I console.log, for some reason it's not being set properly in the state. Not sure what the issue could be. If this is a beginner mi ...

Angular - remove elements from an array within a directive when encountering a source error

If an image does not exist, I need to remove the item and push the next one inside ng-repeat. Currently, I am using a custom directive called "noImage". myApp.directive("noImage", function() { return { link: function(scope, element, attrs) { ...

Why is my MySQL query not returning the most recent results when using setInterval()?

I am currently facing an issue with the setInterval function within the $(document).ready(function(){} My approach involves using setInterval to call a PHP script that executes MySQL queries to check the status of 4 switches and then updating the screen w ...

Determine the Color of Text Component in React

I have a Link component and I am trying to determine the color of the text in React. How can I achieve this? In Vanilla JS, you can usually find the color using element.style.color. However, when I attempt something similar with the following code using t ...

Maximum opacity in Three.js fog

My Current Endeavor: I am in the process of developing a lightweight GIS application with topography. One feature I want to implement is atmosphere haze. The Code I'm Working With: (Please bear with me as I have multiple scenes) fogColor = new T ...

When focusing on a textfield, the background remains the same color and does not change

Hey there! I have a question about changing background color when clicking on a text field. I followed the code below but it doesn't seem to be working for me. Can someone help me figure out what's wrong? //jQuery $(function() { $('inp ...