Get the input value from a dialog in JavaScript

Description

The following code shows how to get the input value from a dialog.

Example


<!--  w  w w.  j av a  2s .c  om-->


<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.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>

Click to view the demo

The code above generates the following result.

Get the input value from a dialog in JavaScript