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-12 19:58:42Z

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, 2015 at 19:58

answered Mar 12, 2015 at 19:16

Hatem Ahmed

3002 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Beeb Over a year ago

Yes, I want to populated the inserted values into a new dialog window.

Hatem Ahmed Over a year ago

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 Over a year ago

try replacing document.getElementById('details').innerHTML = '<?php echo $instructions1;?>'; with document.getElementById('details').value= '<?php echo $instructions1;?>';...its better to use jquery .ajax function its much better and less write code

Beeb Over a year ago

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?

Hatem Ahmed Over a year ago

i will send you a working example in jsfiddle :) hold on a sec

|

Community · Accepted Answer · 2017-05-23 11:50:53Z

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, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 12, 2015 at 19:21

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

1 Comment

Beeb Over a year ago

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.

Kirk Powell · Accepted Answer · 2015-03-12 19:21:30Z

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, 2015 at 19:21

Kirk Powell

9089 silver badges14 bronze badges

4 Comments

Beeb Over a year ago

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.

Kirk Powell Over a year ago

Your ajax request makes a call to a new webpage xmlhttp.open("GET", "newinstructions.html");

Beeb Over a year ago

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?

Kirk Powell Over a year ago

1. index.html 2. head - jquery 3. head javascript a. ajax request to get form contents 4. form displays with inputs populated by javascript

Collectives™ on Stack Overflow

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

3 Answers 3

14 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related