access the innerhtml with Jquery

Question

Hi I am still learning Jquery and have a problem accessing form elements. My script opens up a div and then fills it with a pre written html form. I am using ajax to get the form and jquery. This all works fine and I can see the div box with my form in it. The problem is I want to populate the innerhtml form and I have tried javascript and jquery but none of my code will populate the textboxes.

    divbox = "fixedbox"
// open up the div 
setdiv(divbox,100,600,800)

    // JQ - ajax 
    $(document).ready(function(){ 
    $("#" + divbox).load("../customer_rm/display_email_send.php"); 
    });

   // neither of these will produce any text  
   document.getElementById('mailcc').value = "test";
   $("#mailcc").val("test");

if needed here is the table . Can anyone offer any suggestions as to what I am doing wron please ?

                <?php
            echo "

            <style type='text/css'>
            table {border: 1px solid black}
            td, tr {border: 0}

            .bdr {
                border: 4px solid black ;
            }
            .white {
                background-color:#FFF ;
            }

            </style>
            <div align='center'>

            <br><br />

            <table width='700' border='2' bgcolor='#CCCCCC'>
            <form id = 'mail'  name='mail' > 
              <tr >
                <td width='20'>&nbsp;</td>
                <td width='50'>&nbsp;</td>
                <td width='50'>&nbsp;</td>
                <td >&nbsp;</td>
                <td width='20' >&nbsp;</td>    

              </tr>

              <tr>
                <td>&nbsp;</td>
                <td rowspan='3'>
                <input type='button'id='send' value='Send'
                style='width:60px; height:40px '
                 /><hr>
                <input type='button' value='Close'
                style='width:60px; height:20px '                        onclick='fadeout()' 
                 />
                </td>
                <td><input type='button' value='To :' /></td>
                <td><input type='text' class='white' id='mailto' size='80' /></td>
                <td>&nbsp;</td>
              </tr> 

              <tr>
                <td>&nbsp;</td>

                <td><input type='button' value='Cc :' /></td>
                <td><input type='text' class='white' id='mailcc' size='80' /></td>
                <td>&nbsp;</td>
              </tr>  
              <tr>
                <td>&nbsp;</td>

                <td><input type='button' value='Bcc :' /></td>
                <td><input type='text' class='white' id='mailbcc' size='80' /></td>
                <td>&nbsp;</td>
              </tr>  
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>  
              <tr>
                <td>&nbsp;</td>
                <td colspan='3'>
                  <textarea name='mail_body' id='mail_body' class='white' 
                  style='height:380px; width:600px; bgcolor:#fff '  >
                  </textarea>
                </td>
                <td>&nbsp;</td>
              </tr>  
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>  
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>  
             </form> 
             </table>


            </div>
            " ;

this is the div box

              #fixedbox {
              position:absolute ;
              width: 20px;
              height: 20px;
              top: 40px ; 
              border: 2px solid black;
              background-color:#CCC; 
              left:50% ; 
              margin-left:-300px;
              visibility:hidden ;
              overflow:hidden ;
          } 

Answer 1

document.getElementById('mailcc').innerHTML = "test";

Answer 2

mailcc is an input field. You shouldn't use innerHTML/html() to access the values of inputs. Instead:

document.getElementById('mailcc').value = "test";
$("#mailcc").val("test");

Both of these are quite correct. However, assuming mailcc is contained in display_email_send.php, then it will not have loaded yet at this point. You will only be able to access it after the content has been load()ed, which you can do by passing a callback function:

$(document).ready(function(){ 
    $('#'+divbox).load('../customer_rm/display_email_send.php', function() {
        $('#mailcc').val('test');
    }); 
});