2017-06-15 133 views
-4

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

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

上formsubmit调用一些jQuery和阅读形式内容。做一些研究。 https://api.jquery.com/submit/ AND https://stackoverflow.com/help/how-to-ask – tech2017

回答

0

获取数据使用输入ID和设置形式延迟提交并在第一次阅读的JavaScript和jQuery的基本概念在W3学校

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

我想打开弹出窗口后点击提交按钮,其中名称和父亲显示 – Jonshon

+0

你可以试试这个一个代码 –

+0

是的,我尝试,但在这里显示值在警戒框。但是我想在点击提交按钮并在新的弹出窗口中显示窗体值之后打开新的弹出窗口 – Jonshon

0

,你的按钮类型=“提交”,但如果你只想显示值,你需要设置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) 
}