Bootbox.confirm working ( replacing javascript confirm ) for form submmission but submit button name and value missing from php post array

[marcoczen]

Guys,

I have successfully replaced the javascript confirm popups with bootbox confirm ( better cosmetics) with the following code for a confirmation dialog for form submissions;

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

    if( form ){

        form.addEventListener('submit', event  => {
          event.preventDefault();

          bootbox.confirm({ size: 'small', message: 'Proceed With Update ?',
                            callback :function(result) {
                                         if(result) {
                                           form.submit();
                                         }
                                      }

          }); // end bootbox.confirm

          return false;

        }); //end of form.addEventListener

    } // end of if form

But previously when I submitted the php/html form via with a plain javascript confirm box, I can get the submit button name and value in the php post array. But with bootbox.confirm - I cant !

The only difference i can see is that with bootbox, i had to give the form an id='pageForm1' to act on the form. Previously, the ' button type="submit" ' was enough to submit the form.

Pls note that the button is within the form tags and not outside. Form code snippet is shown below;

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

         <div class="form-group form-row ">
              <div class="col-sm-4 text-white">
                   <label class="col-form-label" for="inputUserEmail1" >Email 1</label>
              </div>
              <div class="col-sm-6 col-lg-4 ">
                   <input class="form-control text_black" type="email" value="<?= misc::esc($data['user_email1']); ?>"
                          name="inputUserEmail1" id="inputUserEmail1" title="User Email1"    
                          autocomplete="on" placeholder="Enter User Email1" required >

              </div>
         </div>

         <div class="form-group form-row ">
              <div class="col-sm-4 text-white">
                   <label class="col-form-label" for="inputUserEmail2" >Email 2</label>
              </div>
              <div class="col-sm-6 col-lg-4 ">
                   <input class="form-control text_black" type="email" value="<?= misc::esc($data['user_email2']); ?>"
                          name="inputUserEmail2" id="inputUserEmail2" title="User Email2"  
                          autocomplete="on" placeholder="Enter User Email2"  >

              </div>
         </div>

  <button type="submit" class="btn-dark btn_custom btn_round_sm" name="button_editOthers" value="submit_newOthers"
          title="Submit - New Details" >Submit</button>  

So, is there something else i must do in bootbox.confirm to capture the submit button name / value into the POST array ? I am using the button name and value to check if the form is posted / submitted.

Pls advise.

[tiesont]

If I'm understanding your use case correctly, then the button isn't included in the form value because it's no longer the triggering element. I think you're after something like this:

let formHandled = false;

const form = document.getElementById('pageForm1');
const btn = document.getElementsByName('button_editOthers')[0];

if( form ){
    form.addEventListener('submit', event  => {
        if(!formHandled) {
            event.preventDefault();

            bootbox.confirm({ 
                size: 'small', 
                message: 'Proceed With Update?',
                callback : function(result) {
                    if(result) {
                        formHandled = true;
                        btn.click();
                    }
                    else {
                        formHandled = false;
                    }
                }
            }); // end bootbox.confirm

            return false;
        }
    }); //end of form.addEventListener
} // end of if form

Basically, you still capture the form's submit event, but rather than re-triggering that submit event via JavaScript, you trigger the submit button's click event again. That should preserve the button as the triggering element and therefore include it in the form submission. I've added a sentinel variable so that you only process this event the first time - if the user already approved the form submission, then everything is allowed to proceed as normal with the subsequent form submission.

[marcoczen]

Hi. Sorry - was stuck with a family thing. Will try your code and revert. I basically thought that everything within the form tags will be submitted when the button was clicked - no exceptions.

[tiesont]

Hi. Sorry - was stuck with a family thing. Will try your code and revert. I basically thought that everything with the form tags will be submitted when the button was clicked - no exceptions.

Most form elements, yes, but not buttons - only if they have a name attribute and are the triggering element.

[marcoczen]

Hi. Sorry - was stuck with a family thing. Will try your code and revert. I basically thought that everything with the form tags will be submitted when the button was clicked - no exceptions.

Most form elements, yes, but not buttons - only if they have a name attribute and are the triggering element.

Thanks. Oh man .. .where do you learn these things from ? Hahahaha ...

[tarlepp]

Thanks. Oh man .. .where do you learn these things form ? Hahahaha ...

most likely just by doing web dev for some time...

[tiesont]

Thanks. Oh man .. .where do you learn these things form ? Hahahaha ...

most likely just by doing web dev for some time...

Well, that, and reading the docs 😆: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name

The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.

[marcoczen]

If I'm understanding your use case correctly, then the button isn't included in the form value because it's no longer the triggering element. I think you're after something like this:

let formHandled = false;

const form = document.getElementById('pageForm1');
const btn = document.getElementsByName('button_editOthers')[0];

if( form ){
    form.addEventListener('submit', event  => {
        if(!formHandled) {
            event.preventDefault();

            bootbox.confirm({ 
                size: 'small', 
                message: 'Proceed With Update?',
                callback : function(result) {
                    if(result) {
                        formHandled = true;
                        btn.click();
                    }
                    else {
                        formHandled = false;
                    }
                }
            }); // end bootbox.confirm

            return false;
        }
    }); //end of form.addEventListener
} // end of if form

Basically, you still capture the form's submit event, but rather than re-triggering that submit event via JavaScript, you trigger the submit button's click event again. That should preserve the button as the triggering element and therefore include it in the form submission. I've added a sentinel variable so that you only process this event the first time - if the user already approved the form submission, then everything is allowed to proceed as normal with the subsequent form submission.

Thanks @tiesont . Your code worked flawlessy !!!

[marcoczen]

Most form elements, yes, but not buttons - only if they have a name attribute and are the triggering element.

Just wondering - in retrospect - since the form submission was triggered by a user clicking the submit button ( button is of type 'submit' and it has a 'name' and 'value' - as shown in the code above - shouldnt it have appeared in the POST array since it fulfilled the 2 criteria you mentioned ?

 <button type="submit" class="btn-dark btn_custom btn_round_sm" name="button_editOthers"   
               value="submit_newOthers"    title="Submit - New Details" >Submit</button>  

[tiesont]

Most form elements, yes, but not buttons - only if they have a name attribute and are the triggering element.

Just wondering - in retrospect - since the form submission was triggered by a user clicking the submit button ( button is of type 'submit' and it has a 'name' and 'value' - as shown in the code above - shouldnt it have appeared in the POST array since it fulfilled the 2 criteria you mentioned ?

 <button type="submit" class="btn-dark btn_custom btn_round_sm" name="button_editOthers"   
               value="submit_newOthers"    title="Submit - New Details" >Submit</button>  

No. The preventDefault() cancels the original event. Then your form.submit() causes a new submit event, where the button is no longer the trigger/origin of the event.

[marcoczen]

Noted ... Thanks ....