prototype next function

Question

I have prototype 1.5 and I can't get the "next" function to work:

Event.observe('sameAsBefore', 'click', function(item){
    checkbox = Event.element(item);
    if (checkbox.checked == true) {
        checkbox.next('address1').value = $('hidden_address1').value;
    }
}

Together with the following html:

<div class="some_div">
    <a class="sameAsBefore">Same</a>
    <input class="address1" name="parent[address1]" size="30" type="text" /> 
</div>

<div class="some_div">
    <a class="sameAsBefore">Same</a>
    <input class="address1" name="parent2[address1]" size="30" type="text" /> 
</div>

I want to trigger the update in the field in the same div, that is why I am using .next().

ERROR:

checkbox.next("address1") is undefined
anonymous(click clientX=645, clientY=300)applicat...259176252 (line 32)
[Break on this error] checkbox.next('address1').value = $('hidden_address1').value;\n

What might be wrong?

Answer 1

I cant see why you are even using next in this context. If you know the ID of the element you should just target via that:

$('address1').value = $('hidden_address1').value;

You should certainly never need to target via .next('#address1') (mentioned in the comments) as that ID should be unique to the document.

If this doesn't solve your issue please post a fuller HTML snippet and I will be able to tell you how you should target the element properly. On a sidenote, is there any reason why you are not using a more up-to-date version of prototype as you are using a pretty old version if you're on 1.5

Answer 2

Your sample markup doesn't look like it's going to work since you have duplicate IDs. That aside, it looks like the next() function takes a CSS rule as a selector.

Have you tried this:

Event.observe('sameAsBefore', 'click', function(item){
  checkbox = Event.element(item);
  if (checkbox.checked == true) {
    checkbox.next('.address1').value = $('hidden_address1').value;
  }
}

This also assumes that you have an element with the ID of "hidden_address1".

Answer 3

I dont see any IDs in the example. I see only *class*es are used. And I also dont see any checkboxes.

If the avobe html is like as fllowing,

    <div class="some_div">
        <a class="sameAsBefore">Same</a>
        <input class="address1" name="parent[address1]" size="30" type="text" />
    </div>
    <div class="some_div">
        <a class="sameAsBefore">Same</a>
        <input class="address1" name="parent2[address1]" size="30" type="text" />
    </div>

You can achieve your desired output by using,

$$('.sameAsBefore').each(function(item){
    item.observe('click', function(e){ 
        item.next('.address1').value = "tested OK"; 
    });
}); 

Thanks.