Question

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

<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>

Answer 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>

Answer 2

首先，你的按钮是type =＆＃34;提交＆＃34;，但是如果你只想显示值，你需要设置type =＆＃34; button＆＃34;，并在onclick属性中调用一些函数，什么会显示你的价值观，如：

按钮

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

您需要为节目值添加 js script ：

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

在弹出窗口中显示值

2 个答案: