Блог

Главная - Вопросы по программированию - «тип ввода =»отправить»» не отображается в виде кнопки

«тип ввода =»отправить»» не отображается в виде кнопки

#javascript #html #forms #text-files #onsubmit

#javascript #HTML #формы #текстовые файлы #onsubmit

Вопрос:

Я пытаюсь создать веб-приложение для проведения викторины, в котором тест вводится через форму, а затем в текстовый файл. затем это будет прочитано из текстового файла пользователю отдельно. Однако моя кнопка отправки не работает, я неправильно ее разместил? Идея состоит в том, чтобы затем построчно прочитать текстовый файл, вызывая значения, определенные этими строками, и отображая параметры в формате radio на отдельной веб-странице. Кроме того, я хочу добавить новую кнопку под названием «добавить вопрос», которая добавляет входные тексты вопроса и 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>

Ответ №1:

Ваш HTML неверен.

Форма не может быть дочерней по отношению к элементу таблицы, а входные данные не могут быть дочерними по отношению к элементу строки таблицы.

дочерними элементами строки таблицы могут быть только ячейки таблицы.

Кроме того, вы не можете использовать “ (ЛЕВУЮ ДВОЙНУЮ КАВЫЧКУ) для разграничения значений атрибутов. Только " (КАВЫЧКИ) или ' (АПОСТРОФ).

Используйте средство проверки.

В сторону: как только вы решите эту проблему, вы обнаружите, что Scripting.FileSystemObject это недоступно для веб-браузеров. Вы не можете записывать в произвольные файлы с помощью JS на стороне браузера.

Ответ №2:

Ваши двойные цитаты неверны.

Вот как это:

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

Вот как это должно быть:

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

Из-за этих двойных ссылок тип не распознается, и по умолчанию тип ввода — текст. Вот почему у вас возникла эта проблема.

Ответ №3:

У вас было несколько проблем.

  • Во-первых, использование правильных кавычек помогает решить множество проблем.
  • Поместите кнопку отправки в элемент td, чтобы она не помещалась непосредственно в строку.
  • Вы использовали class в качестве имени переменной в вашем javascript, что недопустимо.

 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>