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.

Hatem Ahmed · Accepted Answer · 2015-03-12T19:58:42.827

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();

edited Mar 12 '15 at 19:58

answered Mar 12 '15 at 19:16

Hatem Ahmed

180
8

Yes, I want to populated the inserted values into a new dialog window. – Beeb Mar 12 '15 at 19:24
then usedocument.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'; the function as a call back function on success of ajax, – Hatem Ahmed Mar 12 '15 at 19:27
try replacing document.getElementById('details').innerHTML = ''; with document.getElementById('details').value= '';...its better to use jquery .ajax function its much better and less write code – Hatem Ahmed Mar 12 '15 at 19:28
if you look at my code that is exactly what I am doing. It's not working. Also I have figured out that when the updateform() function is called, the elements don't exist EVEN THOUGH this is called only after I have updated the div with responseText so that they should exist. What gives? – Beeb Mar 12 '15 at 19:29
i will send you a working example in jsfiddle :) hold on a sec – Hatem Ahmed Mar 12 '15 at 19:30
you need to replace your submit with this one – Hatem Ahmed Mar 12 '15 at 19:33
thank you for your continuing suggestions. That is not exactly what I want. I want the user to be able to edit the text area, but I want to prepopulate the textarea with the existing input I'll get from php. So I can't run the function on submit because that would wipe out whatever the user wrote, even though I want to keep that. – Beeb Mar 12 '15 at 19:34
so the senario as follows : the user fill up a form, then click submit , then another pop up with textarea appear with what the user just wrote , is that correct ? – Hatem Ahmed Mar 12 '15 at 19:36
@HatemAhmend yes that is what I would like. But right now even though I call the function after setting the form html to be the inner html of the modal div, my js indicates that the elements do not exist. – Beeb Mar 12 '15 at 19:37
i had a similar issue before , you need to select the textarea not by its @Beeb id alone, you need to select the top example : if you open you console you will find it something like this (after the popup appear)
, all you need to do is something like var target_textarea =$("#topid #secoundtopid #details") then use the target_textarea.val();
– Hatem Ahmed Mar 12 '15 at 19:40
@HatemAhmend you solved it! Thank you. But is there a way I could do this with ordinary javascript? Also I am confused then about where these form elements are in the overall DOM? Is it possible to have 2 docs or what's going on? Also if you update your response/answer, I'll select as the answer. Thanks again! – Beeb Mar 12 '15 at 19:46
this happen because jquery ui update the already loaded dom, and you are trying to access the old dom , (the IDS you are targeting doesn't exist) yet.. the form elements can be accessed through the same way – Hatem Ahmed Mar 12 '15 at 19:53
the equilivant syntex in javascript is something like var targetDiv = document.getElementById("foo").getElementById("bar")[0]; , yet using jquery is more simple and into the point with less codes – Hatem Ahmed Mar 12 '15 at 19:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72973/discussion-between-hatem-ahmed-and-beeb). – Hatem Ahmed Mar 14 '15 at 13:36

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

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; ?> 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

edited May 23 '17 at 11:50

Community

1
1

answered Mar 12 '15 at 19:21

cssyphus

37,875
18
96
111

Perhaps I am misunderstanding you, but I think you are misunderstanding me. The ajax routine is only meant to grab the generic form with inputs that each have id's. Then I have a javascript function to access those form elements by id to set their values. The values to set are written into the js when the php is processed. As I said in my post, I verified that the variables do have the correct values, and I also see them in web page html. AND I do call this function after retrieval of the form, so these elements should already exist in the DOM. – Beeb Mar 12 '15 at 19:24

score 1 · Answer 3 · answered Mar 12 '15 at 19:21

1

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()">

answered Mar 12 '15 at 19:21

Kirk Powell

908
9
14

I was careful to only call the js function that updates the value after the completion of the xmlhttp request so that the elements will exist in the DOM when I set their values....But maybe there is a misunderstanding. I am not rendering an entire new page. I'm just rendering a new div as the pop up/dialog box. – Beeb Mar 12 '15 at 19:26
Your ajax request makes a call to a new webpage `xmlhttp.open("GET", "newinstructions.html");` – Kirk Powell Mar 12 '15 at 19:41
right but I am just using that to sub responseText into a div element's inner HTML, so shouldn't it still be part of my original document where I declared that div? – Beeb Mar 12 '15 at 19:42
1. index.html 2. head - jquery 3. head javascript a. ajax request to get form contents 4. form displays with inputs populated by javascript – Kirk Powell Mar 12 '15 at 20:06

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

3 Answers3