asked on 12/10/2015

Popup window upon selecting dropdown option

Hi Experts,
The code below opens an alert when "Approved" is selected in the dropdown.
Instead of the alert I would like another window to be opened, because I'd like to place a longer, formatted message, and the alert is not sufficient for this goal.
The popup window should have an OK button which will close the popup, before the Submit button can be clicked.
I would appreciate your help.

<html>
<head>
<title></title>
      <script type="text/javascript">
         <!--
       function onLoad() {
            document.getElementById("status").onchange = confirmApproved;
       }

       function confirmApproved() {

	  var e = document.getElementById("status");
	  if (e.options[e.selectedIndex].value == "Approved") {
	    if (confirm("Please read the terms and conditions and click OK! More text....")) {
	      // do soemthine
	    } else {
	      // don't do it
	    }
      }
}
         //-->
      </script>
</head>
<body onload="onLoad()">

<form name="editor" method="post" action="Send.asp">
  <select id="status" name="Status" onchange="confirmApproved">
    <option value=""></option>
    <option value="Pending Approval">Pending Approval</option>
    <option value="Approved">Approved</option>
    <option value="Disapproved">Disapproved</option>
  </select>

  <input type="Submit" name="Submit" value="Submit" />
</form>

</body>
</html>

Last Comment

12/10/2015

12/10/2015

Hi,
the quickest one would be the usage of jQuery and jQuery UI.

Demo here: jQuery UI Modal Dialog Message

The div containing the dialog text contains plain HTML therefore you can write and style however you want.

KR
Rainer

Stefan Motz

12/10/2015

ASKER

This would be nice, but how can I make it appear only when the "Approved" option is selected?

ASKER CERTIFIED SOLUTION

Member_2_248744

12/10/2015

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Rainer Jeschor

12/10/2015

Hi,
here we go with a live sample:
Sample Modal Dialog confirmation

I added some code to disable / enable the submit button depending on the select value and on the confirmation response.

Code:

<!DOCTYPE html>
<html>

  <head>
    <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      $(document).ready(function() {
        $("#status").change(function() {
          if ($(this).val() == "Approved") {
            $( "#msgPopup" ).dialog({
              resizable: false,
              height:340,
              modal: true,
              buttons: {
                "Agree": function() {
                  $('input[type="submit"]').prop('disabled', false);
                  $( this ).dialog( "close" );
                },
                Cancel: function() {
                  $('input[type="submit"]').prop('disabled', true);
                  $( this ).dialog( "close" );
                }
              }
            });
          } else {
            // Enable submit button again
            $('input[type="submit"]').prop('disabled', false);
          }
        });
      });
    </script>
  </head>

  <body>
    <h1>EE Q</h1>
    
    <form name="editor" method="post" action="Send.asp">
      <select id="status" name="Status">
        <option value=""></option>
        <option value="Pending Approval">Pending Approval</option>
        <option value="Approved">Approved</option>
        <option value="Disapproved">Disapproved</option>
      </select>
      <input type="Submit" name="Submit" value="Submit" />
    </form>
    <div id="msgPopup" title="Just a demo modal message" style="display:none">
      <p>
        <span style="color:red;font-weight:bold">Experts-Exchange Confirm</span><br/><br/>
        <span>Do you agree that this is a viable solution?</span>
      </p>
    </div>
  </body>
</html>

Open in new window

HTH
Rainer

Stefan Motz

12/10/2015

ASKER

I really like this, thank you very much for your help!

Stefan Motz

12/10/2015

ASKER

Sorry, I closed the question before I noticed Rainer's second reply. It's a great solution Rainer, thank you so much.