Javascript function inside Bootbox jquery

Question

Hi how I can call a function in a bootbox jquery?

This is an example, at select name="Status" I would if possible call a function that shows and hides tr of table called in html_form var. How would I do that?

function ChangeStatusDossier(UtenteCreatore) {
    var html_form = '<form name="ChangeStatusDossier" id="ChangeStatusDossier" class="ChangeStatusDossier"><table><tr><th colspan="2"><h2 class="blue">Change Dossier Status</h2></th></tr><tr><td><strong>Choose status   </strong>&nbsp;&nbsp;</td><td><select name="Status" onchange="Show(this.value);"><option value="0">Under process</option><option value="1">Under collection</option><option value="2">Cargo collected</option><option value="159">In Warehouse</option><option value="1485">To Destination</option></select></td></tr><tr id ="HubChoose" style="display:none;"><td>Choose hub</td><td><select name="Hub"><option>HUB MILANO</option></select></td></tr><input type="hidden" name="UtenteCreatore" value="' + UtenteCreatore + '"></table><form>';
    bootbox.confirm(html_form, function (result) {
        if (result) {
            $('#ChangeStatusDossier').submit();
        }
    });
    function Show(value) {
        if (value == "159") {
            $("#HubChoose").show();
        }
    }
}

Answer 1

In your case it's better to use the dialog method instead of confirm.

Here's how you could do that:

function ShowHub(value) {
  if (value == "159") {
    $("#HubChoose").show();
  }
  else {
    $("#HubChoose").hide();
  }
}

jQuery("#default").on("click", function() {
  bootbox.dialog({
    title: "This is a form in a modal.",
    message:
'<form class="ChangeStatusDossier" id="ChangeStatusDossier" name="ChangeStatusDossier">' +
    '<input name="UtenteCreatore" type="hidden" value="' + UtenteCreatore + '">' +
    '<table>' +
        '<tr>' +
            '<th colspan="2">' +
                '<h2 class="blue">Change Dossier Status</h2>' +
            '</th>' +
        '</tr>' +
        '<tr>' +
            '<td><strong>Choose status</strong> &nbsp;&nbsp;</td>' +
            '<td><select name="Status" onchange="ShowHub(this.value);">' +
                '<option value="0">' +
                    'Under process' +
                '</option>' +
                '<option value="1">' +
                    'Under collection' +
                '</option>' +
                '<option value="2">' +
                    'Cargo collected' +
                '</option>' +
                '<option value="159">' +
                    'In Warehouse' +
                '</option>' +
                '<option value="1485">' +
                    'To Destination' +
                '</option>' +
            '</select></td>' +
        '</tr>' +
        '<tr id="HubChoose" style="display:none;">' +
            '<td>Choose hub</td>' +
            '<td><select name="Hub">' +
                '<option>' +
                    'HUB MILANO' +
                '</option>' +
            '</select></td>' +
        '</tr>' +
    '</table>' +
'</form>',
    buttons: {
      success: {
        label: "Submit",
        className: "btn-success",
        callback: function () {
            $('#ChangeStatusDossier').submit();
          showResult("Form submitted!");
        }
      },
    cancel: {
      label: "Cancel",
      className: "btn-danger",
      callback: function() {
        showResult("Canceled!");
      }
    }
   } // buttons
  }); // dialog
});


function showResult(result) {
  if (typeof result !== "undefined" && result !== null) {
    console.log(result);
  }
}

Here's a working DEMO