jquery confirmation popup form with input values after clicking on submit
<p>I am trying to create a form, after clicking on submit i should get a popup with entered values for confirmation with edit and submit buttons.
I see lots of examples but nothing is exact.</p>

<p>help is appreciated.</p>

<p>this is the code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="css/blitzer/jquery-ui-1.8.2.custom.css"&gt;

&lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
&lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
$(document).ready(function(){
            $("#list").click(function() {
                var cun = $("#list").val();

    $.ajax({
            type: "POST",
            url: "http://localhost/prakash/popup form/view.php",
            data: {'data':cun},
            success: function(data){
                    //redirect to id using response
                    //window.location.replace("http://yoursite.com/products/" + response);
                    $('.display').html(data);
            }
    });


    }); 

        });

&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){
    $("#add").click(function() {
      var cun = $("#dis").val();

$.ajax({
    type: "POST",
    url: "http://localhost/prakash/popup form/add.php",
    data: {'data':cun},
    success: function(data){
        //redirect to id using response
        //window.location.replace("http://yoursite.com/products/" + response);
        $('.display').html(data);
    }
});


}); 

  });
&lt;/script&gt;
&lt;script&gt;
$(function(){       
    // jQuery UI Dialog   

    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            "Submit Form": function() {
                document.testconfirmjq.submit();
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

    $('form#testconfirmjq').submit(function(e){
        e.preventDefault();

        $("p#dialog-name").html($("input#name").val());
        $('#dialog').dialog('open');
    });
</code></pre>

<p>});</p>

<pre><code>&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div data-role="page"&gt;
&lt;div data-role="header"&gt;
    &lt;h1&gt;Welcome To My Homepage&lt;/h1&gt;
&lt;/div&gt;

&lt;div align="center" data-role="main" class="ui-content"&gt;
    &lt;a href="#" id="add" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left"&gt;Add New&lt;/a&gt;

    &lt;a href="#" id="list" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left"&gt;Show List&lt;/a&gt;   
&lt;/div&gt;

&lt;div class="display" align="center" display="inline"&gt;
&lt;table id="dis" border="0"&gt;
        &lt;form id="testconfirmjq" method="POST" action="insert.php"&gt; 
            &lt;tr&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="name" id="name"&gt;&lt;/td&gt;&lt;/tr&gt; 
            &lt;tr&gt;&lt;td&gt;Age&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="age" id="datepicker-13" size="30"&gt;&lt;/td&gt;&lt;/tr&gt; 
            &lt;tr&gt;&lt;td&gt;City&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="city"&gt;&lt;/td&gt;&lt;/tr&gt; 
            &lt;tr&gt;&lt;td&gt;&lt;input id="button" type="submit" name="send" value="Submit"&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/form&gt;
&lt;/table&gt; 
</code></pre>

<p>
        
            <p> You entered your Name as:</p>
            </p>
            <p>If this is correct, click Submit Form.</p>
            <p>To edit, click Cancel.<p>
        
</p>

<p>
</p>