CODEWITHSUNDEEP
javascriptjquery
olliejjc16
olliejjc16

Reputation: 371

Can't retrieve the value of input fields using normal JQuery/Javascript

Hi I'm having a problem retrieving the text value of input fields. The two input fields are hidden inside table rows that only appear when a specific option is chosen in a select element. I'm not sure is this affecting accessing the input fields data for some reason. The below function shows how the table rows are shown and hidden depending on what the value of the select option is.

I've tried to get the values both the normal jquery way and the javascript way: 

$('#doc_reference').attr('value'); document.getElementById('doc_reference').value

but no luck with either, can anyone help?

//toggle doc_reference and y_reference dependent on modelling language chosen
  $("#langId").change(function() {
    var val = $(this).val();
    console.log(val);
    if(val == 1) {
        $('.hideShowTr').hide();
    }
    else if(val == 2) {
        $('.hideShowTr').show();
    }
  });

var docReference =$('#doc_reference').attr('value');
var yReference = $('#y_reference').attr('value');    

<tr class = 'hideShowTr' style='display: none;'>
    <td>
        <span style='display:block; position:relative; padding:0; z-index:0;'>
          <input type='text' name='doc_reference' id='doc_reference' style='position:absolute; width:195px; z-index:151;'></input>
        </span>
    </td>
</tr>

<tr class = 'hideShowTr' style='display: none;'>
    <td>
        <span style='display:block; position:relative; padding:0; z-index:0;'>
          <input type='text' name='y_reference' id='y_reference' style='position:absolute; width: 195px; top:2px; z-index:151;'></input>
        </span>
    </td>
</tr>

Upvotes: 1

Views: 51

Answers (1)

Rino Raj
Rino Raj

Reputation: 6264

►You dont have attribute value in your element.

Use this piece of code to retrieve value.

$('#doc_reference').val();

DEMO 

$("#doc_reference,#y_reference").keyup(function() {
  alert($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<tr class='hideShowTr'>
  <td>
    <span style='display:block; position:relative; padding:0; z-index:0;'>
          <input type='text' name='y_reference' id='y_reference' style='position:absolute; width: 195px; top:2px; z-index:151;'>
        </span>
  </td>
</tr>

Upvotes: 3

Related Questions