не может получить данные от div

Question

У меня проблема с получением данных из тега div. Это мой div

<div id="log">
        <div class="form-group" style="border-bottom:1px solid black;">
            <div class="form-group">
                <label class="col-sm-2 control-label"> Log Name <sup style="color:red">(*)</sup></label>
                <div class="col-sm-2">
                    <input type="text" class="form-control text banner_value" id="banner_value" />
                    <div class="help-block with-errors"></div>
                </div>

                <label class="col-sm-2 control-label"> Start Day <sup style="color:red">(*)</sup></label>
                <div class="col-sm-2">
                    <input type="date" class="form-control text" id="start_day" />
                    <div class="help-block with-errors"></div>
                </div>

                <label class="col-sm-2 control-label"> End Day <sup style="color:red">(*)</sup></label>
                <div class="col-sm-2">
                    <input type="date" class="form-control text" id="end_day" />
                    <div class="help-block with-errors"></div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label"> Filter Condition <sup style="color:red">(*)</sup></label>
            </div>

            <div id="banner_input" class="form-group">
                <label class="col-sm-2 control-label"> Banner </label>
                <div class="col-sm-3">
                    <input type="text" class="form-control text" id="banner_value" />
                    <div class="help-block with-errors"></div>
                </div>
                <div class="col-sm-3">
                    <input type="checkbox" class="control-label" id="banner_split"> <lable> split </lable><br>
                </div>
            </div>

            <div id="domain_input" class="form-group">
                <label class="col-sm-2 control-label"> Domain </label>
                <div class="col-sm-3">
                    <input type="text" class="form-control text" id="domain_value" />
                    <div class="help-block with-errors"></div>
                </div>
                <div class="col-sm-3">
                    <input type="checkbox" class="control-label" id="domain_split"> <lable> split </lable><br>
                </div>
            </div>
        </div>
    </div>

, и вот он в браузере:

после того, как я нажму кнопку Добавить:

Я использую document.getElementById("log").textContent, чтобы получить данные, которые я заполнил в этот div, но это не сработало. Как я могу получить свои данные ??? Пожалуйста помоги. Спасибо за чтение моего вопроса.

Answer 1

 function getValues() {
    var inputs = document.getElementById("log").getElementsByTagName("input");
    var values = [];
    for (i in inputs) {
      values.push(inputs[i].value);
    }
    console.log(values);
  }

<div id="log">
  <div class="form-group" style="border-bottom: 1px solid black;">
    <div class="form-group">
      <label class="col-sm-2 control-label">
        Log Name <sup style="color: red;">(*)</sup></label
      >
      <div class="col-sm-2">
        <input
          type="text"
          class="form-control text banner_value"
          id="banner_value"
        />
        <div class="help-block with-errors"></div>
      </div>

      <label class="col-sm-2 control-label">
        Start Day <sup style="color: red;">(*)</sup></label
      >
      <div class="col-sm-2">
        <input type="date" class="form-control text" id="start_day" />
        <div class="help-block with-errors"></div>
      </div>

      <label class="col-sm-2 control-label">
        End Day <sup style="color: red;">(*)</sup></label
      >
      <div class="col-sm-2">
        <input type="date" class="form-control text" id="end_day" />
        <div class="help-block with-errors"></div>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">
        Filter Condition <sup style="color: red;">(*)</sup></label
      >
    </div>

    <div id="banner_input" class="form-group">
      <label class="col-sm-2 control-label"> Banner </label>
      <div class="col-sm-3">
        <input type="text" class="form-control text" id="banner_value" />
        <div class="help-block with-errors"></div>
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="control-label" id="banner_split" />
        <lable> split </lable><br />
      </div>
    </div>

    <div id="domain_input" class="form-group">
      <label class="col-sm-2 control-label"> Domain </label>
      <div class="col-sm-3">
        <input type="text" class="form-control text" id="domain_value" />
        <div class="help-block with-errors"></div>
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="control-label" id="domain_split" />
        <lable> split </lable><br />
      </div>
    </div>
  </div>
</div>
<button onclick="getValues()">click me</button>

var inputs = document.getElementById("log").getElementsByTagName("input");

var values = [];

for (i in inputs) {
    values.push(inputs[i].value);
}

console.log(values);

Вы можете использовать этот JS код после нажатия кнопки

Answer 2

, если вы хотите получить данные из входного тега

function myFunction() {
  console.log(document.getElementById("myText").value) 
}

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="">
<button onclick="myFunction()">Try it</button>
</body>
</html>

Answer 3

Если вы хотите получить значение полей ввода, попробуйте указать это в вашем html:

    <script>
            const logYourLog = (e) => {
        console.log('Here is your value', document.getElementById("banner_value").value);      
      }
    </script>

Answer 4

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

form

вместо div. Div не имеет значения, связанного с данными. Это просто контейнер, отображаемый в виде блока.

Answer 5

Если вы хотите получить данные из формы, и вы используете jquery. Там уже есть функция serialize (). Но, если вы находитесь в простой javascript, я думаю, вы должны использовать библиотеку для простых целей. Вы также можете сделать свою собственную функцию. Сериализация библиотеки , но я не проверял ее. Просто проверьте, получите ли вы то, что вам нужно.

Вы должны быть в состоянии сделать что-то вроде этого после добавления этой библиотеки:

var allData = serialize(document.getElementById("log"));

• Примечание: - если allData не сохраняется , попробуйте изменить div на форму, которая должна работать.