jQuery setting value of dynamic controls

I am using ASP.NET 3.5 SP1 with MVC 1, along with jQuery 1.3.2.

I have a form as follows:

<form>
<input id="RollNumber" name="RollNumber" type="text" />
<input id="ListOfRollNumbers[0]_RollNumber" name="ListOfRollNumbers[0].RollNumber" type="text" />
<input id="ListOfRollNumbers[1]_RollNumber" name="ListOfRollNumbers[1].RollNumber" type="text" />
<input id="ListOfRollNumbers[2]_RollNumber" name="ListOfRollNumbers[2].RollNumber" type="text" />
<input id="ListOfRollNumbers[3]_RollNumber" name="ListOfRollNumbers[3].RollNumber" type="text" />
<input id="ListOfRollNumbers[4]_RollNumber" name="ListOfRollNumbers[4].RollNumber" type="text" />
</form>

What I am trying to accomplish is: When user fills "RollNumber" and tabs off, then I want to get the value of "RollNumber" and add 1 and set the subsequent rollnumbers. But I am not able to get it done.

e.g RollNumber = 1000 and user tabs off, then ListOfRollNumbers[0] = 1001 should be set.....then ListOfRollNumbers[1] = 1002 and so on...

Please someone please help me.
tech1guyAsked:
Who is Participating?
 
hieloCommented:
>>the problems seems to be that all my controls already has a common class assigned to them.
The previous post should work, BUT based on that comment, it sounds like you are not aware that elements CAN have multiple classes.  Each one needs to be separated by a space - ex:

<input id="field1" class="required numeric bold"..>
<input id="field2" class="required string italic"..>
0
 
hieloCommented:
<script>
$(function(){
  $('#RollNumber').bind('change',function(){
    var val= this.value;
    $('input[id^="ListOfRollNumbers"]').each(function(){
       this.value = ++val;
    });
  });
});
</script>
0
 
tech1guyAuthor Commented:
I tried your function, but it changed ALL the control values to rollNumbers......e.g

ListOfRollNumbers[4]_RollNumber[i]_NAME is also changed to 1001.
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
tech1guyAuthor Commented:
I tried your function, but it changed ALL the control values to rollNumbers......e.g

ListOfRollNumbers[4]_NAME is also changed to 1001.
0
 
tech1guyAuthor Commented:
This is what I have now:

    <script type="text/javascript">
    $(document).ready(function(){
            $("#RollNumber").change(function() {
                var mainRollNbr = $('#RollNumber').val();
                <!-- How could Infinity just set the value of ListOfRollNumbers[0]_RollNumber top mainRollNbr+1 and so on; but I do not want top change the values of ListOfRollNumbers[0]_StudentName and other controls. -->
            });
           });
    </script>
0
 
tech1guyAuthor Commented:
This is what I have now:

    <script type="text/javascript">
    $(document).ready(function(){
            $("#RollNumber").change(function() {
                var mainRollNbr = $('#RollNumber').val();
                <!-- How could I just set the value of ListOfRollNumbers[0]_RollNumber top mainRollNbr+1 and so on; but I do not want to change the values of ListOfRollNumbers[0]_StudentName and other controls. -->
            });
           });
    </script>
0
 
hieloCommented:
what I gave you earlier will work on anything that has an ID that STARTS WITH "ListOfRollNumbers". Based on the "narrow" sample markup you supplied, that seemed to be what was common among the set of elements you described.  From your feedback, it sounds like there are OTHER elements that also start with "ListOfRollNumbers", but I don't know anything else about the rest of your markup to narrow the set of matched elements.

My suggestion to you would be to give your elements a common class to target that specific set:


<form>
<input id="RollNumber" name="RollNumber" type="text" />
<input id="ListOfRollNumbers[0]_RollNumber" class="tech1guy" name="ListOfRollNumbers[0].RollNumber" type="text" />
<input id="ListOfRollNumbers[1]_RollNumber" class="tech1guy" name="ListOfRollNumbers[1].RollNumber" type="text" />
<input id="ListOfRollNumbers[2]_RollNumber" class="tech1guy" name="ListOfRollNumbers[2].RollNumber" type="text" />
<input id="ListOfRollNumbers[3]_RollNumber" class="tech1guy" name="ListOfRollNumbers[3].RollNumber" type="text" />
<input id="ListOfRollNumbers[4]_RollNumber" class="tech1guy" name="ListOfRollNumbers[4].RollNumber" type="text" />
</form>

<script>
$(function(){
  $('#RollNumber').bind('change',function(){
    var val= this.value;
    $('input.tech1guy').each(function(){
       this.value = ++val;
    });
  });
});
</script>

Open in new window

0
 
tech1guyAuthor Commented:
This is my complete page where I just want to change ListOfRollNumbers[0]_RollNumber.

<form>
  <input id="StartingRollNumber" name="StartingRollNumber" type="text" />
  <table>
    <tr>
      <td>
        <input id="ListOfRollNumbers[0]_RollNumber" name="ListOfRollNumbers[0].RollNumber" type="text" />
      </td>
      <td>
        <input id="ListOfRollNumbers[0]_StudentName" name="ListOfRollNumbers[0].StudentName" type="text" />
      </td>
      <td>
        <input id="ListOfRollNumbers[0]_TeacherName" name="ListOfRollNumbers[0].TeacherName" type="text" />
      </td>
    </tr>

    <tr>
      <td>
        <input id="ListOfRollNumbers[1]_RollNumber" name="ListOfRollNumbers[1].RollNumber" type="text" />
      </td>
      <td>
        <input id="ListOfRollNumbers[1]_StudentName" name="ListOfRollNumbers[1].StudentName" type="text" />
      </td>
      <td>
        <input id="ListOfRollNumbers[1]_TeacherName" name="ListOfRollNumbers[1].TeacherName" type="text" />
      </td>
    </tr>

    <tr>
      <td>
        <input id="ListOfRollNumbers[2]_RollNumber" name="ListOfRollNumbers[2].RollNumber" type="text" />
      </td>
      <td>
        <input id="ListOfRollNumbers[2]_StudentName" name="ListOfRollNumbers[2].StudentName" type="text" />
      </td>
      <td>
        <input id="ListOfRollNumbers[2]_TeacherName" name="ListOfRollNumbers[2].TeacherName" type="text" />
      </td>
    </tr>
  </table>
</form>
0
 
tech1guyAuthor Commented:
I tried your 2nd suggested option (assigning class) but it does NOT seem to work.
0
 
tech1guyAuthor Commented:
the problems seems to be that all my controls already has a common class assigned to them.
0
 
hieloCommented:
OK, then instead of targetting:
"id starts with ListOfRollNumbers" => $('input[id^="ListOfRollNumbers"]')

let's target:
"id ends with RollNumber" => $('input[id$="RollNumber"]')
<script>
$(function(){
  $('#RollNumber').bind('change',function(){
    var val= this.value;
    $('input[id$="RollNumber"]').each(function(){
       this.value = ++val;
    });
  });
});
</script>

Open in new window

0
 
tech1guyAuthor Commented:
Excellent help....Thanks very much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.