Question

我正在创建一个form，其中包含多个input类型的数据，例如date，number和text。点击提交按钮后，如何在下一页显示它？我想用这些值写一个段落。我在用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>

Answer 1

有多种方法可以访问输入字段的输入文本。我建议您使用

var2.innerText或var2.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);
    }

使用getElementById（）提交后，如何在下一页上显示具有多种值类型的html表单？

1 个答案: