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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tech1guyAuthor Commented:
Excellent help....Thanks very much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Frameworks

From novice to tech pro — start learning today.