Question

I have html similar to this

<input class="rowinput" type="text" id="text_input_1" size="1" value="3">
<input class="rowinput" type="text" id="text_input_2" size="1" value="0">
<select class="rowinput" id="select_input_3">
  <option value=""></option>
  <option value="0">aaaa</option>
  <option value="1" checked>bbbb</option>
  <option value="2">cccc</option>
  <option value="3">dddd</option>
</select>

now I need to use jquery to select all inputs and get their values, and create one string that expresses all the values. I can use this:

$('.rowinput').val();

this will work perfectly with text inputs, but for select inputs it does not. Because I need it get the text that corresponds to the value, not the value itself. For example, in the code above I need to get “bbbb” and not “1”.

then, what I am trying to do is to make a new function, say textVal() that gets the value from text inputs and get the text from select inputs:

$('.rowinput').textVal(); 

would return :
3
0
bbbb

I tried to use:

input.attr('type');

it works fine for text inputs. but for select it returns undefined

I don’t want to hard code it and treat each input individually because I need to keep my code extensible.
what is the smart way to do this?

Answer 1

To extract all values from class “.rowinput”. You could try something like bellow:

var concatenatedString = "";

$('.rowinput').each(function(){
var $this = $(this);

if($this.is('input')){
  concatenatedString += $this.val();
} 

if($this.is('select')) {
  concatenatedString += $this.children("option").is("selected").text();
}
});
alert(concatenatedString);

​