Getting values from Dialog Box

This code is from jQuery-ui demos.

I'm trying to get the value for the Textbox and Radio button selection. I get the alert value for Butter, because it is pre-checked. When I select one of the other two, I still get the pre-check selection.

Can someone help me with this? I start working with jQuery last week.

My alert for the radio check box is inside functions/buttons:

buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );

// Find result of Checked Box
var CheckBoxValue = $('#dialog :radio:checked').val();
alert(CheckBoxValue);

I've tried both

var textvalue = $('textarea#tab_content').val(); and
var textvalue = $('#tab_content').val();

alert(textvalue);

And the alert message is blank

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Simple manipulation</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.10.2.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
// #dialog label, #dialog input { display:block; }
// #dialog label { margin-top: 0.5em; }
// #dialog input, #dialog textarea { width: 95%; }
// #tabs { margin-top: 1em; }
// #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
// #add_tab { cursor: pointer; }
</style>
<script>
$(function() {
  var tabTitle = $( "#tab_title" ),
   tabContent = $( "#tab_content" ),
   tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
   tabCounter = 2;

var tabs = $( "#tabs" ).tabs();

  // modal dialog init: custom buttons and a "close" callback resetting the form inside
  var dialog = $( "#dialog" ).dialog({
   autoOpen: false,
   modal: true,
   buttons: {
    Add: function() {
     addTab();
     $( this ).dialog( "close" );

     // Find result of Checked Box
     var CheckBoxValue = $('#dialog :radio:checked').val();
     alert(CheckBoxValue);
    },
    Cancel: function() {
     $( this ).dialog( "close" );
    }
   },
   close: function() {
    form[ 0 ].reset();
   }
  });

  // addTab form: calls addTab function on submit and closes the dialog
  var form = dialog.find( "form" ).submit(function( event ) {
   addTab();
   dialog.dialog( "close" );
   event.preventDefault();
  });

  // actual addTab function: adds new tab using the input from the form above
  function addTab() {
   var label = tabTitle.val() || "Tab " + tabCounter,
    id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

   tabs.find( ".ui-tabs-nav" ).append( li );
   tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
   tabs.tabs( "refresh" );
   tabCounter++;
  }

  // addTab button: just opens the dialog
  $( "#add_tab" )
   .button()
   .click(function() {
    dialog.dialog( "open" );
   });

  // close icon: removing the tab on click
  tabs.delegate( "span.ui-icon-close", "click", function() {
   var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
   $( "#" + panelId ).remove();
   tabs.tabs( "refresh" );
  });

  tabs.bind( "keyup", function( event ) {
   if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
    var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    tabs.tabs( "refresh" );
   }
  });
});
</script>
</head>
<body>

<label for="tab_title">Title</label>
   <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /><BR><BR>
   <label for="tab_content">Content</label>
   <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea><BR>
    <input type="radio" name="gr" value="Milk" /> Milk
    <input type="radio" name="gr" value="Butter" checked="checked" /> Butter
    <input type="radio" name="gr" value="Cheese" /> Cheese

   </TR>
   </TABLE>

</fieldset>
</form>
</div>

<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus

auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut

dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>

<div class="demo-description">
<p>Simple tabs adding and removing.</p>
</div>
</body>
</html>

Topic Participants
bob_armstrong4
kbwood.au

Getting values from Dialog Box

Getting values from Dialog Box

Topic Participants

bob_armstrong4

kbwood.au