簡體   English   中英

使用getElementById()提交后,如何在下一頁上顯示具有多種值類型的html表單?

[英]How to display html form with multiple type of values on next page after submit using getElementById()?

我正在創建具有多種input類型的數據(如datenumbertextform 點擊提交按鈕后,如何在下一頁顯示它? 我想用這些值寫一個段落。 我正在使用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> 

有多種方法可以訪問輸入字段的輸入文本。 我建議你用

var2.innerTextvar2.value

類似於您正在使用的每個變量

getElementById()

而且我相信var3會顯示錯誤,因為getElementById()需要一個參數。

編輯:這是修改后的代碼

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM