一个按钮触发另一个按钮单击事件

Question

I'd like two submit buttons on a form i have my team building, one above the fold, and one below. I'm getting complaints from my tech team about adding it because it requires some server side coding to make sure the user doesn't click it more than once. Apparently they have it one button, but to add that validation to two would be a problem.

Can you not just call the button the same thing, with the same ID and wouldn't the form treat it as one button?

Another option I thought would be for new button to fire a click even on the other button. Then they still have one click even for the form, but I get my two buttons. How would I write that?

Thanks, Adma

Answer 1

I'm only familiar with ASP.net and C# buttons, but using C# you could wire two different buttons to the same click event handler. You could also do it client side by triggering the primary buttons click event with your secondary button. Here's a VERY simple example:

HTML

<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" 
       id="secondaryButton" 
       onclick="document.getElementById('primaryButton').click()" />

Answer 2

<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" id="secondaryButton"/>

$('#secondaryButton').click(function(){
    $("#primaryButton").click();
})

Answer 3

If you want to use vanillaJS to do this... here is a generic very long way (with functions for both to be clear what is happening).

html

<input type="button" id="primaryButton" />
<input type="button" id="secondaryButton"/>

script

const primary = document.getElementById('primaryButton');
const secondary = document.getElementById('secondaryButton');

function somePrimaryAction(e){
  e.preventDefault();
  console.log('you clicked the primary button');
}

function clickPrimaryButton(e){
  e.preventDefault();
  console.log('you clicked the secondary button');
  primary.click();
}

primary.addEventListener("click", somePrimaryAction, false);
secondary.addEventListener("click", clickPrimaryButton, false);