Change the behavior of a submit button to trigger a custom JavaScript function instead

Question

Change the behavior of a submit button to trigger a custom JavaScript function instead

I am faced with a challenge where I need to override the default functionality of a button in code that cannot be altered. Instead, I must ensure that when the button is clicked, a custom JavaScript method is called rather than submitting the form as it normally would.

To accomplish this task, I am required to use JavaScript injection within an AIR desktop application that utilizes the Twitter API.

Is there anyone who can provide assistance with this issue?

<body>
<form><fieldset class="buttons">
           <input class="submit button" id="cancel" name="cancel" type="submit" value="Cancel" />
</fieldset>
</form>
<body>

javascript form-submit code-injection submit-button

Answer 1

Answer №1

To prevent a form from submitting simply by overriding the click function may not be sufficient. Users can still submit the form using Ctrl+Enter.

You can achieve this functionality by following the steps outlined in this JSFiddle demo.

First, locate the form assuming you have knowledge of the button id.

function getForm(id) {

     var button = document.getElementById(id);

     while(button && 
          (button = button.parentNode) && 
          (button.nodeName !== 'FORM')){}

     return button;
}

Next, add a 'submit' event listener to the form.

var form = getForm('cancel'),
    handler = function(ev){
    ev = ev || window.event;
    if(ev.preventDefault) { //for modern browsers
        ev.preventDefault();    
    }
    else { //for old Internet Explorer versions
        ev.returnValue = false;    
    }
    alert('Custom logic goes here!'); 
};
if(form) {
    if(form.addEventListener) {
       form.addEventListener('submit', handler, false)   
    }
    else if(form.attachEvent) {
       form.attachEvent('onsubmit', handler);   
    }    
}

Answer 2

To prevent a form from submitting simply by overriding the click function may not be sufficient. Users can still submit the form using Ctrl+Enter.

You can achieve this functionality by following the steps outlined in this JSFiddle demo.

First, locate the form assuming you have knowledge of the button id.

function getForm(id) {

     var button = document.getElementById(id);

     while(button && 
          (button = button.parentNode) && 
          (button.nodeName !== 'FORM')){}

     return button;
}

Next, add a 'submit' event listener to the form.

var form = getForm('cancel'),
    handler = function(ev){
    ev = ev || window.event;
    if(ev.preventDefault) { //for modern browsers
        ev.preventDefault();    
    }
    else { //for old Internet Explorer versions
        ev.returnValue = false;    
    }
    alert('Custom logic goes here!'); 
};
if(form) {
    if(form.addEventListener) {
       form.addEventListener('submit', handler, false)   
    }
    else if(form.attachEvent) {
       form.attachEvent('onsubmit', handler);   
    }    
}

Answer 3

Answer №2

Swap it using JavaScript with a new button that triggers your custom function

document.getElementById('cancel').parentNode.innerHTML = '<input type="button" onClick="onClickFunc()" value="swap">';
window.onClickFunc = function() { alert('Button clicked!'); return false; }

http://jsfiddle.net/p4dwq/

Answer 4

Swap it using JavaScript with a new button that triggers your custom function

document.getElementById('cancel').parentNode.innerHTML = '<input type="button" onClick="onClickFunc()" value="swap">';
window.onClickFunc = function() { alert('Button clicked!'); return false; }

http://jsfiddle.net/p4dwq/

Change the behavior of a submit button to trigger a custom JavaScript function instead

Answer №1

Answer №2

Similar questions

Exploring Ngrx: Leveraging a single selector to choose multiple property modifications

Updating contact list to a database table structure

When using Angular $http.post, encountering issues with the 'Access-Control-Allow-Origin' header

Transferring PHP array to JavaScript with the help of AJAX

Retrieve and utilize the dynamically produced values from the application's app.js in a script that is accessed using

The code is functioning properly, however it is returning the following error: Anticipated either

Code in Javascript that performs a check for pre-order traversal

Creating a two-dimensional canvas within a div element using the console

Can you guide me on utilizing filter in an Apps Script array to retrieve solely the row containing a particular user ID within the cell?

The functionality of document.elementFromPoint(x, y) seems to be faulty in accurately identifying child elements

Why does the implementation of my interface differ from what is specified in the TypeScript documentation?

Subdomain for an Ajax request

The value on the input of a custom Vue component does not update as expected when using v

Saving Selected Radio button values into Jquery Array

Error encountered: The JSON format provided for Spotify Web-API & Transfer User's Playback is invalid

Express encountered an issue when trying to upload a file through AngularJS

transforming a div to behave similarly to an iframe

I need to confirm the validity of minDate and maxDate in a ReactJS component, ensuring that maxDate is always at least 5 years after min

Error: Missing semicolon at line 1005 in Vue computed function. Vetur is indicating this issue

I've been stuck on this for the past hour, trying to figure out why /js/bootstrap.min.js can't be located