Catching multiple values using JS

 <span>
    <label class="label">Color</label>
    <span class="foo"><input name="Color" value="Blue" class="customs" maxlength="100" type="text"/></span>
    </span>
 </span>

 <span>
     <label class="label">Brand</label>
      <span class="input-large"><input name="Brand" value="xxx" class="customs" maxlength="100" type="text"/></span>
    </span>
 </span>

I want all the input value using JS. I wrote

$('.customs').each(function() {

    alert($('.customs').val());

});

But Every times it gives me the first input value.

Required Alert output: Blue, Brand
Output co开发者_开发知识库mes: Blue, Blue 

---

replace

alert($('.customs').val());

with

alert($(this).val());

---

You are evaluating the selector on each iteration, and I guess that when val is called on an array, it selects the first value.

Use

$('.customs').each(function() {
    alert($(this).val());
});

Or even better,

$('.customs').each(function() {
    alert(this.value);
});

as there is no need for the layer provided by val here.

---

double check value vs. name in your two input definitions

---

Since you're using a class as a selector, you're getting a collection. You can do something with it by putting it an array or iterating over it.

$('.customs').each(function() {
   alert($(this).val());//use this to refer to the current object
});