HTML-форма выводит из строя всю страницу

ProgramBox

HTML-форма выводит из строя всю страницу

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь реализовать форму, которая принимает 5 входных данных и устанавливает каждую переданную форму в виде ячейки в таблице. Это работает, если я заполняю только четыре из моих пяти элементов, но если я заполняю все параметры, происходит сбой. Я хочу добавить строку в таблицу только тогда, когда все пять элементов формы были заполнены пользователем.

 function aFunction() {
  var table = document.getElementById("myTable"),
    row = table.insertRow(-1),
    cell1 = row.insertCell(0),
    cell2 = row.insertCell(1),
    cell3 = row.insertCell(2),
    cell4 = row.insertCell(3),
    cell5 = row.insertCell(4),
    elements = document.forms['myForm'].elements;

  cell1.innerHTML = elements['pickup'].value;
  cell2.innerHTML = elements['delivery'].value;
  cell3.innerHTML = elements['price'].value;
  cell4.innerHTML = elements['pickup-distance'].value;
  cell5.innerHTML = elements['delivery-distance'].value;

}

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

body {
  background-color: powderblue;
}

h1 {
  color: red;
}

p {
  color: blue;
}

 <table style="width:100%" id="myTable">
  <tr>
    <th>Pickup Address</th>
    <th>Delivery Address</th>
    <th>Price</th>
    <th>Distance to Pickup</th>
    <th>Delivery Distance</th>
  </tr>
</table>

<form style="border:1px solid #ccc" id="myForm">
  <div class="container">

    <p>Please fill in this form to post a job for our drivers.</p>
    <hr>

    <label for="pickup-address"><b>Pickup Address</b></label>
    <input type="text" placeholder="Enter Address" name="pickup" required>

    <label for="delivery-address"><b>Delivery Address</b></label>
    <input type="text" placeholder="Enter Address" name="delivery" required>

    <label for="price"><b>Price</b></label>
    <input type="text" placeholder="Enter Price" name="price" required>

    <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
    <input type="text" placeholder="Enter distance" name="pickup-distance" required>

    <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
    <input type="text" placeholder="Enter distance" name="delivery-distance" required>

    <button onclick="aFunction()">Post</button>

  </div>
</form>

1. Определите проблему более четко. Что вы имеете в виду под «сбоем»? Вы получаете сообщение об ошибке? Если да, то что именно это такое? Я могу заполнить все поля и отправить здесь без проблем.

2. Когда вы говорите «сбой», вы имеете в виду ошибку? Или, что страница перезагружается? Чтобы предотвратить перезагрузку, вам нужно было бы вызвать event.preventDefault в вашем aFunction , чего я не вижу. ИЛИ добавьте action в свою форму для отправки ваших данных.

3. @Jack Я не вижу, чтобы он действительно отправлял форму, поэтому проблема не в том, что страница перезагружается.

4. @IsaacVidrine Действие по умолчанию для a <button> внутри a <form> является submit .

5. @IsaacVidrine W3schools — не совсем лучший ресурс (как я уже упоминал в этом ответе). Согласно официальной спецификации W3C : Отсутствующее значение по умолчанию [для type ] — это состояние кнопки отправки. Если у элемента есть владелец формы, элемент должен отправить владельца формы из элемента button.»

Ответ №1:

Вы должны определить тип кнопки, т.е.:

 <button onclick="aFunction()" type="button">Post</button>

чтобы предотвратить отправку формы и перезагрузку (на самом деле это не приводит к сбою) страницы.

W3Schools для кнопок:

Всегда указывайте атрибут type для элемента. Разные браузеры используют разные типы по умолчанию для элемента.

1. Хороший ответ! Единственная незначительная вещь, которую я мог бы предложить в будущем, заключается в том, что исторически W3Schools точно не рассматривался как лучший ресурс для разработки, и поэтому некоторые люди (оправданные или нет) придают некоторую достоверность ответам, которые на него ссылаются. Могу ли я предложить MDN в качестве гораздо более желанной альтернативы 🙂

Ответ №2:

Попробуйте использовать document.getElementsByTagName("input") вместо document.forms['myForm'].elements;

 function aFunction() {
  var table = document.getElementById("myTable"),
    row = table.insertRow(-1),
    cell1 = row.insertCell(0),
    cell2 = row.insertCell(1),
    cell3 = row.insertCell(2),
    cell4 = row.insertCell(3),
    cell5 = row.insertCell(4),
    elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
  cell1.innerHTML = elements[0].value;
  cell2.innerHTML = elements[1].value;
  cell3.innerHTML = elements[2].value;
  cell4.innerHTML = elements[3].value;
  cell5.innerHTML = elements[4].value;

}

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

body {
  background-color: powderblue;
}

h1 {
  color: red;
}

p {
  color: blue;
}

 <table style="width:100%" id="myTable">
  <tr>
    <th>Pickup Address</th>
    <th>Delivery Address</th>
    <th>Price</th>
    <th>Distance to Pickup</th>
    <th>Delivery Distance</th>
  </tr>
</table>

<div style="border:1px solid #ccc" id="myForm">
  <div class="container">

    <p>Please fill in this form to post a job for our drivers.</p>
    <hr>

    <label for="pickup-address"><b>Pickup Address</b></label>
    <input type="text" placeholder="Enter Address" name="pickup" required>

    <label for="delivery-address"><b>Delivery Address</b></label>
    <input type="text" placeholder="Enter Address" name="delivery" required>

    <label for="price"><b>Price</b></label>
    <input type="text" placeholder="Enter Price" name="price" required>

    <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
    <input type="text" placeholder="Enter distance" name="pickup-distance" required>

    <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
    <input type="text" placeholder="Enter distance" name="delivery-distance" required>

    <button onclick="aFunction()">Post</button>

  </div>
</div>