jquery-confirm dialog content not updating on form change

Question

I am currently stuck with an issue with the jquery-confirm plugin where I am unable to dynamically alter the content.

What I wish to do is basically, list all the content of the form inputs that were populated inside the content of the jquery-confirm dialog box.

However, since the initialization of the jquery-confirm occurs in the document ready event, the content only retrieves the initial status of the form inputs.

Here's the code I am using

 $(document).ready(function() {
        $(".confirm").confirm({
            title: 'Submit the Form?',
            content: 'Form Select Value:' + $("#formSelect option:selected").text() +' <br />  Form Input Value: '+  $("#formInput").val() +' <br /> ',
            buttons: {
                formSubmit: {
                    text: 'Submit',
                    action: function () {
                        $('#myForm').submit();
                    }
                },
                cancel: function () {
                    //close
                }
            }

        }); 
});

The issue is that no matter what updates I make to the form input, the changes do not show inside the content of the jquery-confirm. The content always displays the initial state of the form inputs.

I have tried attaching the confirm initialization inside an on click even of the form button to try to capture the changes but it still doesn't help.

Can anyone show me how to properly bind the values of the form into the content of the jquery-confirm?

EDIT: (including a simplified version of the HTML form)

  <form id="myForm"  method="post" action="/processThisForm" >
      <select id="formSelect" name="formSelect" >
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
      </select>
      <input type="text" id="formInput" />
      <button class="confirm">Save</button>
   </form>

EDIT 2:

Created a jsfiddle for this code

https://jsfiddle.net/uxfb8myp/2/

Answer 1

Update your content field assignment with function as below.

content: function() { 
    return 'Form Select Value:' + $("#formSelect option:selected").text() +' <br />  Form Input Value: '+  $("#formInput").val() +' <br /> '
},

Your complete $(".confirm").confirm() should be as below.

$(document).ready(function() {
    $(".confirm").confirm({
        title: 'Submit the Form?',
        content: function() { 
            return 'Form Select Value:' + $("#formSelect option:selected").text() +' <br />  Form Input Value: '+  $("#formInput").val() +' <br /> '
        },
        buttons: {
            formSubmit: {
                text: 'Submit',
                action: function () {
                    $('#myForm').submit();
                }
            },
            cancel: function () {
                //close
            }
        }
    }); 
});