ajax-generated form with php-inserted values via javascript function— elements don't exist when I check them by id?

Question

I would like to prepopulate the fields of a form I display in a modal view via jquery after getting the form HTML with an ajax query. I am prepopulating the fields via a document.getElementById call to set the value in a javascript function, with the values in the javascript function generated with php code.

The problem is that the fields I want to populate with values don't seem to exist even after the callback function from the AJAX call has imported the form code. When I check if the elements exist in my function to set the values of those elements, I see a null return, so the elements are not there. What's going on?

I can see that in the html source code, the php has put the correct form values in. However, I do not see the textarea value/innerHTML displayed. Rather the textarea is blank. Is there something tricky about text areas?

Thank you for any suggestions.

Here is the Jquery/javascript:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<script>
 $(function() {
     var dialog, form,
         dialog = $( "#dialog-form2" ).dialog({
             autoOpen: false,
             height: 550,
             width: 400,
             modal: true,   
         });

     $( "#create-user2" ).button().on( "click", function() {
         showform();
         dialog.dialog( "open" );
     });
 });
</script>

<div id="dialog-form2" style="background-color: white; border: 4px solid #f1f1f1; padding: 20px;" >

</div>

<div id="dialog-form2" style="background-color: white; border: 4px solid #f1f1f1; padding: 20px;" ></div>

<script>
 function showform()
 {
     var xmlhttp;
     if (window.XMLHttpRequest) {
         xmlhttp=new XMLHttpRequest();
     } else {
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=function() {
         if (xmlhttp.readyState==4 && xmlhttp.status==200) {
             document.getElementById("dialog-form2").innerHTML=xmlhttp.responseText;
             updateform();
         }
     }

     xmlhttp.open("GET", "newinstructions.html");
     xmlhttp.send();  
 }


 function updateform()
 {
     document.getElementById('f1').value = '<?php echo $included;?>';
     document.getElementById('f2').value = '<?php echo $id_bus;?>';
     document.getElementById('f3').value = '<?php echo $deals_id;?>';
     document.getElementById('f4').value =  '<?php echo $_SESSION['token'];?>';
     document.getElementById('details').innerHTML = '<?php echo $instructions1;?>';
     document.getElementById('details').value = '<?php echo $instructions1;?>';

 }

 </script>

Here is the form:

<form method = "post" action = "changeinstructions.php">
    <textarea rows = "8" cols = "60" name = "details" id = "details" ></textarea>   
    <input type = "hidden" name = "included" '/>
    <input type = "hidden" name = "id" />
    <input type = "hidden" name = "deals_id"/>
    <input type = "hidden" name = "token" />
    <br>
    <input type="submit" tabindex="-1" >
</form>

And finally I include this in a php file as include_once('jquery.php') and I have verified that all the php variables exist and have values just before this include statement. Here is what the html source code looks like as resulting for the javscript function setting values:

 function updateform()
 {
     document.getElementById('f1').value = '1';
     document.getElementById('f2').value = '59';
     document.getElementById('f3').value = '226';
     document.getElementById('f4').value =  '7a7dd52df381577c7b8e2518aa9b2808';   
     document.getElementById('details').innerHTML = ' dumb instructions';
     document.getElementById('details').value = ' dumb instructions';

 }

So the function updateform() has the right values, and this function should only be called after the form itself has been created. Yet no values appear on the form, and no values appear in the POST array after I submit the form. What gives? Thanks for any advice.

Answer 1

you want to populate the inserted values into a new popup modal or dialog ?? please explain more what you are trying do,

if iam correct , you dont need to re-include jquery code you can do this in a callback function instead

////edit you can use .val() to set or get textarea //edit you are using a get in your ajax , while your form is using POST

i wounder if you are using $_GET or $_POST in your php , this is confusing //

the solution as follows :

// you need to select the textarea not by its id alone, you need to select the top parent first , then second top parent example : if you open you console you will find it something like this (after the popup appear) <div id="popup top div"><div id="another parent"><form><textarea id="details"> , all you need to do is something like var target_textarea =$("#topid #secoundtopid #details") then use the target_textarea.val();

Answer 2

Basically, your ajax needs attention.

When the AJAX routine is run (and I recommend using jQuery, as it's simpler and much less typing -- see posts at bottom) the server sends the response back in the variable responseText . You cannot use <?php echo etc etc; ?> <?php echo etc etc; ?> to get the returned data -- it isn't there. It's in the responseText variable.

Also, that variable is local to (and only available in) the xmlhttp.onreadystatechange function.

---

Simple AJAX:

AJAX request callback using jQuery

Answer 3

After you render the new page, the javascript needs to call the function updateform() to populate the html DOM.

window.onload=updateform;

You can also call it in the <body> element <body onload="updateform()">