Need alternative to getElementByID to update text box via select onchange event

user_6785501 0
Viewed 27

I am creating an array of form elements by copying field in Javascript. I could not use ID's because the fields are system generated.

What I need is a way to copy the selected text from a drop down and paste it into the very next input box.

My Layout:

 (row 1) SELECT | INPUT
 (row 2) SELECT | INPUT
 (row 3) SELECT | INPUT


function updateField(e){    
    var selectElement = e.target.value;
    alert(selectElement); 
    // Got it! works fine
    //If I use an id on the input field, it is the same for ALL <tr>'s. 
    //The following line works almost. But it puts it in the top TR only.
    //That over writes what was there from the TR above.
    document.getElementById("SomeID").value = selectElement;   
    //not gonna work for me  
}
<table>
 <tr>   
   <td>
     <select onchange='updateField(event);' name="tom">
        <option value="one">one</option>
        <option value="two">two</option>
     </select>
   </td>
   <td>
     <input name="sue" value="aaa" />
   </td>
 </tr>

 <tr>
   <td>
     <select onchange='updateField(event);' name="tom">
        <option value="one">one</option>
        <option value="two">two</option>
     </select>
   </td>
   <td>
     <input name="sue" value="bbb" />
   </td>
 </tr>
</table>

I need to capture the select box value and put it in the input box value of the same <tr>.

What I need is a way to pass the retrieved info to next form field (input box) without using any id or class or such thing. Just a simply pass this result to the very next form field in the next td. And it can not have an id on any td, tr, select, or input. Surely there is a way to grab the next control without specifically specifying it??

When I manually type different messages into the input fields (which all have the same name), I get exactly what I want in my form post!

PHP Post Results:

 $myNumbers = $_POST['sue']; 
 count("$myNumbers") = 1;
 $myNumbers[0] = "aaa";
 $myNumbers[1] = "bbb";

But I don't want "aaa" or "bbb" (typed in vales). I want the items selected for the individual rows.

Thanks for your help! :)

javascript
1 Answers

Want you want to do is transverse the DOM tree from your <select> element till you get to your <input>.

One way you can do this is by using the closest() DOM method to get the parent <td> or parent <tr>. From there you can find the sibling <td> by using nextElementSibling, and then the input from there, or find the input from the parent <tr> using querySelector()

var selectElememt = e.target;
var parentTD = selectElement.closest('td');
var siblingTD = parentTD.nextElementSibling;
var inputElement = siblingTD.querySelector('input');
inputElement.value = selectElement.value;

//using parent tr instead
var selectElememt = e.target;
var parentTR = selectElement.closest('tr');
var inputElement = parentTR.querySelector('input');
inputElement.value = selectElement.value;

If your structure ends up being different or changed, eg you add another <td> or more input elements you will need to change how you transverse the DOM tree to get to your desired input.

user_5605930
Related