We help IT Professionals succeed at work.

Popup window upon selecting dropdown option

Stefan Motz
Stefan Motz asked
on
196 Views
Last Modified: 2015-12-10
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

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2013
Awarded 2012

Commented:
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 MotzIT Developer

Author

Commented:
This would be nice, but how can I make it appear only when the "Approved" option is selected?
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2013
Awarded 2012

Commented:
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 MotzIT Developer

Author

Commented:
I really like this, thank you very much for your help!
Stefan MotzIT Developer

Author

Commented:
Sorry, I closed the question before I noticed Rainer's second reply. It's a great solution Rainer, thank you so much.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.