asked on

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>

Open in new window

Rainer Jeschor

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

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

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Rainer Jeschor

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

ASKER

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

Stefan Motz

ASKER

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