Почему onsubmit не работает, и если я вызываю функцию в консоли, она запускается? - PullRequest
Новая
       4

Почему onsubmit не работает, и если я вызываю функцию в консоли, она запускается?

0 голосов
/ 07 ноября 2018

У меня есть этот HTML: 

<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">

<script src="js/filename.js"></script>
</head>

<body>
    <form id = "dp5" action=""  method="POST" onsubmit="Write_Text()">
      <h3>5- Do you know any browsers?</h3>
      <input id = "No" type="radio" name="dp5N" value="false">
      <label for = "No">No </label>

      <input id = "yes" type="radio" name="dp5S" value="true">
      <label for = "yes">Yes</label>

      <label for = "text">6 - Which?</label>
      <input id = "text" type="text" name="dp5text" value="">
    </form>

    <div id="next">
      <input id="sub" type="submit" name="submit" value="Next">
    </div>
</body>
</html>

И это javascript "имя файла": 

function Write_Text() {
let x = document.forms["dp5"]["No"].value;

if (x === "false") {
    document.getElementById("text").disabled=true;
    document.getElementById("text").value="";
} else {
    document.getElementById("text").disabled =false;
}

}

Текстовое поле должно начинаться отключено и будет доступно только тогда, когда пользователь выберет опцию «да». Функция не работает вообще.

Ответы [ 4 ]

0 голосов
/ 07 ноября 2018

Прежде всего, проблема отправки может быть легко решена путем перемещения кнопки в форме и предотвращения поведения по умолчанию.

Среди проблемы отправки я думаю, что ваш код можно значительно улучшить, решив также следующую проблему: вы можете выбрать оба радиовхода: обернуть их в набор полей и использовать для них одно и то же имя; Зачем? легче получить выбранный ответ и может быть расширен до нескольких входов.

Ниже у вас есть рабочий пример с тем, что я сказал.

Ура! 

function Write_Text(event) {
  event.preventDefault();
  
  let x = document.querySelector('input[name="ans"]:checked').value
  console.log(x);
  
  if (x === "false") {
      document.getElementById("text").disabled=true;
    document.getElementById("text").value="";
  } else {
     document.getElementById("text").disabled =false;
  }
}
<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
</head>

<body>
    <h3>5- Do you know any browsers?</h3>
    <form id="dp5" action=""  method="POST" onsubmit="return Write_Text(event)">
      <fieldset>
        <input id="No" type="radio" name="ans" value="false">
        <label for="No">No </label>

        <input id="yes" type="radio" name="ans" value="true">
        <label for="yes">Yes</label>
      </fieldset>
      
      <label for="text">6 - Which?</label>
      <input id="text" type="text" name="dp5text" disabled value="">
      
      <div id="next">
        <input id="sub" type="submit" name="submit" value="Next">
      </div>
    </form>
</body>
</html>
0 голосов
/ 07 ноября 2018

Ваша кнопка отправки находится за пределами формы. Поместите это в форму, и это будет работать. 

<form id = "dp5" action=""  method="POST" onsubmit="Write_Text(); return false">
  <h3>5- Do you know any browsers?</h3>
  <input id = "No" type="radio" name="dp5N" value="false">
  <label for = "No">No </label>

  <input id = "yes" type="radio" name="dp5S" value="true">
  <label for = "yes">Yes</label>

  <label for = "text">6 - Which?</label>
  <input id = "text" type="text" name="dp5text" value="">

  <div id="next">
    <input id="sub" type="submit" name="submit" value="Next">
  </div>
</form>
0 голосов
/ 07 ноября 2018

вам нужно использовать объект события здесь, чтобы предотвратить Default, потому что страница обновляется onSubmit, а затем отправляет форму в вашей функции Write_Text () 

function Write_Text(event) {
//This will prevent Default Behaviour
event.preventDefault();

let x = document.forms["dp5"]["No"].value;

if (x === "false") {
    document.getElementById("text").disabled=true;
    document.getElementById("text").value="";
} else {
    document.getElementById("text").disabled =false;
}

// then submit using JS
}
0 голосов
/ 07 ноября 2018

Как только вы исправите проблему, которую Sreekanth MK указал , у вас будет новая проблема:

Ничто не мешает действию по умолчанию для отправки формы, которое заключается в отправке данных формы на URL-адрес action (в вашем случае это будет собственный URL-адрес страницы) и замену текущей страницы. с тем, что возвращает этот URL.

Вам необходимо запретить действие по умолчанию. Минимальный путь: 

<form id = "dp5" action=""  method="POST" onsubmit="Write_Text(); return false">

или 

<form id = "dp5" action=""  method="POST" onsubmit="event.preventDefault(); Write_Text();">

... но я рекомендую вместо этого использовать современную обработку событий, удалив атрибут onsubmit и изменив JavaScript следующим образом: 

function Write_Text(event) {
    event.preventDefault();
    let x = document.forms["dp5"]["No"].value;

    if (x === "false") {
        document.getElementById("text").disabled=true;
        document.getElementById("text").value="";
    } else {
        document.getElementById("text").disabled =false;
    }
}
document.getElementById("dp5").addEventListener("submit", Write_Text);

Обратите внимание, что вам нужно переместить тег script. Помещение script в head - это анти-шаблон. Скрипты идут в конце страницы , прямо перед закрывающим тегом </body>.

Примечание: вы можете делать все что угодно в своем собственном коде, но, FWIW, подавляющее соглашение в JavaScript заключается в том, что имена функций начинаются со строчной буквы и используют camelCase, кроме конструкторов, которые использовали изначально ограниченный CamelCase вместо. Так что writeText, а не Write_Text.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...