CODEWITHSUNDEEP
javascripthtml
Vương Phạm Quân
Vương Phạm Quân

Reputation: 35

cannot get data from a div

I have problem with getting data from a div tag. This is my 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>

and here it's on browser : enter image description here

after i click Add : enter image description here

I'm using document.getElementById("log").textContent to get data that i filled to this div, but it didn't work. How can I get my data ??? Please help. Thanks for reading my question.

Upvotes: 0

Views: 117

Answers (5)

Biplove Lamichhane
Biplove Lamichhane

Reputation: 4095

If you want to get data from the form, and you are using jquery. There is function called serialize() already in there. But, if you are in plain javascript, I guess you should use library for easy purpose. You can also make your own function. serialize library but I have not tested it. Just check if you get what you need.

You must be able to do sthg like this after you add that library:

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

  • Note:- if allData is not stored, try changing div to form, that should do work.

Upvotes: 0

Fide
Fide

Reputation: 1197

If You want to get the value of input fields, try to put this in your html:

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

Upvotes: 0

mohsen Zare
mohsen Zare

Reputation: 386

 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);

you can use this JS code after click a button

Upvotes: 3

Dejazmach
Dejazmach

Reputation: 800

I think what you want to get is the whole information. In that case you need to use the

form

tag instead of div. Div doesn't have a meaning related to data. It is just a container displayed as block.

Upvotes: 0

Engineer S. Saad
Engineer S. Saad

Reputation: 384

if you want to get data from input tag 

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>

Upvotes: 0

Related Questions