使用getElementById（）提交后，如何在下一页上显示具有多种值类型的html表单？
[英]How to display html form with multiple type of values on next page after submit using getElementById()?
问题描述
I was creating a form with multiple input type of data like date , number and text . 
我正在创建具有多种input类型的数据（如date ， number和text的form 。 How do I display it on next page when I hit the submit button? 点击提交按钮后，如何在下一页显示它？ I want to write a paragraph using these values. 我想用这些值写一个段落。 I was using JS. 我正在使用JS。
<script type="text/javascript"> function generatesentence(){ var var1 = "In "; var var2 = document.getElementById('orgname'); var var3 = document.getElementById('postionnumber'); var var4 = "The city location is "; var var5 = document.getElementById('cityname'); var var6 = ". The last date of application is "; var var7 = document.getElementById('lasdat'); document.write(var1+var2.value+var3.value+var4+var5.value+var6+var7.value); } </script>
body{ background-image: url("ORGANIZATIONALRE-ORGANIZATIONOR.jpg"); } .organization-information{ width: 360px; padding:15% 0 0; margin: auto; } .form{ position: relative; z-index: 1; background: LightBlue ; max-width: 360px; margin: 0 auto 100px; padding: 45px; } .form input{ font-family: "roboto", sans-serif; outline: 1; background: #F5F5F5; width: 100%; border: 0; margin: 0 0 15px; box-sizing: border-box; font-size: 14px; } .form-button{ font-family: "roboto0",sans-serif; text-transform: uppercase; outline: 0; background: #4CAF50; width: 100%; border: 0; padding: 15px; color: inherit; font-size: 14px; } .concat{ position: relative; z-index: 1; background: LightBlue ; max-width: 360px; margin: 0 auto 100px; padding: 45px; }
<!doctype html> <html> <head> <title>Vacancies Available</title> <link rel="stylesheet" href="formstyle.css"> <script type="text/javascript" src="form.js"></script> </head> <body> <div class="organization-information"> <div class="form"> <form class="Org-info-form"> name of organization: <input type="text" name="Name" id="orgname" placeholder="enter the name here"/><br/> No of positions : <input type="number" name id="postionnumber" placeholder="Enter number of positions avaialble"/><br/> City Name : <input type="text" id="cityname" placeholder="Enter city name here"/><br/> Last Date for application : <input type="date" id="lasdat" placeholder="Last date of application"/><br/> <button onclick="generatesentence()">Submit</button> </form> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2018-10-22 06:55:51
There are various ways to access the input text of the input field. 有多种方法可以访问输入字段的输入文本。 I would suggest you to use 我建议你用
var2.innerText or var2.value var2.innerText或var2.value
similar to every variable you are using 类似于您正在使用的每个变量
getElementById()
and I believe var3 will show an Error as getElementById() needs an argument. 而且我相信var3会显示错误，因为getElementById()需要一个参数。
Edit: here is a modified code 编辑：这是修改后的代码
function generatesentence(){
var var1 = "In ";
var var2 = document.getElementById('orgname');
var var3 = (document.getElementById('postionnumber'));
var var4 = "The city location is ";
var var5 = document.getElementById('cityname');
var var6 = ". The last date of application is ";
var var7 = (document.getElementById('lasdat'));
document.write(var1+var2.value+var3.value+var4+var5.value+var6+var7.value);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.