bootbox.confirm - php form with 4 submit buttons

[marcoczen]

Guys,

Background :

I have succesfully used bootbox.confirm to replace
the default javascript confirm in a single php/html form ( with single submit button )
with help from a forum member here.

Now :

I have a single form ( php + html ) ( as above ) but however with 4 submit buttons.

: The php/html form code is a below ( with 4 submit buttons ) :

  <form  id="pageForm1" class="" action="user.php?goto=info_view"  method="post"
         enctype="application/x-www-form-urlencoded" accept-charset="utf-8"  >

      <!-- many     input fields -->

      <div class="row">

           <div class="col-12 text-center">

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

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

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

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


          </div>

      </div>

  </form> ``

: The JS Code ( how do I modify bootbox.confirm to work with 4 submit buttons ) is as below :

document.addEventListener('DOMContentLoaded', function () {

      let formHandled1 = false;

      const form1 = document.getElementById('pageForm1');
      const btn1  = document.getElementById('button_submit1');
      const btn2  = document.getElementById('button_submit2');
      const btn3  = document.getElementById('button_submit3');
      const btn4  = document.getElementById('button_submit4');

      if( form1 ){

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

              if( !formHandled1 ) {
                  event.preventDefault();

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

                              formHandled1 = true;

                              if ( btn1  ){
                                   
                                   btn1.click();

                              } else if ( btn2  ){
                                   
                                   btn2.click();

                              } else if ( btn3 ){

                                   btn3.click();

                              } else if ( btn4  ){

                                   btn4.click();

                              }   
                             
                          } else {

                              formHandled1 = false;

                          }
                      }
                  }); // end bootbox.confirm

                  return false;

              }// end of if( !formHandled1 )

          }); //end of form1.addEventListener

      } // end of if form1



    });
    // end document DOMContentLoaded

Question :

How do I get 4 submit buttons( only 1 button will be used at a time ) to work with bootbox.confirm ?

[tiesont]

I've moved your question into a Discussion - please only use the Issues tab to report problems with the library.

[marcoczen]

Thank u.

[tiesont]

event.submitter will tell you which element triggered the submit event which you are handling. So, something like this should be enough:

document.addEventListener('DOMContentLoaded', function () {
    let formHandled = false;

    const form1 = document.getElementById('pageForm1');

    if( form1 ){
        form1.addEventListener('submit', event  => {
            let btn = document.getElementById(event.submitter.id);

            if( !formHandled ) {
                event.preventDefault();

                bootbox.confirm({
                    size: 'small', centerVertical: true,
                    message: 'Proceed With Action?',
                    callback : function(result) {
                        if( result ) {
                            formHandled = true;

                            if ( btn ){                            
                               btn.click();
                          }                          
                        } else {
                            formHandled = false;
                        }
                    }
                }); // end bootbox.confirm

                return false;
            }// end of if( !formHandled )

        }); //end of form1.addEventListener
    } // end of if form1
});

You don't need to track the individual buttons - event.submitter.id will get the ID of the triggering button, which you can use to get a DOM reference as needed.

See https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter and this jsFiddle: https://jsfiddle.net/70gsytnz/3/

[marcoczen]

Sorry - It did not work. Clicking 'Ok' does not submit the form.

To troubleshoot, I commmented out btn.click() as below;

// btn.click()

And inserted ;

console.log("FormHandled : " + formHandled );
console.log("Form1 : "        + form1 );
console.log("Button : "      + btn );

And got;

FormHandled : true
Form1 : [object HTMLFormElement]
Button : [object HTMLFormElement]

But the form is not submitted.

So is the issue with btn.click(); ? ( besides me being weak in front end work ;-| )

Is there any argument that i need to supply with btn.click(); / bootbox.confirm to make it submit the form after I click Ok in the BootBox Modal Dialog as I am using 4 buttons of type submit ?

[marcoczen]

Update 1: Interestingly I used the above suggested code block with an existing form ( that is working and uses bootbox.confirm ) with a single submit button and it did not work as well.

[marcoczen]

Update 2 : I notice that

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

But it should give the id of the button for bootbox.confirm / form submission to work ?

[tiesont]

From the docs, that's what I was assuming, but... thinking about it, the event you're handling is the form's submit event. So, while a button is the logical trigger for the submit event, from the event object's perspective, it's the form itself which raised the event. So... my suggestion probably doesn't work as-is.

To be honest, this isn't really a Bootbox "problem", but I'll spend a little bit of time and see if I can come up with a better suggestion.

[tiesont]

Okay, looks like you want event.submitter.id - that will get you the correct reference to the submitting button

[marcoczen]

Testing ...

[marcoczen]

WORKING !!!!!! Thanks .... So with yr kind assistance, we have BootBox confirm working as a replacement for javascript confirm in several scenarios.