在弹出窗口中显示值答案

【问题标题】：Show Value in pop up window在弹出窗口中显示值
【发布时间】：2017-06-15 13:47:54
【问题描述】：

我想在单击提交按钮后打开的弹出窗口中显示表单值。单击提交按钮后如何在弹出窗口中显示表单值。我的表格在下面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form name="example" action="" method="post">
<table width="257" border="1">
  <tr>
    <td>Name</td>
    <td><input type="text" name="name" id="name" /></td>
  </tr>
  <tr>
    <td>Father Name</td>
    <td><input type="text" value="" name="fname" id="fname" /></td>
  </tr>
  <tr>
    <td colspan="2"><center><input type="submit" name="submit" value="Show Value" /></center></td>    
  </tr>
</table>
</form>
</body>
</html>

【问题讨论】：

在表单提交上调用一些 jquery 并读取表单内容。做一些研究。 api.jquery.com/submit 和 stackoverflow.com/help/how-to-ask

标签： javascript php jquery html ajax

【解决方案1】：

使用输入id获取数据并设置表单延迟提交和阅读w3学校的javascript和jquery基本概念

<html>
<head>
    <title>Demo</title>   

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
        rel="stylesheet" type="text/css" />
</head>

<body>

<form name="example" action="" method="post" id="example">
<table width="257" border="1">
  <tr>
    <td>Name</td>
    <td><input type="text" name="name" id="name" /></td>
  </tr>
  <tr>
    <td>Father Name</td>
    <td><input type="text" value="" name="fname" id="fname" /></td>
  </tr>
  <tr>
    <td colspan="2"><center> <input type="button" id="btnShow" value="Submit" /></center></td>    
  </tr>

</table>
</form>

    <div id="dialog" style="display: none" align="center">
          <label>Name :</label><span id="show_name"></span>
          <br>
         <label>Father Name :</label><span id="show_fname"></span>

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

<script>


        $(function () {
           $("#dialog").dialog({
                modal: true,
                autoOpen: false,
                title: "User Details",
                width: 300,
                height: 150,
            });
            $("#btnShow").click(function (e) {

               e.preventDefault();
                var name=$("#name").val();
                var fname=$("#fname").val();

                $("#show_name").html(name);
                $("#show_fname").html(fname);

               $('#dialog').dialog('open');

             setTimeout(function() {
                 $("#example").submit();
              }, 3000);

           });


        });


</script>

【讨论】：

我想在点击提交按钮后打开弹出窗口，其中显示姓名和父亲
是的，我尝试过，但这里在警报框中显示值。但我想在单击提交按钮后打开新的弹出窗口并在新的弹出窗口中显示表单值

【解决方案2】：

首先，您的按钮是 type="submit"，但如果您只想显示值，则需要设置 type="button"，并在 onclick 属性中调用一些函数，什么会显示您的值，如下所示：

按钮

<input type="button" name="button" value="Show Value" onclick="myFunction()"/>

您需要添加 js 脚本 来显示值：

function myFunction(){
    var name = document.getElementById("name").value;
    var fname = document.getElementById("fname").value;
    alert(name+' '+fname)
}

【讨论】：