Question

我编写了一个漂亮的基本页面来收集学生信息（名字，姓氏，学期和课程名称）。名字和姓氏是输入type =“ text” s，而学期和课程名是下拉列表。

我现在需要使用一个外部JS文件来获取存储在输入中的文本，并在注册过程中将其显示为

“名字姓氏为以下课程注册：学期：课程：“

这是我编写的html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>University Registration</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <header>
      <div class="headerContainer">
       <h1>University Registration System</h1>
      </div>
    </header>

    <form action="" method="get" class="scInfo">

      <h3>Student and Course Info:</h3>

      <div class="fn">
        <p>First Name: </p>
        <input type="text" name="fn" id="fn" required>
      </div>

      <div class="ln">
        <p>Last Name: </p>
        <input type="text" name="ln" id="ln" required>
      </div>

      <div></div>

      <div class="semester">
        <p>Semester: </p>
        <select>
          <option value="fall">Fall 2019</option>
          <option value="spring">Spring 2020</option>
        </select>
      </div>

      <div class="course">
        <p>Course Name: </p>
        <select>
          <option value="365">CIS 365 - Business Database Systems</option>
          <option value="425">CIS 425 - Enterprise Web Technologies</option>
        </select>
      </div>

      <div class="button">
        <button id="register">Register</button>
      </div>
    </form>

    <h3>Registered Course:</h3>

    <div class="nameOutput">

    </div>

    <div class="semesterOutput">

    </div>

    <div class="classOutput">

    </div>

    <script src="script.js"></script>
  </body>
</html>

这是我编写的CSS代码

header h1
{
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid black;
}

form .fn
{
  display: inline-block;
  padding: 5px;
}

form .ln
{
  display: inline-block;
  padding: 5px;
}

form .semester
{
  display: inline-block;
  padding: 5px;
}

form .course
{
  display: inline-block;
  padding: 5px;
}

form .button
{
  padding: 5px
}

Answer 1

无需显示CSS文件，因为此处不相关。这完全取决于您使用的后端，因为在将任何内容输出到屏幕之前，您需要先让用户成功注册。

一种方法是，如果您使用的是后端API（还需要POST方法，而不是GET）：

<form id="registerForm">
...

<input type="submit" value="registerBtn" name="Register" role="button" id="registerBtn">Register Now</button>

在您的javascript文件中，您可以使用事件处理程序来获取数据，并将其发送到后端API以注册用户，如果您获得200状态代码或任何等效的成功代码，则可以显示信息给用户

在您的javascript文件中：

const registerForm = document.querySelector("#registerForm")
registerForm.addEventListener("submit", (e) => {
   e.preventDefault(); //prevent form from resetting the page
   // grab the input values, and use a request package like axios or javascript's native xmlhttprequest to send the data

});

Answer 2

如果要从表单本身中提取值，请遵循以下代码。我对您的div进行了一些更改，并选择了。

const form = document.getElementById('registerForm');
form.addEventListener('submit', (event) => {
  event.preventDefault();

  let full_name = document.getElementById('fn').value + ' ' +     document.getElementById('ln').value;
  let name = document.getElementsByClassName('nameOutput')[0];
  name.innerHTML = full_name + 'is registered for the following course';

  let sem = document.getElementById('semester');
  val_sem = sem.options[sem.selectedIndex].text;
  let semester = document.getElementsByClassName('semesterOutput')[0];
  semester.innerHTML = val_sem;

  let cls = document.getElementById('course');
  val_cls = cls.options[cls.selectedIndex].text;
  let classOutput = document.getElementsByClassName('classOutput')[0];
  classOutput.innerHTML = val_cls;
});

    <header>
      <div class="headerContainer">
       <h1>University Registration System</h1>
      </div>
    </header>

    <form action="" method="get" class="scInfo" id="registerForm">

      <h3>Student and Course Info:</h3>

      <div class="fn">
        <p>First Name: </p>
        <input type="text" name="fn" id="fn" required>
      </div>

      <div class="ln">
        <p>Last Name: </p>
        <input type="text" name="ln" id="ln" required>
      </div>

      <div></div>

      <div class="semester">
        <p>Semester: </p>
        <select id="semester">
          <option value="fall">Fall 2019</option>
          <option value="spring">Spring 2020</option>
        </select>
      </div>

      <div class="course">
        <p>Course Name: </p>
        <select id="course">
          <option value="365">CIS 365 - Business Database Systems</option>
          <option value="425">CIS 425 - Enterprise Web Technologies</option>
        </select>
      </div>

      <div class="button">
        <button id="register">Register</button>
      </div>
    </form>

    <h3>Registered Course:</h3>

    <div class="nameOutput">
    </div>

    <div class="semesterOutput">

    </div>

    <div class="classOutput">

    </div>

我无法在代码片段中插入外部js，但是您可以将下面的js复制到文件中，然后按照与上面代码相同的方式调用文件。

提交表单时将显示输出。甚至还有更好的方法，但这是实现它的基本方法，如果您是新手，也将使您对选择器有所了解。确保您完成了js代码。

希望这会有所帮助

谢谢

如何获取HTML输入并使用外部JavaScript显示它

2 个答案: