Ndtyjky

I am trying to do the following.

I have 3 buttons, "Continue", "Delete", "New". All of these are type "submit" buttons.

When the form is posted, the value of these buttons is used to determine what happens on the backend.

I want a Sweetalert popup to confirm if the user wants to delete, then when the OK button is hit, the form should progress and submit to the backend.

The issue I currently have is that there is no way to get the value of the submit button to the server side when I incorporate Sweetalert to show when I hit the submit button.

Scenario A) For example, if I remove the "e.preventDefault" from the callback, the alert popups for a brief second but the form submits, not giving the user to confirm or cancel the deletion. This is not correct behaviour, but the "submit" button value does indeed get posted to the server. So to prevent the quick popup issue, I add "e.preventDefault" to stop the normal behaviour of "submit" button.

Scenario B) However, when I have the code as below (i.e. "e.preventDefault" added to the code), the form does not submit after validation. Instead I have to run "$('#myForm').submit()". But when I do this, the value of the "submit" button does not get posted to the server.

If someone could kindly guide me on how I can use jQuery Validate and Sweetalert, it would be much appreciated.

An example of the set up looks like this:

HTML:

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>





<form id="myForm" action="/postHere" method="post">        

   <!-- Options-->

 <div class="row-select"> 

   <label for="options">My Options</label> 

    <select name="options" id="options">

      <option disabled="true" selected="selected">Select an Option</option>

      <option value="a">a</option>

      <option value="b">b</option>

    </select>

 </div>



  <!-- continue details form -->

  <div>

    <input type="submit" id="continue" name="submitButton" value="Continue this Option">            

  </div> 



  <!-- delete details -->

  <div>          

    <input class="delete" type="submit" id="delete" name="submitButton" value="Delete this Option">                      

  </div>



  <!-- new -->  

  <div class="row-spaced">        

    <input type="submit" id="submitButton" name="submitButton" value="Neither" formnovalidate>        

  </div>

</form> 

Javascript:

function myFunction() {

  var continueOption = document.getElementById('continue');

  var deleteOption = document.getElementById('delete');

  var neither = document.getElementById('new');



  $('#myForm').validate({

    ignore:'',

    rules: {

      options: "required"

    },



  });



  // AIM IS TO SHOW A CONFIRMATION BOX IF DELETE IS CLICKED

  if(deleteOption) {

    deleteOption.addEventListener("click", function(e) {

        e.preventDefault();

      swal({

        title: "Are you sure?",

        text: "Once deleted, you will not be able to recover this imaginary file!",

        buttons: true,

        dangerMode: true,

      })

      .then((willDelete) => {

        if (willDelete) {

            console.log("here");

          $('#myForm').submit();

        }

      }); 

    });  

  }  

}



myFunction();

Backend Illustration:

router.post("/postHERE", (req, res) => {

    if (req.body.submitButton == "Continue this Option") {

        // Do something CONTINUE

    }

    else if (req.body.submitButton == "Delete this Option") {

        // Do something DELETE

    }

    else {

       // Do something NEW

    }

}

JSFiddle:

JSFiddle Example

EDIT:

For the backend I am using Expressjs. I have added this in and fixed a type in the form method to be post.