Question

这是我的表单在视图中，我需要在弹出窗口中显示此表单数据，当我单击提交按钮时，我更喜欢用jquery做，我已经搜索了一些方法但我找不到合适的方法获取带有表单数据的弹出窗口。 **我首先需要填写表单，然后当我单击提交按钮时，它应该在jquery窗口中显示带有填充数据的表单**

<body>
<link rel="stylesheet"    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"     type="text/css" media="all" />  
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-   theme/ui.theme.css" type="text/   css" media="all" />  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"   type="text/javascript"></script>  
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"   type="text/javascript"></script>  
    <link rel="stylesheet"   href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-   ui.css">      
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
 <script>
    $(function() {
      $( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
    });
</script>
<script type="text/javascript">
/*$(function(){
    $("#birds").autocomplete({
      minLength: 3,
      source: "<?php //echo site_url('birds/get_birds'); ?>", // path to the get_birds    method
      select: function( event, ui ) {
            $('#test').val(ui.item.label);
            alert(ui.item.value+" : "+ ui.item.label +":"+ ui.item.city+":"+    ui.item.location);




      }
    });
 });*/
</script>
<script type="text/javascript">
$(document).ready(function(){
    var ac_config = {
        source: "<?php echo site_url('birds/get_birds'); ?>",
        select:function(event, ui){
            $("#address").val(ui.item.location);
        },
        minLength:2
    };
    $("#name").autocomplete(ac_config);
})
 </script>

 <div id="content">

<form action="#" method="post">
    <p>name: <input type="text" id="name"/></p>
    <p>address: <input type="text" id="address"/></p>
    <p>Date: <input type="text" id="datepicker"/></p>
    <input type="text" id="test" />
    <input type="submit" value="next">
    </form>

   </div>
  </body>
  </html>

Answer 1

<强> HTML

<div id="dialogbox"></div>

<div id="content">
    <p>name: <input type="text" id="name"/></p>
    <p>address: <input type="text" id="address"/></p>
    <p>Date: <input type="text" id="datepicker"/></p>
    <input type="text" id="test" />
 </div>
  <input type="submit" id="mybutt" value="next">

JQuery的

$("#dialogbox").dialog({
    autoOpen:false,
    modal:true,
    title: "Use of Open event",
    width:400,
    open: function( event, ui ) {
    }
});

$('#mybutt').click(function() {
    $('#dialogbox').empty()
    var $clone=$("#content").clone()
    $('#dialogbox').append($clone)
    $("#dialogbox :input").prop("disabled", true);
    $('#dialogbox').dialog('open');
});

SEE DEMO HERE

Answer 2

HTML

<div id="dialog" title="Basic dialog">
    <form action="#" method="post">
        <p>name:
            <input type="text" id="name" />
        </p>
        <p>address:
            <input type="text" id="address" />
        </p>
        <p>Date:
            <input type="text" id="datepicker" />
        </p>
        <input type="text" id="test" />
        <input type="submit" value="next">
    </form>
</div>

    <button id="showForm">Show Form</button>

jQueryUI ：

$("#showForm").click(function() {
    $("#dialog").dialog();
});

JSFIDDLEDEMO

jquery dased弹出窗口中的HTML表单数据视图

2 个答案: