CODEWITHSUNDEEP
javascriptjquery
mycohbasilan
mycohbasilan

Reputation: 31

Getting all the values inside the Div

I have a div that has multiple input fields. My HTML looks like this:

<div id="mainDiv">
  <input type="text" id="price" /> <br/>
  <input type="text" id="tax" />
  <input type="text" id="others" />
</div>
<img src="img/img.gif" onclick="getAllValues();" />

After I click the image, it must get all the values inside the mainDiv. How can I do this?

Upvotes: 0

Views: 1637

Answers (5)

guradio
guradio

Reputation: 15555

$("#getallvalues").click(function() {

  var values = $("#mainDiv input").map(function() {
    return $(this).val()
  }).get().join(",");

  console.log(values)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
  <input type="text" id="price" /> <br/>
  <input type="text" id="tax" />
  <input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />

Loop through each input then get the value and use .map()

var price = 0;
var tax = 0;
var others = 0;
$("#getallvalues").click(function() {

  $("#mainDiv input").each(function() {
    if ($(this).attr("id") == "price") {

      price = $(this).val()

    }
    if ($(this).attr("id") == "tax") {

      tax = $(this).val()

    }

    if ($(this).attr("id") == "others") {

      others = $(this).val()

    }

  })

  console.log("price " + price)
  console.log("tax " + tax)
  console.log("others " + others)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
  <input type="text" id="price" /> <br/>
  <input type="text" id="tax" />
  <input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />

Upvotes: 1

Alireza Yusefi
Alireza Yusefi

Reputation: 1

$('#mainDiv input').each(function(){
   console.log(this.val());
})

Upvotes: 0

Vishnu
Vishnu

Reputation: 1534

Another way of doing this is like follows:

$('#mainDiv').find('input').each(function (index, element) { var yourValue = element.value; // or $(element).val(); // And rest of your code });

Upvotes: 0

Venkata Krishna Reddy
Venkata Krishna Reddy

Reputation: 672

Loop through all the inputs in mainDiv 

$('#mainDiv input').each(function(){
// Do what ever
})

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use .map() to iterate over element and return the value in call back along with .get() to get them in array:

function getAllValues(){
  $('#mainDiv input').map({
     return this.value;
  }).get();  // Output: ["priceval","taxval","otherval"]
}

You can use above array to create the data in whichever format(csv,json,etc) you want for further processing.

Upvotes: 0

Related Questions