Значение формы равно null в расширении Chrome

avatar
Vineeth Chitteti
8 апреля 2018 в 07:39
320
2
1

JS новичок здесь. Я искал во всем coderhelper, прежде чем публиковать этот вопрос, пожалуйста, прокомментируйте вопрос, если он является дубликатом и его необходимо удалить.

Я создаю форму в расширении Google Chrome, которая принимает ввод и регистрирует его в консоли при нажатии кнопки отправки.

Я могу получить элемент (по идентификатору), но в нем нет значения, даже после нажатия кнопки отправки после ввода почтового индекса. Вот код: 

document.addEventListener('DOMContentLoaded', function() {
    var zipCode = document.getElementById("zipCode");

    console.log("Zip Code is: " + zipCode.id);
    console.log("Zip Code value: " + zipCode.value);
}, false);


<body style="width:320px;height:580px;">
    <form action="/main.html" style="position: center; text-align: left; padding-left: 20px">
        <h3>Zip Code</h3>
        <input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">
        <input type="submit" id="button" value="  Tap" style="font-family: 'Open Sans'" name="Submitted zip code">
    </form>
</body>

Вывод консоли:

Zip Code is: zipCode
Zip Code value:
Источник

Ответы (2)

avatar
Sebastian Speitel
8 апреля 2018 в 07:50
1

При нажатии кнопки отправки страница перезагружается, поэтому в

нет значения 
<input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">

в то время, когда вы пытаетесь его получить ("DOMContentLoaded"). Если вы хотите получить значение после нажатия кнопки отправки, вам нужно получить его из URL-адреса, где оно хранится в виде значений после ?

Во-первых, вашему полю формы нужен атрибут name:

<input type="text" id="zipCode" name="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">

и затем вы можете получить переданные значения, используя объект URL:

var url = new URL(location.href);
var zipCode = url.searchParams.get("zipCode");
Vineeth Chitteti
8 апреля 2018 в 07:55
0

Спасибо @Sebastian, извините, я не обновил вопрос должным образом, но мы обсуждаем отправку формы в chrome-расширении. Ваше предложение работает и для chrome-расширений? Во многих документах я видел, что document.addEventListener('DOMContentLoaded', function() является наиболее предпочтительным способом загрузки сведений о форме.

Sebastian Speitel
8 апреля 2018 в 07:57
0

Вы правы, что сама форма полностью функционирует после DOMContentLoaded, но в данный момент в ней нет значений

avatar
xianshenglu
8 апреля 2018 в 07:46
2

думаю, вы этого хотите, вы можете получить value только после нажатия на button;

document.addEventListener('DOMContentLoaded', function() {
  var zipCode = document.getElementById("zipCode");

  console.log("Zip Code is: " + zipCode.id);
  var btn = document.getElementById('button');
  btn.addEventListener('click', function() {
    event.preventDefault();
    console.log("Zip Code value: " + zipCode.value);
  }, false)

}, false);
<body style="width:320px;height:580px;">
  <form action="/main.html" style="position: center; text-align: left; padding-left: 20px">
    <h3>Zip Code</h3>
    <input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">
    <input type="submit" id="button" value="click me" style="font-family: 'Open Sans'" name="Submitted zip code">
  </form>
</body>
Vineeth Chitteti
8 апреля 2018 в 07:48
0

Большое спасибо @xianshenglu. Что делает метод event.preventDefault()?

xianshenglu
8 апреля 2018 в 07:50
0

предотвратить отправку формы @kai, если форма была отправлена, вы не увидите консоль