1

Here is what I have so far...

<html>
<head>
<title>addForm</title>
<link href="css/addForm.css" rel="stylesheet" type="text/css">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="../lib/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery/jquery.autocomplete.min.js"></script>
</head>

<body>
<div>
<form id="addForm" name="addForm" method="post" action="">
...
<div id="container">
<p id="add_field">
<label><a href="#">Add A Class Code</a></label>It may take a moment for your Class Code to appear in the dropdown box.
</p>
</div>
<label>Class Screens E: </label>
<select name="ClassScreenE" id="ClassScreenE" size="5"></select>
<br>
...
</form>
</div>

<script language="javascript" type="text/javascript">
$(function(){
var count = 0;

$('p#add_field').on('click', function(){
        count += 1;

$('#container').append(
'<label>ClassCode: </label>' + '<input type="text" class="autocomplete" name="ClassCode[]" id="ClassCode_' + count + '" size="34" maxlength="3">' + ' Payroll: ' + '<input type="text" name="Payroll[]" id="Payroll_' + count + '" size="10" onKeyPress="return numbersonly(this, event)">' + '<br>')
$(".autocomplete").autocomplete("scripts/findClassCode.php")
});
})

**//Edited in the following bit from Femi
//This seems to work when running 'jQuery("#ClassCode_" + i).val();' in Chrome's Inspector
//Now I need to get a solid value assigned when looping through so I can dynamically call each value to affect the a select box.
var val, i = 1, inp = jQuery("#ClassCode_" + i);
    while(inp.length > 0){
// get the value
val = inp.val();
    ++i;
inp = jQuery("#ClassCode_" + i);
}**

</script>

</body>
</html>

All of this works perfectly. When I click the link, it generates the next set of fields while maintaining their attributes so the autocomplete piece will work. I now need to use the results of each "ClassCode_' + count + '" within the form to determine what will dynamically appear in another select box pulling data from MySQL. My issue is converting the dynamic value into a variable that can be used without having to submit the form. I've spent the day scouring the Internet to get this one working to no avail. Does anyone have any suggestions?

Mike
  • 104
  • 1
  • 10

1 Answers1

0

A little pedantic, but:

var val, i = 0, inp = jQuery("#container").find("input").find("#ClassCode_" + i);
while(inp.length > 0){
   // get the value
   val = inp.val();
   ++i;
   inp = jQuery("#container").find("input").find("#ClassCode_" + i);
}

Try that?

Femi
  • 64,273
  • 8
  • 118
  • 148
  • I'll go ahead and thank you for your response as well as apologize in advance. Javascript really isn't my thing. So if I have multiple values for ClassCode_N, how would I reference each one individually without having hard coded values? – Mike Sep 24 '12 at 14:34
  • I'm currently looking at the .val() page on the Jquery site at http://api.jquery.com/val/ in the hopes of better understanding. I think my issue is that I'm trying to get up to speed on this stuff so quickly that I'm frustrating myself. – Mike Sep 24 '12 at 14:59
  • I've put the call to `val` in the code above: try printing that out (using `console.log` on Firefox or Chrome). – Femi Sep 24 '12 at 16:07
  • That's why I had asked. I tried a console.log(val); and it came back as undefined. I may be doing that wrong too though. – Mike Sep 24 '12 at 16:37
  • Ah, you shouldn't get undefined unless `inp.length` is 0: if that is zero then the `find` expression is wrong. Try changing the initial value of `i` to be the number used in the first set of dynamic controls (I'd assumed that was 0, but I could have assumed wrong). – Femi Sep 24 '12 at 16:53
  • You're right. I have "count" set to zero initially but then increments to one when the first field is added. It still comes back as undefined though after re-setting i equal to one. – Mike Sep 24 '12 at 17:07
  • Agh. I updated the selector to be `#ClassCode_` instead of `ClassCode_`. Try now. – Femi Sep 24 '12 at 18:04
  • hehe. Yeah. I do that kind of stuff all the time. I had fixed that one already. – Mike Sep 24 '12 at 18:08
  • This is the HTML output I'm getting back upon inspection...



    – Mike Sep 24 '12 at 20:18
  • Well, `jQuery("#ClassCode_1").val()` should not be undefined: once you can figure out why that is happening you should be good. – Femi Sep 24 '12 at 20:28
  • but if I try something like jQuery("#ClassCode_" + i).val() it returns an unrecognized expression for #ClassCode_$count. – Mike Sep 24 '12 at 21:55
  • Actually... I just changed the code back to include the #'s, ran jQuery("#ClassCode_" + i).val() and came up with the first field, "ClassCode_1". I'm still trying to get a second value past that. – Mike Sep 24 '12 at 22:10
  • Edited Femi's code piece into the main question. That allows me to see the value of the first dynamic text box when running 'jQuery("#ClassCode_" + i).val()' in Chrome's Code Inspector but not any other values of added text boxes. I am still trying to get it to where the code will be able to see which class was picked to populate the select field. Hmm... – Mike Sep 25 '12 at 14:02