To retrieve the value from one dialog box and display it in another dialog

Question

I am having a dialog box which ask for your name and address and when you click ok button it opens another dialog where it should display the name and address.I have tried it using ajax post ,but nothing seems to work in the desired way.Please help me out.Thanks in advance. Here is what I have tried:

display.php:

<input type="button" id="dialog_open" name="dialog_open" value="dialog_open" ></input>

<form action = "" method="post">
    <div id="dialog"  title="Enter details" style="display:none" >
        Name :<input type="text" class="form-control input-sm" name="name" id="name" />
        Address: <textarea row="3" col="50" class="form-control input-sm" name="address" id="address" ></textarea>
    </div>
    <div id="show" title="welcome" style="display:none">
        <header style="text-align:center; font-size:20px; font-style:arial">
            <b><?php echo $_POST['keyname']; ?></b>
            <p style="text-align:left; font-size:14px">Address:<?php echo $_POST['keyadd']; ?></p>
        </header>
    </div>

my script code:

<script type="text/javascript">
    $(document).ready(function(){
        $('#dialog_open').click(function(){
            $('#dialog').dialog({
                buttons: {
                    "Yes" : function () {
                        $(this).dialog('close');
                        callback(true);    
                    },
                    "No" : function() {
                        $(this).dialog('close');   
                    }
                } 
            });

            function callback(value) {
                if (value) {
                    var name = $('#name').val();
                    var add = $('#address').val();
                    $.ajax({
                        type: 'post',
                        url: 'display.php', 
                        data: {keyname: com,keyadd: add},
                        success: function() {
                            alert("done");  
                        }
                    });

                    $('#show').dialog({
                        height:500,
                        width:800,
                        buttons:{
                            "OK":function(){
                                $(this).dialog('close');
                            },
                            "Cancel":function(){
                                $(this).dialog('close');
                            }
                        }
                    });
                }
            }

Answer 1

I think your callback data is wrong:

data: {keyname: com,keyadd: add}, -> data: {'keyname': name,'keyadd': add},

Try change this.

Answer 2

I hope you are looking for this-

     function callback(value) {
            if (value) {
                var name = $('#name').val();
                var add = $('#address').val();
                $.ajax({
                    type: 'post',
                    url: 'display.php', 
                    data: {keyname: name,keyadd: add},
                    success: function() {
                        alert("done");  
                         $("#show b").html("Name : "+name);
                         $("#show p").html("Address : "+add);
                    }
                });

                $('#show').dialog({
                    height:500,
                    width:800,
                    buttons:{
                        "OK":function(){
                            $(this).dialog('close');
                        },
                        "Cancel":function(){
                            $(this).dialog('close');
                        }
                    }
                });
            }
        }