Javascript Question posted in
A very good W3school tutorial can be found here.

Php Form With Multiple Submit Buttons – Getting ID of Submit Button That is Clicked – Javascript

I have a php / html form with 4 submit buttons for a POST operation.
The form uses the BootBox modal dialog as a replacement for the vanilla javascript confirm dialog.
I have an issue with javascript and getting the id of the button that
is clicked.

The code for the form is as follows;

  <form  id="pageFormMultiSubmit" action="process.php"  method="post" >

         <!-- several display / input fields -->

         <! -- submit buttons -->

  </form>

The code for the submit buttons are as follows;

  <button type="submit" class="btn" id="button_submit1" name="viewUser"        
          title="View User" >View Info</button>

  <button type="submit" class="btn" id="button_submit2" name="editUser"        
          title="Edit User" >Edit Info</button>

  <button type="submit" class="btn" id="button_submit3" name="delUser"              
          title="Delete User" >Delete Info</button>

  <button type="submit" class="btn" id="button_submit4" name="resetPwdUser"    
          title="Reset Password" >Reset Passwd</button>

The Javascript code is as follows;

  const formMultiSubmit = document.getElementById('pageFormMultiSubmit');      

  if( formMultiSubmit ){

      let formHandledMS = false;

      formMultiSubmit.addEventListener('submit', event  => {

          let btn = document.getElementById(event.target.id);

          // console.log("Event Target ID : ", event.target.id );

          if( !formHandledMS ) {

              event.preventDefault();

              bootbox.confirm({

                 size: 'small', centerVertical: true,
                 message: 'Proceed With Action?',
                 callback : function(result) {

                     if( result ) {

                         formHandledMS = true;

                         if ( btn ){ 

                              btn.click();
                         }            

                     } else {

                         formHandledMS = false;
                     }
                 }

              }); // end bootbox.confirm

          } // end of if !formHandledMS


      }); //end of formMultiSubmit.addEventListener


  } //end of if formMultiSubmit

console.log("Event Target ID : ", event.target.id ) gives the ID of the form pageFormMultiSubmit
instead of the button that is clicked.

Any idea how I can get the id of the button and proceed
with btn.click() ?

Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved.

    Changed in the above code.

    let btn = document.getElementById(event.target.id)

    to

    let btn = document.getElementById(event.submitter.id)

    Thanks guys / @hedfol ( I have accepted your answer )


  2. 0

    There is a submitter property containing an element that sent the SubmitEvent.

    document.getElementById('pageFormMultiSubmit').addEventListener('submit', event => {
  const btn = event.submitter;
  if (btn) {
    console.log('Form submitted with button ID: "' + btn.id + '"');
    btn.click();
  }
  event.preventDefault();
});

document.querySelectorAll('button').forEach(btn => btn.addEventListener('click', event => {
  console.log('t' + event.target.innerText + ' clicked at', Date.now());
}));
    <form id="pageFormMultiSubmit">

  <button type="submit" class="btn" id="button_submit1" name="viewUser" title="View User">View Info</button>

  <button type="submit" class="btn" id="button_submit2" name="editUser" title="Edit User">Edit Info</button>

  <button type="submit" class="btn" id="button_submit3" name="delUser" title="Delete User">Delete Info</button>

  <button type="submit" class="btn" id="button_submit4" name="resetPwdUser" title="Reset Password">Reset Passwd</button>

</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search