Can anyone help and tell me why do i get a null value in the function

Question

Heres the Code

This is the Script

 <script>
 $(document).ready(function(){    
   $('#done_edit').click(function(){

    var name= document.getElementById('first_name').value;
    alert(name);
   });
});

This is for the form

<form id="passedit" class="submit">
<label>First Name:</label><input type="text"  name="first_name" class="form-control" value="<?php echo $row['name'];?>" />

<button type="submit" class="btn btn-info" id="done_edit" >DONE<span class="glyphicon glyphicon-check"></span></button>

Answer 1

Because you don't have an element with an Id set to first_name

you should have something like

<input type="text" id="first_name" class="form-control">

Answer 2

var name= document.getElementById('first_name'); You should have an element wich has the ID as "firstname". For example,`

<input type="text" id="first_name" value="Type your text here"/> Then you'll get the output as an object.

If you rewrite the mentioned line as follows,

var name= document.getElementById('first_name').value; You'll get "Type your text here" in your alert box. ie: Change the attribute name to id in your textbox.

Answer 3

Now you have in the alert the value of the element.

HTML

<form id="passedit" class="submit">
<label>ID Number:</label><input id="first_name" type="text" 
 name="id_number" class="form-control" value="<?php echo 
 $row['name'];?>" />
<button type=

JS

 $(document).ready(function(){    
   $('#done_edit').click(function(){
      var name= document.getElementById('first_name').value;
      alert(name);
   });
 });