How to identify which SPAN when there are more than one

[Wayder]

At the moment I have..

<form class="buyform" method="post">
 Quantity: <span id="qtyspan"></span>
 <input name="buyformsubmit" type="submit" value="buy">
</form>

function select10(){
 var e = document.getElementById('qty').value;
 if(e == 10){
 document.getElementById('qtyspan').innerHTML = '<input name="qty" type="number" min="1" style="width:4em;" value="10">';
 }
}
function pageStart(){
 if(document.getElementById('qtyspan')){
 document.getElementById('qtyspan').innerHTML = '<select id="qty" name="qty" required><option value="1" selected> 1 </option><option value="2" > 2 </option><option value="3" > 3 </option><option value="4" > 4 </option><option value="5" > 5 </option><option value="6" > 6 </option><option value="7" > 7 </option><option value="8" > 8 </option><option value="9" > 9 </option><option value="10" > 10+ </option></select>';
 document.getElementById('qty').onchange = select10;
 }
}
window.onload = pageStart;

I hope the above is understandable. SPAN is populated using javascript. When 10 is selected, <select id=” qty” is replaced with <input id=”qty” for manual input.

I will have 8 of these forms on a page, all related to a product so I can’t use id=”qty” I need to use a unique id or a class.

Does anyone have any suggestions on how to do this? Any help would be appreciated

Thanks

Ray...

[lucy24]

id = qty1, id = qty2, id = qty3 ...

The trick is to achieve it without the dreaded "eval".*


* Not dreaded by me, especially. Just by someone, somewhere.

[Wayder]

I've been playing and came up with the following.

function select10(el){
if(el.value == 10){
var id = el.id;
newid = id.replace("sel","span");
document.getElementById(newid).innerHTML = '<input name="qty" type="number" min="1" style="width:3em;" value="10">';
}
}

<form class="buyform" method="post" action="/" autocomplete="off">
Quantity: <span id="qtyspan1">
<select id="qtysel1" name="qty" onChange="select10(this)" required>
<option value="1" selected> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
<option value="7"> 7 </option>
<option value="8"> 8 </option>
<option value="9"> 9 </option>
<option value="10"> 10+ </option>
</select>
</span>
<input name="buyformsubmit" type="submit" value="buy">
</form>
<form class="buyform" method="post" action="/" autocomplete="off">
Quantity: <span id="qtyspan2">
<select id="qtysel2" name="qty" onChange="select10(this)" required>
<option value="1" selected> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
<option value="7"> 7 </option>
<option value="8"> 8 </option>
<option value="9"> 9 </option>
<option value="10"> 10+ </option>
</select>
</span>
<input name="buyformsubmit" type="submit" value="buy">
</form>

Which works fine, but I am now trying to get this to work unobtrusivley.

Any suggestions gratefully received.

Thanks

[Fotiman]

Some things to keep in mind...
Users with JavaScript disabled will not be able to purchase more than 10.

To get this to work unobtrusively, you would need to remove the inline onChange handlers from your markup, and instead attach the handler from JavaScript code.

<script>
(function () {
  function select10() {
    if (this.value == 10) {
      var id = this.id,
        newid = id.replace("sel","span");
      document.getElementById(newid).innerHTML = '<input name="qty" type="number" min="1" style="width:3em;" value="10">';
    } 
  } 

  var ids = [
      'qtysel1',
      'qtysel2'
    ],
    el,
    i;
  for (i = 0; i < ids.length; i++) {
    el = document.getElementById(ids[i]);
    el.onchange = select10.bind(el);
  }
})();
</script>

Note, in my example I'm creating the array of id's, but a better implementation might be to assign a specific class to each of the elements that you're want to replace and getting all of the elements with that class name instead.

My example also relies on the "bind" method. If you need support in some older browsers (IE < 9, Safari < 5.1.4, etc.), then you'll also need to include a polyfill [developer.mozilla.org] for the bind function.

Also, my code doesn't do any error checking, so if (for example) one of the ids in your array was not found on the page, then you'd have an error in the for loop. All the more reason to find by class name instead.

Side note: On the injected HTML, don't include an inline style attribute. Instead, give it class that has the desired styles.

Hope that helps.

[Wayder]

>Users with JavaScript disabled will not be able to purchase more than 10.
clear

>To get this to work unobtrusively, you would need to remove the inline onChange handlers from your markup
yep, that's what I want to do

>On the injected HTML, don't include an inline style attribute
Clear, this is only testing

I can't specify the array as I do not know what will be there, so do you mean looping though something like:

var elements = document.getElementsByClassName(‘classname’);
for(var i=0; i<elements.length; i++){
if element changed do whatever
}

Thanks

[Fotiman]

In my example, I used an array of ids ('qtysel1', 'qtysel2'). Instead, give each of your select elements a class like "select-10'. Then the example would look like this:

<script>
(function () {
  function select10() {
    if (this.value == 10) {
      var id = this.id,
        newid = id.replace("sel","span");
      document.getElementById(newid).innerHTML = '<input name="qty" type="number" min="1" style="width:3em;" value="10">';
    } 
  } 

  var selectList = document.getElementsByClassName('select-10'),
    i,
    n;
  for (i = 0, n = selectList.length; i < n; i++) {
    selectList[i].onchange = select10.bind(el);
  }
})();
</script>

And then you'd need a polyfill for getElementsByClassName if you wanted to support IE < 9.

[Wayder]

OK, I need to read up on bind, but I think I get it.

I am away for a while but I can sneak out and use my laptop and pretend to read the news or watch a film while I play with this.

Thanks for your help.