Multiple Button one Function.

Ask the community
,
1

Good Day! I want to do the same thing when button1 is clicked. So I have to write the same function again for button2 and button3.

function validateFields(e) {
code here;
}

$(function() {
$(‘#button1’).click(validateFields);
$(‘#button2’).click(validateFields);
$(‘#button3’).click(validateFields);
});

2

Hi! Yes, sure it’s possible, almost in the way you describe it. You can also do this with export function, where you execute this one-for-all function

What are the troubles you experience?

3

How do I execute a one for all function?

For example, I have a page with many text links, image links and button links. Whenever any of them is clicked on this page, I would like the event to be tracked (using a wixWindow trackevent bit of code to send a signal to a Facebook pixel).

It’s painful installing an event handler code for every element on this page…I am sure there must be one bit of code that does the job for ALL clicks on this page.

Would you be able to help, please?

Thanks,
Naresh

4

Hi Naresh,
You can create an array of all IDs and use forEach loop to add an event listener to each event. Here’s an example to better explain what I was referring:

$w.onReady(function () {

   let buttonsIds= ['idElement1', 'idElement2', 'idElement3'];
   buttonsIds.forEach((idElem)=>{
      $w(`#${idElem}`).onClick(()=>{
         validateFields();
      });
   });
});

I hope it’s clear.

Have a good day,
Tal.

5

I couldn’t get this code to work for all the elements on the age. I may be doing the {idElem} part incorrectly?


$w.onReady(function () { 

 let buttonsIds= ['checkbox1', 'input1', 'uploadButton1', 'checkbox2', 'input2', 'uploadButton2', 'checkbox3', 'input3', 'uploadButton3', 'checkbox4', 'input4', 'uploadButton4',
 'checkbox5', 'input5', 'uploadButton5', 'checkbox6', 'input6', 'uploadButton6', 'checkbox7', 'input7', 'uploadButton7', 'checkbox8', 'input8', 'uploadButton8', 
 'checkbox9', 'input9', 'uploadButton9', 'checkbox10', 'input10', 'uploadButton10'];
   
 buttonsIds.forEach(()=>{
      $w(`#${buttonsIds}`).onClick(()=>{
         $w("#redSave").show();
      });
   });
6

Here’s a quickie example that I tested:

let buttonIDs = ['#button1', '#button2', '#button3'];
buttonIDs.forEach((button) => {
    $w(button).onClick((event, $w) => {
        console.log('button', event.target.id);
    })
})

You can also get all buttons on the page like this:

let buttonElements = $w("Button");

Then loop through the buttonElements array.

You can also directly add an event handler to all of the buttons on the page at once:

$w("Button").onClick((event, $w) => {
    console.log('button', event.target.id);
})

I hope this helps. Good luck.

7

If you want to add a specific set of buttons that you have added consecutively and they are named “button1”, “button2”, etc. you can use a for loop, like so:

**let**  tableButtons  = []; 
**for(let**  i  =  20 ;  i <= 41 ;  i ++){ 
    tableButtons . push($w ( "#button"  +  i )); 
} 
console . log ( tableButtons );