Link to home
Start Free TrialLog in
Avatar of BR
BRFlag for Türkiye

asked on

ajax resutls appears on my page but I can not post them to antoher page as form elements

Dear Experts,
I'am using PHP 7.2
I'm getting data from another page using Ajax,
it works perfectly fine, however, the html shows up on the page but actually it is not on the page as source code.

It is not seen when I use browser option "view source code". But it is on the page whic is fine by me.

However, But I bring back some html as results from the page get.php.

For example an hidden HTML input like below.

I want to post this hidden input to another page, but it is not posted.

My code is below.

I pass the parameter to p and q to get.php and got some data like this including an hidden input.

<input type=hidden id=Id name=Id value='$Id'>
<input type=radio class='active'  name=not checked='' value=0 style='width: 17px; height: 17px;' >

I can see everything that brings back on the page. But when I post it to another page, not radio button option, nor hidden input posted.

what should I do?

function showUser(str) {
	
	var x = 4;
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
         xmlhttp.open("GET","get.php?q=" + str + "&p=" + x,true);
        xmlhttp.send();
		
		
    }
}

Open in new window


by the way, <div id="txtHint"></div>  this div is inside my form element.
Avatar of Zakaria Acharki
Zakaria Acharki
Flag of Morocco image

Hi sir,

Where is the post method?
Avatar of BR

ASKER

Dear Zakaria Acharki,

here how I post it, with normal form post.

<form id="form1" name="form1" method="post" action="new">
                <input type="tel" name="number" id="number" class="form-control" style="max-width:350px;" required ">
                <input  type="text" name="name" class="form-control" style="max-width:350px;" required>
                           
   
<div class="float-left ml-5 mt-2" id="txtHint">HERE IS THE WHERE THE DATA SHOWS UP FROM THE AJAX </div> 


</form>

Open in new window

what do you get in the alert if you replace :
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }

Open in new window

by :
            if (this.readyState == 4 && this.status == 200) {
                alert(encodeURIComponent(this.responseText));
                document.getElementById("txtHint").innerHTML = this.responseText;
            }

Open in new window

Avatar of BR

ASKER

dear leakim971,
I see it like this attachment.User generated image
Avatar of BR

ASKER

when did what you asked, I can see the html input code in the alert box as code..
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of BR

ASKER

Dear leakim971, I remove the form now.
But it is not working again.
 ( I did it on purpose ) becuase I thought it hadn't seen the form. that's why I added the form extra :) . Now I see, I was mistaken.

I use the normal jquery-3.2.1.slim.min.js
this is how it looks like now. User generated image
when I look at the page view source I only see <div class="float-left ml-5 mt-2" id="txtHint"></div>
although it is on the page.
Avatar of BR

ASKER

the Ajax should change the content of this div, but it is intact. It is the same when I check the page source code.
But I can see the html table on my page, it brings the table but I can not use the html input inside?

thank you
using jQuery :
function showUser(str) {
       if (str == "")
                $("#txtHint").html("");
       else
                   $.post("get.php", {q:str, p:4}, function(other_form) {
                            $("#txtHint").html( $(other_form).html() );
                   });
}

Open in new window

Avatar of BR

ASKER

I used it but it didn't work.
I changed the whole function, and I put it yours, it didn't work.

I attached my full page code here. Could you please check it?
do you get the alert and see the HELLO if you replace :

$("#txtHint").html( $(other_form).html() );

Open in new window


by :
alert("ok");
$("#txtHint").html("<h1>HELLO</h1>");

Open in new window

Avatar of BR

ASKER

I can see the HELLO message on the page and on the alert box too.
However, when I check the source code of the page <div class="float-left ml-5 mt-2" id="txtHint"></div>
it is not inside this div.
this div is as it is. nothing inside.
you should use Chrome or Firefox
it sound you're using Internet Explorer
Avatar of BR

ASKER

I'm using Chrome browser
do a right click on the HELLO and click on "inspect", you don't see it ?
Avatar of BR

ASKER

yes, you are right,
when I inspect it, I can see it.
I figured out, thank you so much.

you were right in the beggining. The <form element should be top of everything to post it ...
Avatar of BR

ASKER

thank you so much