I want to get value from the input column using querySelector. I need to use two id to get the correct column. The second id is stored in a variable and its an integer value. I have tried different things but I am not getting anything. Currently it gives me null.

 checkDescriptionField = document.querySelector('#methodProperties input#'+'descriptionFieldId'); 
 if(typeof checkDescriptionField !== 'undefined' && checkDescriptionField !== null)
        {
            descriptionFieldValue = document.querySelector('#methodProperties input#'+'descriptionFieldId').textContent; 
        }

The outer id is methodProperties and the inner is input id="0eca409e-e2f7-467d-bd5e-dff9b63e3715" and I want to get its value ="Customers"

<div id="methodProperties">
<td role="gridcell">
<input id="0eca409e-e2f7-467d-bd5e-dff9b63e3715" class="k-textbox gridTable propertiesField" value="Customers" readonly="" data-role="droptarget"   type="text">
<span class="errorTooltip" style="display: none;">
<span class="deleteTooltip" style="padding: 5px; display: inline;" title="Delete Value" data-role="tooltip">
</td>

I tried this but I get invalid error

checkDescriptionField = document.querySelector('#methodProperties input#'+descriptionFieldId); 
if(typeof checkDescriptionField !== 'undefined' && checkDescriptionField !== null)
        {
            descriptionFieldValue = document.querySelector('#methodProperties input#'+descriptionFieldId).textContent; 
        }

I want to get value from the input column using querySelector. I need to use two id to get the correct column. The second id is stored in a variable and its an integer value. I have tried different things but I am not getting anything. Currently it gives me null.

 checkDescriptionField = document.querySelector('#methodProperties input#'+'descriptionFieldId'); 
 if(typeof checkDescriptionField !== 'undefined' && checkDescriptionField !== null)
        {
            descriptionFieldValue = document.querySelector('#methodProperties input#'+'descriptionFieldId').textContent; 
        }

The outer id is methodProperties and the inner is input id="0eca409e-e2f7-467d-bd5e-dff9b63e3715" and I want to get its value ="Customers"

<div id="methodProperties">
<td role="gridcell">
<input id="0eca409e-e2f7-467d-bd5e-dff9b63e3715" class="k-textbox gridTable propertiesField" value="Customers" readonly="" data-role="droptarget"   type="text">
<span class="errorTooltip" style="display: none;">
<span class="deleteTooltip" style="padding: 5px; display: inline;" title="Delete Value" data-role="tooltip">
</td>

I tried this but I get invalid error

checkDescriptionField = document.querySelector('#methodProperties input#'+descriptionFieldId); 
if(typeof checkDescriptionField !== 'undefined' && checkDescriptionField !== null)
        {
            descriptionFieldValue = document.querySelector('#methodProperties input#'+descriptionFieldId).textContent; 
        }

• javascript
• jquery-selectors

Share Improve this question Follow edited Oct 13, 2016 at 14:02 مسعود asked Oct 13, 2016 at 13:46 مسعودمسعود 6891010 silver badges2626 bronze badges 14

• See @gurvinder372's answer. This has nothing to do with jQuery btw. – sandrooco Commented Oct 13, 2016 at 13:49
• there are duplicates column with same id – مسعود Commented Oct 13, 2016 at 13:51
• 4 @Masood That's so wrong because IDs must be unique on document context – A. Wolff Commented Oct 13, 2016 at 13:51
• Doesn't matter, still nothing to do with jQuery. Bad html structure... only use id's once. – sandrooco Commented Oct 13, 2016 at 13:52
• 1 And btw, you have a td as direct child of a div, still invalid!!! Who for the sake of God write this HTML markup?!.... If a coworker, tell your boss to fire him before he burns the office – A. Wolff Commented Oct 13, 2016 at 13:55

 |  Show 9 more ments

2 Answers 2

Sorted by: Reset to default 5

The outer id is methodProperties and the inner is input id="0eca409e-e2f7-467d-bd5e-dff9b63e3715" and I want to get its value ="Customers"

Try this

descriptionFieldValue = document.querySelector( '#' + descriptionFieldId ).value; 

or since there is only one input in a methodProperties

descriptionFieldValue = document.querySelector( '#methodProperties input' ).value; 

If you want to repeat the id, then use data-id attribute instead

<div data-id="methodProperties">
  <td role="gridcell">
    <input value="customers">
  </td>
</div>

and js as

descriptionFieldValue = document.querySelector( 'div[data-id="methodProperties"] input' ).value;  //this will take the value from first methodProperties

You should use document.querySelector(...).value instead of .textContent. This way you can access the value of the input field.

https://jsfiddle/e0h0ajdb/