I have a website, written in PHP, which is setup to run on desktop, mobile and iPad. Everything seems fine with desktop and mobiles. However, on the iPad I have an issue where I can save submitted POST values to the database in portrait mode, but when I try doing the same thing in landscape, I just don't get the values that were actually submitted in the form from the POST.
I have the same code for the input form in both orientations. However, when I check the data received as POST values in portrait mode, I do get the data that was actually entered into the fields in the form. My problem is that when I do the same thing in landscape mode, I don’t get the submitted value from the form. Instead, I get the data for that field from the database, when there really doesn’t seem to be any way that that data could end up as the POST value. This really doesn’t seem possible considering how my code is set up.
I will now talk you through key parts of my code in all of this.
I have two JavaScript functions in the header section of my index.php file, which are used to check orientation and also to respond to orientation changes (as shown below). These hide/show divs for each orientation in the body of the same index.php file. These do both work, as I see the page content change correctly on the iPad, as I change its orientation.
function check_orientation() // check orientation for ipad home page.
{
var div_portrait = document.getElementById('ipad_home_page_portrait');
var div_landscape = document.getElementById('ipad_home_page_landscape');
if(window.innerHeight > window.innerWidth)
{
div_landscape.style.display = 'none';
div_portrait.style.display = 'block';
}
else
{
div_portrait.style.display = 'none';
div_landscape.style.display = 'block';
}
}
window.addEventListener("orientationchange", function()
{
var div_portrait = document.getElementById('ipad_home_page_portrait');
var div_landscape = document.getElementById('ipad_home_page_landscape');
if (window.orientation == 0)
{
div_landscape.style.display = 'none';
div_portrait.style.display = 'block';
}
else
{
div_portrait.style.display = 'none';
div_landscape.style.display = 'block';
}
}
, false);
In the body of index.php, I have the following which has been simplified, to keep this from getting any longer than it already is. At the same time all the key/relevant bits of code have been included:
<body onload='check_orientation();'>
<div id='ipad_home_page_landscape'>
<?php include ('view_edit_company_ipad.php'); ?>
</div>
<div id='ipad_home_page_portrait'>
<?php include ('view_edit_company_ipad.php'); ?>
</div>
</body>
As stated above I use the same code file in both orientations (as can be seen in the 2 divs above). I get this to work by using conditional code at key points in the file for setting the widths and heights of page components.
The file ‘view_edit_company_ipad.php’ includes a form which allows the user to input data, etc. The following is one the fields from that form:
<input type='text' name='company_contact_name' value='<?php
if (isset($company_contact_name)) echo $company_contact_name; ?>' />
As I’ve already stated, I can get the data inserted into the form in portrait mode, if I check the POST value with the following code:
<?php echo $_POST[‘company_contact_name’]; ?>
However, if I do the same thing in landscape mode, I don’t get the value that was submitted in the form, even when all the code is exactly the same.
Also, I use that echo statement right at the very top of my index.php file, so there is no way that any of my code has changed that POST value. I just don’t get the data that was inserted as 'company_contact_name' from that echo statement when I’m using the iPad in landscape mode.
I realise that I've written a lot here, but I couldn't give all the required info, if I'd made it any shorter. Big thanks to anyone who reads this and even bigger thanks, if you can offer a solution of any sort.
