Как добавить форму в компонент выбранного типа? - PullRequest
Новая
       2

Как добавить форму в компонент выбранного типа?

0 голосов
/ 18 марта 2020

Я должен сделать регистрационную форму пользователя. После заполнения формы и нажатия кнопки «Отправить» значения из формы необходимо добавить в компонент <p id="data></p>. Может ли кто-нибудь помочь мне здесь? Работает только для выпадающего списка. 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form >
    Name: <input type="text" id="name" name="name" id="mySelect"> <br>
    Male <input type="radio" id="male" name="male" id="mySelect"><br>
    Female <input type="radio" id="female" name="female" id="mySelect"><br>
    Country: <br>
    <select name="country" size="4" id="mySelect">
    <option value="c1">c1</option>
    <option value="c2">c2</option>
    <option value="c3">c3</option>
    <option value="c4">c4</option>
    <option value="c5">c5</option>
    </select> <br>
    <br>
</form>



<button type="button" onclick="myFunction()">Submit</button>

<p id="data"></p>

<script>
function myFunction() {
  var x = document.getElementById("mySelect");
  var txt = "";
  var i;
  for (i = 0; i < x.length; i++) {
    txt = txt + x.options[i].text + "<br>";
  }
  
  document.getElementById("data").innerHTML = txt;
}
</script>

</body>
</html>

1 Ответ

1 голос
/ 18 марта 2020

Вот пара вещей, которые вы должны изменить:

  • НЕ используйте один и тот же идентификатор для разных элементов на странице: это вызывает проблемы, с которыми вы сталкивались;
  • вы дублировали атрибут id для каждого элемент формы - не делайте этого, пожалуйста, атрибуты не должны дублироваться для одного элемента;
  • пожалуйста, прочитайте документацию - getElementById возвращает один элемент, который соответствует или равен нулю;
  • вместо этого используйте getElementsByClassName, присваивая каждому элементу формы одно и то же имя класса, например «sys-form-element»; в этом случае getElementsByClassName ("sys-form-element") возвращает коллекцию совпадающих элементов, которая включает в себя каждое поле формы, которое вы затем можете проанализировать с помощью "myFunction" - просто обновите его, чтобы обнаружить тип элемента и тексты хэдла, rad ios и выбирает по-разному;
...