Avatar of Stefan Motz
Stefan MotzFlag for United States of America 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

JavaScript

Avatar of undefined
Last Comment
Stefan Motz

8/22/2022 - Mon
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
ASKER
Stefan Motz

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER
Stefan Motz

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

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