“ input type =” submit“”未显示为按钮

时间:2019-03-04 13:03:41

标签: javascript html forms text-files onsubmit

我正在尝试创建一个基于Web的测验应用程序,其中该测验通过表单输入,然后输入到文本文件中。然后将从文本文件中分别读取该信息给用户。我的提交按钮不起作用,但是我将其布局错误吗? 然后,想法是逐行调用这些行定义的值来读取文本文件,并在单独的网页上以无线电格式显示选项。另外,我希望添加一个名为“添加问题”的新按钮,该按钮将问题和3个答案输入文本添加到表单的底部,使其对用户做出响应。我是否需要使整个表单成为函数并调用它?

function WriteToFile(passForm) {

  set fso = CreateObject("Scripting.FileSystemObject");
  set s = fso.CreateTextFile(“using theseee / this.txt ", True);

      var year = document.getElementById(‘year’);
      var class = document.getElementById(‘class’);
      var topic = document.getElementById(‘topic’);
      var title = document.getElementById(‘title’);
      var question = document.getElementById(‘question’);
      var option1 = document.getElementById(‘answer1’);
      var option2 = document.getElementById(‘answer2’);
      var option3 = document.getElementById(‘answer3’);

      s.writeline(“Title: " + title);
        s.writeline(“Question: " + question);
          s.writeline(“Option1: " + answer1);
            s.writeline(“Option2: " + answer2);
              s.writeline(“Option3: " + answer3);

                s.writeline("-----------------------------"); s.Close();
              }
<html>

<head>
  <title>Quiz Form</title>
  <link rel=“stylesheet” href=“TRYstyle.css”>
</head>

<body>

  <h3>Quiz form</h3>

  <table>
    <form onSubmit=“WriteToFile(this.txt)”>
      <tr>
        <td>Title</td>
        <td><input type=“text” placeholder=“Title” name=“title” id=“title” maxlength=“200”/></td>
      </tr>

      <tr>
        <td>Question</td>
        <td><input type=“text” placeholder=“Question” name=“question” id=“question” maxlength=“200”/></td>
      </tr>

      <tr>
        <td>Answer</td>
        <td><input type=“text” placeholder=“Answer” name=“answer1” id=“answer1” maxlength=“200”/></td>
      </tr>

      <tr>
        <td>Answer</td>
        <td><input type=“text” placeholder=“Answer” name=“answer2” id=“answer2” maxlength=“200”/></td>
      </tr>

      <tr>
        <td>Answer</td>
        <td><input type=“text” placeholder=“Answer” name=“answer3” id=“answer3” maxlength=“200”/></td>
      </tr>

      <tr>
        <input type=“submit” value=“Submit”>
      </tr>
    </form>
  </table>
</body>

</html>

3 个答案:

答案 0 :(得分:0)

您的HTML无效。

表单不能是表元素的子元素,输入不能是表行元素的子元素。

只有表格单元格可以是表格行的子级。

此外,您不能使用(左双引号)来分隔属性值。仅"(引号)或'(撇号)。

使用a validator


此外:解决该问题后,您将发现Scripting.FileSystemObject无法用于网络浏览器。您无法使用浏览器端JS写入任意文件。

答案 1 :(得分:0)

您的双引号错误。

是这样的:

<input type=“submit” value=“Submit”>

这是需要的方式:

<input type="submit" value="Submit">

因为有双引号,所以无法识别类型,默认情况下,输入类型为文本。这就是为什么您遇到这个问题。

答案 2 :(得分:0)

您遇到了多个问题。

  • 首先使用正确的引号可以解决很多问题。
  • 将您的提交按钮放置在td元素中,这样就不会直接将其放置在一行中。
  • 您在JavaScript中使用了class作为变量名,这是不允许的。

function WriteToFile(passForm) {

    //No Idea what this is. Wont work in snippet
    //set fso = CreateObject("Scripting.FileSystemObject");
    //set s = fso.CreateTextFile(“using theseee / this.txt ", True);

    //use the correct quotes
    var year = document.getElementById('year');
    //it's not allowed to use class as a variable
    var classEl = document.getElementById('class');
    var topic = document.getElementById('topic');
    var title = document.getElementById('title');
    var question = document.getElementById('question');
    var option1 = document.getElementById('answer1');
    var option2 = document.getElementById('answer2');
    var option3 = document.getElementById('answer3');

    //use the correct quotes
    console.log("Title: " + title);
    console.log("Question: " + question);
    console.log("Option1: " + answer1);
    console.log("Option2: " + answer2);
    console.log("Option3: " + answer3);
    console.log("-----------------------------"); s.Close();
  }
<html>

<head>
  <title>Quiz Form</title>
  <link rel=“stylesheet” href=“TRYstyle.css”>
</head>

<body>

  <h3>Quiz form</h3>

  <table>
    <form onSubmit="WriteToFile(this.txt)">
      <tr>
        <td>Title</td>
        <td><input type="text" placeholder="Title" name="title" id="title" maxlength="200"/></td>
      </tr>

      <tr>
        <td>Question</td>
        <td><input type="text"  placeholder="Question" name="question" id="question" maxlength="200"/></td>
      </tr>

      <tr>
        <td>Answer</td>
        <td><input type="text"  placeholder="Answer" name="answer1" id="answer1" maxlength="200"/></td>
      </tr>

      <tr>
        <td>Answer</td>
        <td><input type="text"  placeholder="Answer" name="answer2" id="answer2" maxlength="200"/></td>
      </tr>

      <tr>
        <td>Answer</td>
        <td><input type="text"  placeholder="Answer" name="answer3" id="answer3" maxlength="200"/></td>
      </tr>

      <tr>
        <td colspan="2">
          <input type="submit">
        </td>
      </tr>
    </form>
  </table>
</body>

</html>