title: why this function is not working? Showing error of val of null
body: <p>the function is getting called from the modal table. and the table body is accessed by ajax. in this table two each of the rows is carrying two textboxes. Its IDs are different for each row and each textbox. I will show my codes below.</p>
  
  <p>the <strong>ajax function</strong> is </p>
  
  <pre><code>$(document).ready(function(){
      /////////////// Invoice Link Click ////////////////
      $("#invoice").click(function(){
  
          var rowID=[];
  
          ///////// Initialize and assign row row value /////////////
          rowID = arrays;
          var tempArrays='';
          for(i=0;i&lt;arrays.length;i++){
          if(arrays[i]!=''){
              if(tempArrays!=''){
                  tempArrays=tempArrays+','+arrays[i];
                  }
              else{
                  tempArrays=arrays[i];
                  }
  
  
              }
          }
  
          alert("SUCCESS ALERT" +tempArrays);
  
          alert(typeof tempArrays);
          if(rowID!=''){
              $.ajax({
                  url:'&lt;?php echo base_url(); ?&gt;index.php/Ajax_calls/invoicingFetch',
                  type: 'POST',
                  data:{tempArrays:tempArrays},
  
                  success: function(data){
  
                      $('#newtest').html(data);
                      alert("SUCCESSFULLY RETURNED............!!!!!!!!");
  
                      }
                  });
  
              }
  
  
          });
      }); 
  </code></pre>
  
  <p><em>In</em> <strong>AJAX Controller</strong> <em>Function</em> :</p>
  
  <pre><code>public function invoicingFetch(){
      if(isset($_POST['tempArrays'])){
              $output='';
              $postedVal=$this-&gt;input-&gt;post('tempArrays');
              $myArray = explode(',',$postedVal);
  
              $this-&gt;load-&gt;model('Ajax_model');
              $arrayLen=sizeof($myArray);
              for($i=0;$i&lt;$arrayLen;$i++)
              {
                  $arre=$myArray[$i];
                  $records = $this-&gt;Ajax_model-&gt;getRawdataGDSSingle($arre);
                  foreach($records as $row){
                      $saleid='sale'.$row-&gt;slno;
                          $marginid='margin'.$row-&gt;slno;
                      $output.='
  
                      &lt;tr&gt;
                          &lt;td style="text-align:center !important;"&gt;&lt;input type="checkbox" id="'.$row-&gt;slno.'"  /&gt; &lt;/td&gt;
                          &lt;td&gt;'.$row-&gt;NAME.' &lt;/td&gt;
                          &lt;td&gt;'.$row-&gt;TOTAL.' &lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="'.$saleid.'" name="saleamount" onKeyPress="UpdateMargin('.$saleid.','.$marginid.','.$row-&gt;TOTAL.')" onChange="UpdateMargin('.$saleid.','.$marginid.','.$row-&gt;TOTAL.')" value="'.$row-&gt;TOTAL.'" /&gt; &lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="'.$marginid.'" name="marginamount" onchange="UpdateSale('.$marginid.','.$saleid.','.$row-&gt;TOTAL.')" value="0"  /&gt; &lt;/td&gt;
                          &lt;td&gt;'.$row-&gt;BKD_BY.' &lt;/td&gt;
                          &lt;td&gt; &lt;/td&gt;
                          &lt;td&gt;'.$routing.' &lt;/td&gt;
                          &lt;td&gt;'.$row-&gt;A2L.' &lt;/td&gt;
                          &lt;td&gt;'.$row-&gt;TKT_NUMBER.' &lt;/td&gt;
                      &lt;/tr&gt;
                      ';
                      }
                  }
  
              echo $output;  ///this output is the table body in modal
              }
       }
  </code></pre>
  
  <p><em>The</em> <strong>script</strong> <em>on the Modal page header</em></p>
  
  <pre><code>function UpdateMargin(saleid,marginid,total){
      var sales=document.getElementById(saleid).value;
      //var margin=document.getElementById(marginid).value;
      var total=total;
      var salMargin=sales-total;
      document.getElementById(marginid).value=salMargin;
      }
  </code></pre>
  
  <p>The <strong>error</strong> that showing in console is 
  <a href="https://i.stack.imgur.com/6bomK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6bomK.png" alt="Showing Error as **Uncaught TypeError: Cannot read property &#39;val&#39; of null** "></a></p>
  
  <p>Showing Error as <strong>Uncaught TypeError: Cannot read property 'val' of null</strong> </p>
  
  <p>Anybody could tell me the reason? why it's happening? Thanks in advance to all brilliants.....</p>