How do I get input value and Selected Value of dynamically created inputs using JavaScript or JQuery in IE8 and IE9?

Question

I have this working in IE 7 using getElementById() but in IE8 and IE9 that does not work. What I am doing is I need to do validation on the select boxes to see that they are required and check what they selected to do other things. I also need to check the input boxes to see what the value is and it is required as well.

function saveTest(){
var startNumber=0;
var endNumber=3;

// Works
alert(document.myForm.mySelect_1.value);

for (i = startNumber; i <= endNumber; i++) {
  // I know this is not right but I am trying everything
      alert(document.myForm.mySelect_+i.value);

      // Using JQuery to try to solve the issue and this does not work for me.
      alert($('#mySelect_'+i).val());

  } 
}

I know these are not dynamically created belwo but this is just to help me find the answer to this issue. I am creating more selects

    <input name="myText_1" id="myText_1" value="">
    <br />
    <select name="mySelect_1" id="mySelect_1">
        <option value="0">- - - Select One - - -</option>
        <option value="1">item 1</option>
        <option value="2">item 2</option>
        <option value="3">item 3</option>
        <option value="4">item 4</option>
        <option value="5">item 5</option>
    </select>
    <br />

    <input name="myText_2" id="myText_2" value="">
    <br />
    <select name="mySelect_2" id="mySelect_2">
        <option value="0">- - - Select One - - -</option>
        <option value="1">item 1</option>
        <option value="2">item 2</option>
        <option value="3">item 3</option>
        <option value="4">item 4</option>
        <option value="5">item 5</option>
    </select>
    <br />

    <input name="myText_3" id="myText_3" value="">
    <br />
    <select name="mySelect_3" id="mySelect_3">
        <option value="0">- - - Select One - - -</option>
        <option value="1">item 1</option>
        <option value="2">item 2</option>
        <option value="3">item 3</option>
        <option value="4">item 4</option>
        <option value="5">item 5</option>
    </select>
    <br />

<a href="javascript:saveTest();">Save</a>

If I am not clear enough let me know. I will do my best to explain anything you do not understand.

Thanks for your time.

Answer 1

The following line is not correct; you are trying to concatenate a variable name, called mySelect_ to an integer:

alert(document.myForm.mySelect_+i.value);

Instead, you should use the associative array syntax:

alert(document.myForm['mySelect_'+i].value);

Also, within this same loop, you should start from 1 instead of 0 , since there's no element called mySelect_0 .

Here's a working DEMO .

Answer 2

You have created drop downs with Names

Try using

$('select[name=mySelect_'+i+']').val();

else

$("#id option:selected").text()