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

Create a customized MUI select component with a label, all without the need for assigning an

Guidelines for incorporating Context API in Material UI

Is it possible to receive a unique value error even when providing the correct key value in a map?

Discover the steps for dynamically integrating ionRangeSliders into your project

Tips on incorporating a fresh item into a expansive tree view using a recurring function or action - specifically geared towards the MUI React JS Tree View component

Error message: Unable to access $controller with AngularJS and Karma

Tips for dynamically populating a mat-table dataSource

What is the best way to apply a CSS class to my anchor tag using JavaScript?

Bootstrap form toggle switch component for ReactJS

ReactJS and JavaScript offer a convenient solution for extracting the most recent date from an array of date fields during the selection process

Toggle between a list view and grid view for viewing photos in a gallery with a

Uploading a file to a .NET Framework API Controller using React

Determine the number of days without including weekends and holidays using JavaScript

incapable of utilizing the $q library and promises

Is there a way to update an array within my class and access its updated output from outside the class?

Is there a way to display the JavaScript widget exclusively on the homepage or main page

Something strange happening with the HTML received after making a jQuery AJAX request

It seems like KineticJS is removing elements from the canvas that I would prefer to keep

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click

Tips for extracting a specific attribute from an array of objects using both react and JavaScript while considering various conditions