k8rv k8rv - 2 months ago 9
HTML Question

How to set the next input field without class or ID

I am a novice at JQuery and Javascript. I have a table that is dynamically created (using DataTables plugin) and has 6 columns and 0 or more rows. The first four columns includes two drop down menus and two input fields. I am trying to set the value of the very next input field based on what they select in the corresponding drop down menu.

In the example below, the first dropdown has two values: Site1 and Site2. If the user selects Site2 then the onchange event should fire and the function getSiteObjects() will populate the very next input field with a value. I do not know which dropdown menu they are selecting but I do know that the very next form field will be the corresponding input field that I want to set. How can I set the next input field?

Snippet of the HTML:

<tr class="customizationRow odd" role="row">
<td class="sourceSiteCell">
<div class="form-group">
<select class="form-control user-input" onchange="getSiteObjects(this)">
<option class="option"/>
<option class="option">Site1</option>
<option class="option">Site2</option>
</select>
</div>
</td>
<td class="sourceObjectCell">
<input class="form-control user-input" type="text" value="">
</td>
<td class="targetSiteCell">
<div class="form-group">
<select class="form-control user-input" onchange="getSiteObjects(this)">
<option class="option"/>
<option class="option">Site1</option>
<option class="option">Site2</option>
</select>
</div>
</td>
<td class="targetObjectCell">
<input class="form-control user-input" type="text" value="">
</td>
<!-- More of the same code for the other columns -->
</tr>


JavaScript Function:

function getSiteObjects(select) {
var selectedSite = select.value; // Gets the value selected

<!-- Make an ajax call to get the value from a REST service -->
$(this).next('input').val("Hello1"); // Doesn't work
$(this).find('input').val("Hello2"); // Doesn't work
// select.next('input').val("Hello3"); // Doesn't work
}


I created a jsFiddle demo of my issue: jsFiddle Demo

Answer

$() is the jQuery constructor function.

this is a reference to the DOM element of invocation.

so basically, in $(this), you have to pass the this (in your case received parameter select) in $() as a parameter so that you could call jQuery methods and functions.

function getSiteObjects(select) {
    var _this = $(select);
    _this.closest('td').next('td').find('input').val(_this.val());
}
.console-line
{
    font-family: monospace;
    margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<tr>
  <th>Source Site</th>
  <th>Source Object</th>
  <th>Target Site</th>
  <th>Target Object</th>
</tr>
<tr class="customizationRow odd" role="row">
    <td class="sourceSiteCell">
        <div class="form-group">
            <select class="form-control user-input" onchange="getSiteObjects(this)">
                <option class="option"/>
                <option class="option">Site1</option>
                <option class="option">Site2</option>
            </select>
        </div>
    </td>
    <td class="sourceObjectCell">
        <input class="form-control user-input" type="text" value="">
    </td>
    <td class="targetSiteCell">
        <div class="form-group">
            <select class="form-control user-input" onchange="getSiteObjects(this)">
                <option class="option"/>
                <option class="option">Site1</option>
                <option class="option">Site2</option>
            </select>
        </div>
    </td>
    <td class="targetObjectCell">
        <input class="form-control user-input" type="text" value="">
    </td>
<!-- More of the same code for the other columns -->
</tr>
</table>

Comments