How can I submit an input to another site form, and get results on same page?


#21

Okay, on the #1, you can always just remove them in the scraping section. You would just need to find the strpos() of the https and have it remove the “s”. Something loosely like this would do that:
$start = strpos($webpage, “https”);
$webpage = substr($webpage, 0, $start+3) . $substr($webpage, $start+5, strlen($webpage)-$start;
But, not tested, just off the top of my head…

Now, on the rest, how have you tested it? Have you attempted to debug it yet? The first thing would be to have the value passed to the external php script displayed to see if it is getting the correct value.
Not sure why you changed the URL. You just need to debug each step to make sure it is working as it should. First, in the Javascript section, change the call to the external file to an alert and make sure that it is getting the data from the input field. Something like:

var idCode = document.getElementById('ThaiParcelsCode').value;
alert(idCode);

And, see if that shows you the value entered. Since the external script needs that, you should first check that it is working. If that works, then you need to debug the external file to see if it is receiving it from the AJAX call. In the example code I created above for you, I had the alert in it so you could see if you were getting any results from the file. Did that part work? Also, sometimes you need to use quotes inside a call to the external page. You might need to add them in.

I might have some time later on to create a full working test page for you. Just a bit busy right now…


#22
var idCode = document.getElementById('ThaiParcelsCode').value;
alert(idCode);

Using the code above I tested the Javascript with an alert which works and gets the Tracking Code from the input without any problems.

I have also test the getParcels.php link as you previously suggested:
getParcels.php?ThaiParcelsCode=SRN011812110034
Which displays all data as it should.

But when the simple alert in the Javascript is replaced with AJAX (whether the AJAX outputs to an alert, a div or to an external file) this is where it is breaking. On clicking the button nothing happens.
In the getParcels.php I even tried changing the code to say something simple:

<?PHP
$tracking_code = $_GET['ThaiParcelsCode'];
echo $tracking_code;
?>

But nothing echo’s from this. It doesn’t seem to like the AJAX in the Javascript.


#23

Well, I do not see all of your code. Here is a new version with a couple minor changes. I had you doing a POST and it should have been a GET. Also, I do not see where you had the JQuery library set up, so I added that in place. In this test, the image is NOT from a https location but, it is just http. So, if you are still getting that, I might be using a different sample number. I used the same one as before: SRN011812110034

Now, this is the getParcels.php file:

<?PHP

//  Get the parcel ID number passed from the AJAX call
$tracking_code = $_GET['ThaiParchelsCode'];
echo "Processing parcels for ID: " . $tracking_code . "<br><br>";
//  Part one of scraper, get tracking table
$webpage = file_get_contents("https://tptrack.info/ecom/dtrack.php?id=" . $tracking_code . "&type=a1");
$webpage = iconv('windows-874', 'utf-8', $webpage);
$start = strpos($webpage, "<table");
$webpage = substr($webpage, $start);
$end = strpos($webpage, "<button");
$data_table = substr($webpage, 0, $end);

echo $data_table;

//  Part two of scraper, get the detailed transaction list
$trans_webpage = file_get_contents("https://tptrack.info/ecom/tdetail.php?fn=a1&code=" . $tracking_code);
$trans_webpage = iconv('windows-874', 'utf-8', $trans_webpage);
$start = strpos($trans_webpage, "<div class='container marketing");
$end = strrpos($trans_webpage, "</div>");
$trans_data = substr($trans_webpage, $start, $end - $start);

echo "<br><br>" . $trans_data;

?>

And, this is my test file. Name it anything and test from your server. Then, you should be able to combine it into your live site as needed. My tests worked 100% as far as I tested it. Let me know if this test file works for your first. Then, try to combine it into your live site and let us know the result… You are close…

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Language" content="th">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
<body>
<h2>Track with Thai Parcels</h2>
<div class="input-append">
    <input name="ThaiParcelsCode" id="ThaiParcelsCode"/>
    <button class="btn ThaiParcelsButton" onclick="grabThaiParcelsTracking()">Track Parcel</button>
</div>
<div id='displayParcels'>HERE IS WHERE THE DATA WILL 'APPEAR'...</div>
<script>
function grabThaiParcelsTracking() {
     var idCode = document.getElementById('ThaiParcelsCode').value;
     $.ajax( {
          url: 'getParcels.php',
          type: 'GET',
          data: 'ThaiParchelsCode='+idCode,
          async: true,
          success: function (data) {
              document.getElementById('displayParcels').innerHTML = data;
          },
    });
}
</script>
    </body>
</html>

#24

Okay, so I test the code above on my Wordpress page and it still shows no results.
I tried a few other things, such as moving whats in the <head></head> tags to the Wordpress header, and moving whats in the <script></script> tags to the pages script box. But still no results. I correct the two spelling mistakes of ThaiParchels to ThaiParcels you like to keep testing me with haha (Only joking!), but still no results.

I have then created a file via FileZilla in my root directory named testFile.html that contains the following:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Language" content="th">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
<body>
<h2>Track with Thai Parcels</h2>
<div class="input-append">
    <input name="ThaiParcelsCode" id="ThaiParcelsCode"/>
    <button class="btn ThaiParcelsButton" onclick="grabThaiParcelsTracking()">Track Parcel</button>
</div>
<div id='displayParcels'>HERE IS WHERE THE DATA WILL 'APPEAR'...</div>
<script>
function grabThaiParcelsTracking() {
     var idCode = document.getElementById('ThaiParcelsCode').value;
     $.ajax( {
          url: 'getParcels.php',
          type: 'GET',
          data: 'ThaiParchelsCode='+idCode,
          async: true,
          success: function (data) {
              document.getElementById('displayParcels').innerHTML = data;
          },
    });
}
</script>
    </body>
</html>

and behold, this works! With a small error at the beginning.
The error being:

Warning : PHP Startup: Unable to load dynamic library ‘/usr/local/php-7.1.25/lib/php/20160303/mcrypt.so’ - /usr/local/php-7.1.25/lib/php/20160303/mcrypt.so: cannot open shared object file: No such file or directory in Unknown on line 0

But anyways, if I type in the tracking code and hit the button the details are returned in the div as supposed to.

Do you have any ideas why this doesn’t want to work on a Wordpress page? And how I can make it work on a Wordpress page?


#25

Well, there are hundreds of possiblities. First, there is no reason for it to show the mcrypt.so as it is NOT in the file I sent you. I gave you the base code which works 100% on my server. Therefore, I know the code is sound.

Not sure where to start, but, let’s start with the server. What type of server are you using. The Mcrypt file error appears to be something in the server’s PHP setup as there is no line number. If it is a dedicated server, you might need to reboot it. It says you are using PHP7. My server is NOT PHP7, I think it is 5.5. But, the commands I used are good for both of them. Wordpress is a platform system. This means that it has a lot of things that are loaded and the code loaded controls the rest of the code. Therefore, there main be a function loaded that is causing the loaded code to be altered. Wordpress uses templates. Did you add this code into the template or into the a Wordpress add-on?

The only way to fix this is to find out what is going on AFTER your platform and code has loaded all of your add-on codes. So, you can RIGHT-CLICK on the finished page once it is onscreen and VIEW-SOURCE and see what is being placed in the finished product. You should make sure that the Javascript is in place, make sure that the JQuery library is loaded above on the page and make sure the DIV for the displayed is in the final code. My wild guess without seeing all the code is that one of these three is missing in the final output.

I think you are close as you have a working model now. Sorry for the misspelling, I wrote that part late-night after a party… Good for me, bad for you. Sorry… (I did correct that in my last post of code!)


#26

A few hosting details:

PHP version was 7.1.25, I have just switched it to 7.30 (latest available)
Perl version 5.14.2
MySQL version 5.7
Perl Modules 2900+ installed modules
Hosting OS Proprietary *nix
Advanced Semi-Dedicated Server

I loaded the code directly on a Wordpress page from within the Wordpress UI > Pages > New Page. But Wordpress does not allow me to use both Javascript or PHP on a page, so plugins are used to allow both these languages. The Javascript & PHP are then placed in a widget for that Wordpress page.

(Screenshot below of everything on one Wordpress page)

Full%20Code%20on%20Page


#27

Note: I have tried putting everything inside the <head></head> and <script></script> tags directly on the page which doesn’t work. Wordpress has its owns section for Headers & Footers, so what you placed in the tags I have tried placing in the Headers & Footers section which will apply to all page headers on the site.

(Screenshot below of Wordpress Headers & Footers section)

Header%20Section


#28

For the Javascript I have enabled a plugin to allow the use of Javascript, and now on the page I want the Javascript to work, it has an extra input text box for any page Javascript. (The Javascript plugin does work as I use this for a few calculator forms, and this plugin is recommended by Wordpress themselves).

(Screenshot below of Script input)

Script%20Section


#29

(Screenshot of Wordpress page with script and header removed)

Page%20without%20head%20or%20script


#30

And finally for PHP as it also cannot be placed directly on a page, I have enabled a second plugin to allow PHP to be input. It does this by putting the PHP in a ShortCode, and then you add the ShortCode to the page.

(Screenshot below of PHP Code)

PHPSnippet1


#31

(Screenshot below of the PHP ShortCode)

PHPSnippet2


#32

(Screenshot below of the PHP ShortCode being used)

Including%20the%20PHP%20snippet

This method worked for the first scenario where we were simply POSTing the data to our page. But as soon as we have advanced from there, created a seperate php file etc, we have had difficulties.


#33

Then I attempt to place the button code on its own page inside my root directory using FileZilla (not within any of the Wordpress folders), which this got the page working, but with the error message.

(Screenshot below of FileZilla getParcels.php & testFile.html)

FileZilla%20Screen

Both these files are directly in the thailandpoolshop directory for that website.

Wordpress likes to give obstacles. But I hope this sheds some light.

(Sorry about the multiple posts, the site will only let me post 1 image per post!)


#34

Okay, well, the PHP part is NOT needed in your Wordpress template. That was just for testing.
The Wordpress version needs the Jquery/Javascript routine which is in place using the plug-in.
The PHP part is handled by the AJAX call out to the secondary PHP file. The Jquery library seems to be
in place correctly, but, not 100% sure it is correct as Wordpress most likely already has that in place.

After researching this for you, it appears that Wordpress uses Jquery already. So, you need to remove the line that calls the Jquery library. Wordpress also uses “compatibility” mode in Jquery. Therefore, you need to alter the Jquery/AJAX section to be like this:

<script>
function grabThaiParcelsTracking() {
     var idCode = document.getElementById('ThaiParcelsCode').value;
     jQuery.ajax( {
          url: 'getParcels.php',
          type: 'GET',
          data: 'ThaiParchelsCode='+idCode,
          async: true,
          success: function (data) {
              document.getElementById('displayParcels').innerHTML = data;
          },
    });
}
</script>

Very minor change, but Wordpress expects you to use the full “jQuery” name instead of the shortcut " $ "…
Seems that the Wordpress template overrides a lot of code and expects it to be in “their” way, not normal.

Try that. Then, on the final page, view-source of it and see if your button has the correct javascript call and that your Jquery/Ajax code is in the footer correctly. If not, then we know where the issue is!
Let us know…


#35

So just to confirm everything:

Wordpress Header Section:

We have removed the JQuery library, so now we only have:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="th">

Main Wordpress Page:

<h2>Track with Thai Parcels</h2>
<div class="input-append">
    <input name="ThaiParcelsCode" id="ThaiParcelsCode"/>
    <button class="btn ThaiParcelsButton" onclick="grabThaiParcelsTracking()">Track Parcel</button>
</div>

<div id='displayParcels'>HERE IS WHERE THE DATA WILL 'APPEAR'...</div>

Wordpress Page Script Section:

<script>
function grabThaiParcelsTracking() {
     var idCode = document.getElementById('ThaiParcelsCode').value;
     jQuery.ajax( {
          url: 'getParcels.php',
          type: 'GET',
          data: 'ThaiParcelsCode='+idCode,
          async: true,
          success: function (data) {
              document.getElementById('displayParcels').innerHTML = data;
          },
    });
}
</script>

getParcels.php page:

<?PHP
//  Get the parcel ID number passed from the AJAX call
$tracking_code = $_GET['ThaiParcelsCode'];
echo "Processing parcels for ID: " . $tracking_code . "<br><br>";
//  Part one of scraper, get tracking table
$webpage = file_get_contents("https://tptrack.info/ecom/dtrack.php?id=" . $tracking_code . "&type=a1");
$webpage = iconv('windows-874', 'utf-8', $webpage);
$start = strpos($webpage, "<table");
$webpage = substr($webpage, $start);
$end = strpos($webpage, "<button");
$data_table = substr($webpage, 0, $end);

echo $data_table;

//  Part two of scraper, get the detailed transaction list
$trans_webpage = file_get_contents("https://tptrack.info/ecom/tdetail.php?fn=a1&code=" . $tracking_code);
$trans_webpage = iconv('windows-874', 'utf-8', $trans_webpage);
$start = strpos($trans_webpage, "<div class='container marketing");
$end = strrpos($trans_webpage, "</div>");
$trans_data = substr($trans_webpage, $start, $end - $start);

echo "<br><br>" . $trans_data;
?>

If this is all correct, then we still have a problem. As the button is bringing no data. Here is what I am seeing from my inspector:

ConsoleOutput


#36

And I can see that the https to http is in there, and two mentions of jquery libraries. Are these what we are looking for?

Elements


#37

Well, it is showing that the parcel number is not being sent to the PHP file. Shows it in the inspector view.
My guess is that the Wordpress has changed the name of the input field so the JS script is not retrieving it.
view-source of the page and look at the input field after it is displayed which should show how Wordpress
has altered it and see if the name is correct. Or actually it is the ID name not the name name…


#38

Yes I noticed that there was a 404 on the Console Tab.

Here is the Page Source. Looks the same to me :confused:

ButtonInputPageSource


#39

Script section of Page Source.
ScriptPageSource


#40

You have the PHP file named with a capital P in the filename. Do you have it in the actual filename?
I mean when you saved the file is it named: getParcels.php ???

Also, is that file in the same folder as the file you are executing it from? It needs to be in the same folder.