在按钮后的同一页面中显示 html 表单值答案

【问题标题】：display html form values in same page after button在按钮后的同一页面中显示 html 表单值
【发布时间】：2017-11-24 17:28:36
【问题描述】：

我制作了一个 html 网站。网站上有问题。我用form 做到了。点击按钮后，我想在同一页面上看到所有答案。我不想提醒。我该怎么做？

对于拼写错误，我深表歉意。

	<script>
			function findSelection()
			{
				
				var serieList=document.getElementsByName('serie')
				for (var i=0; i<serieList.length;i++) 
				{
				if(serieList[i].checked) 
					{
					
					}
				}
				
				var markaList=document.getElementsByName('marka') 
				
				for (var i=0; i<markaList.length;i++) 
				{
				if(markaList[i].checked) 
					{
						alert(markaList[i].value)
					}
				}
				
				var yerList=document.getElementsByName('yer') 
				
				for (var i=0; i<yerList.length;i++) 
				{
				if(yerList[i].checked) 
					{
						alert(yerList[i].value)
					}
				}
				
				var nasilList=document.getElementsByName('nasil') 
			
				for (var i=0; i<nasilList.length;i++) 	
				{
				if(nasilList[i].checked) 
					{
						alert(nasilList[i].value)
					}
				}
				
				
			}
			
			
	</script>

<html>
	<head>
		<title>Web Tasarım Anketi </title>
	
	</head>
	
	<body style="background-color:#d3ea93">
	<center> <h1 style="color:red"> ANKET </h1> </center>

	<form  >
		<fieldset><legend>Soru 1 </legend>
			En sevdiğiniz yabancı dizi? </br>
				<label>	<input type="radio" name="serie" value="Game of Thrones">Game of Thrones </label>
				<label>	<input type="radio" name="serie" value="Person of İnterest">Person of Interest </label>
				<label>	<input type="radio" name="serie" value="South Park">South Park </label>	
				<label>	<input type="radio" name="serie" value="Black Mirror">Black Mirror </label>	
		</fieldset>
	</form>	
	
	<form >
		<fieldset><legend>Soru 2 </legend>
			En sevdiğiniz bilgisayar markası? </br>
				<label>	<input type="radio" name="marka" value="Asus">Asus </label>
				<label>	<input type="radio" name="marka" value="HP">HP </label>
				<label>	<input type="radio" name="marka" value="Toshiba">Toshiba </label>
				<label>	<input type="radio" name="marka" value="Dell">Dell </label>
		</fieldset>
		
	</form>
	
	<form>
		<fieldset><legend>Soru 3 </legend>
			Nerede yaşamak istersiniz?</br>
				<label>	<input type="radio" name="yer" value="Türkiye">Türkiye </label>
				<label>	<input type="radio" name="yer" value="Mars">Mars </label>
				<label>	<input type="radio" name="yer" value="Avustralya">Avustralya </label>
				<label>	<input type="radio" name="yer" value="Yeni Zelanda">Yeni Zelanda </label>
		</fieldset>
	</form>
	
	<form>
		<fieldset><legend>Soru 4 </legend>
			Nasıl ölmek istersiniz?</br>
				<label>	<input type="radio" name="nasil" value="Araba Kazasında ">Araba Kazası </label>
				<label>	<input type="radio" name="nasil" value="Uzay Boşluğunda">Uzay Boşluğunda </label>
				<label>	<input type="radio" name="nasil" value="Ecelimle">Ecelimle </label>
				<label>	<input type="radio" name="nasil" value="Maganda Kurşunu">Maganda Kurşunu </label>
		</fieldset>
	</form>
	
	 <input type="button" id="btnKaydet" value="Kaydet" onclick="findSelection()"></input>
		
	
	</body>

</html>

【问题讨论】：

标签： javascript html forms survey

【解决方案1】：

您可以使用 javascript 来实现此目的，但最终您想学习 server-side 编程语言，例如 php。对我来说 php 是最好的选择。

如果您使用 Google 表单并单击它的 mozilla 设备文档，您会看到一个名为 action 的属性，该属性告诉表单去哪里或做什么（使用内联 javascript，但我强烈建议不要这样做） .您还会发现一个名为method 的属性。方法负责表单如何处理输入值。两个最常见的值是post 和get。

我通常只使用post，因为我将数据发布到脚本中。

最常见的用法是

<form method="post" action="/area/scripts/post/form.php">

然而，使用 mvc 变得非常有趣，看起来更像：

<form method="post" action="<?php echo $this->getFormAction(); ?>">

然后在您的 form.php 页面中处理数据。要明白我的意思，现在把它放在你的 form.php 中：

<?php
    var_dump($_POST) ;

这将显示您的表单数据。

要将其链接回您在同一页面上显示的想法，您还可以使用 ajax，但这意味着将 jquery 包含到您的网站中。它 100% 让生活更轻松，但它确实增加了您的网站大小。当然，您可以选择 .min 脚本，但仍然包含在每个页面中，所以..

无论如何。使用纯 html 我不确定是否可行，javascript 是一种浏览器端编程语言，我不确定您是否可以动态分配值，您可能可以，但我不是 javascript 专家。

我建议为此使用 php，因为它也使其安全（如果您遵循约定并使用安全代码正确执行）

另外，我更喜欢将此作为评论作为实际答案，因为它不直接处理您的问题或其相关标签，但字符限制不足以用于这样的评论。如果愿意，请随意投反对票，如果达到 -3，我会简单地删除

看到评论后更新

要在 javascript 中组合变量，您可以使用 + 来连接字符串。

例如

var message = document.getElementById('myId') + ' ' + document.getElementById('myIdTwo');

alert(message);

这只是一个如何使用的例子，但这应该是你要找的。

祝你好运！

【讨论】：

【解决方案2】：

你可以通过 jquery 给你所有的字段 id 来做到这一点

这样写

<script>
    $(document).ready(function()
    {
        $("#Button1).click(function()
        {
            $("#abc1").val($("#abc").val());
        })
</script>
<body>
    <input type="text" id="abc" />
    <input id="Button1" type="button" value="button" />
    <input type="text" id="abc1" />
</body>

【讨论】：

这是 jquery，不是 javascript
是的，使用 jquery 比 javascript 更容易做到这一点
但是如果 op 指定 javascript 然后使用 javascript 他们可能不想包含 jquery xD
先生，他没有提到只使用java脚本，基本上jquery也是javascript。如果你知道答案就写出来。
Jquery 是一个 javascript 框架，它使它变得更容易，但它也增加了您网站的大小。尽管它们在做或多或少相同的目的方面有相似之处，但它们的编写方式不同，否则您可以在不包含脚本的情况下使用 jquery。这就是他们分开的原因。