Sunday, March 20, 2011

JQuery Dialog Box capture input

JQuery Dialog Box capture input

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
   <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        var cancel = function() {
            $("#myDialog").dialog("close");
        }
        var getResponse = function(){
          var answer;
          $("input").each(function(){
            (this.checked == true) ? answer = $(this).val() : null;
          });
          $("<p>").text(answer).insertAfter($("#poll"));
          $("#myDialog").dialog("close");
        }
        var dialogOpts = {
          modal: true,
          buttons: {
            "Done": getResponse,
            "Cancel": cancel
          },
          autoOpen: false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#poll").click(function() {
          $("#myDialog").dialog("open");
        }); 
    });
  </script>
</head>
<body>
    <button id="poll">Poll</button>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
    </div>
</body>
</html>