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.
LVL 1
BRDigital MarketingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
Hi sir,

Where is the post method?
BRDigital MarketingAuthor Commented:
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

leakim971PluritechnicianCommented:
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

Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

BRDigital MarketingAuthor Commented:
dear leakim971,
I see it like this attachment.screenshot
BRDigital MarketingAuthor Commented:
when did what you asked, I can see the html input code in the alert box as code..
leakim971PluritechnicianCommented:
as you can see, you a form here
so a form in a form

<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"><form><table>........your fields </form> </div> 


</form>

Open in new window


this is your issue

could you add jQuery in your project ?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BRDigital MarketingAuthor Commented:
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. Ekran-Al-nt-s-.PNG
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.
BRDigital MarketingAuthor Commented:
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
leakim971PluritechnicianCommented:
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

BRDigital MarketingAuthor Commented:
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?
leakim971PluritechnicianCommented:
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

BRDigital MarketingAuthor Commented:
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.
leakim971PluritechnicianCommented:
you should use Chrome or Firefox
it sound you're using Internet Explorer
BRDigital MarketingAuthor Commented:
I'm using Chrome browser
leakim971PluritechnicianCommented:
do a right click on the HELLO and click on "inspect", you don't see it ?
BRDigital MarketingAuthor Commented:
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 ...
BRDigital MarketingAuthor Commented:
thank you so much
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.