CHANGING QUESTION WITH NEW INFO
Previously I asked the question below. But more details show that if you go to switch to a different app by going to unselect the app (may not be the right term) and then selecting the app, the button works. If you shut down the app and restart it doesn't work again. Very strange. I'm posting the complete page code below this paragraph, everything below that is the old question and partial code under the ------ line
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!--<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css" />-->
<script defer src="js/fontawesome-all.js"></script>
<script src="framwork7/framwork7.js"></script>
<script type="text/javascript" src="cordova.js"></script><script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/poppe.min.js"></script>
<script type="text/javascript" src="js/news-feed.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script>
var xmlhttp;
var url;
/* window.onload = function()
{
document.addEventListener("deviceready", init);
}
*/
document.addEventListener("deviceready", init, false)
function init(){
document.getElementById('Submit').addEventListener('click', getData);
}
function getData(){
url = "http://www.example.org/myapp.php";
url += "?cemetery=" + document.getElementById('cemetery').value;
url += "&lastname=" + document.getElementById('lastname').value;
url += "&firstname=" + document.getElementById('firstname').value;
$.ajax({
type: 'get',
url: url,
success: function(data){
document.getElementById('laloinfo').innerHTML = "";
document.getElementById('laloinfo').innerHTML = "<strong>Scroll down for results</strong>";
/* document.getElementById('lalo2').innerHTML = data; */
$("#lalo2").html(data);
}
});
}
</script>
<title>Catholic Cemeteries Mobile App</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary mb-3">
<div class="container">
<a class="navbar-brand" href="#">Catholic Cemeteries</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"> ↓ </span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="lalo.html"><i class="fas fa-heart"></i> Locate a Loved One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="window.open('http://www.example.org','_system');"><i class="fas fa-cloud"></i> Website</a>
</li>
<li class="nav-item">
<a class="nav-link" href="locations.html"><i class="fas fa-phone"></i> Locations & Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="window.open('https://facebook.com/myfacebook','_system');"><i class="fab fa-facebook"></i> Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#aboutModal" href="#aboutModal"><i class="fas fa-question"></i> About Version</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<h1>myname</h1>
<p class="lead">Welcome to the my name Mobile App</p>
<div class="row">
<!-- LALO -->
<div class="card bg-light" id="lalo">
<div class="card-header"><h3><i class="far fa-heart"></i> Locate a Loved One</h3></div>
<div class="card-body">
<div class="text-justify">Catholic Cemeteries is proud to announce our new <strong>Locate a Loved One</strong> search engine. Enter your loved one's name to get location information such as crypts / niches, section, row, and grave number.</div>
<br>
<div class="text-justify"><strong>You must choose a cemetery and at least a partial last name to search the database.</strong></div>
<br>
<div class="text-justify bg-info"><i>Please Note: Please allow approximately one week for current activity to appear in this search engine. If you can not find your loved one, please call the appropriate cemetery for assistance.</i></div>
<br>
<div class="form-group text-left">
<label for="cemetery">Cemetery: Required</label>
<select id="cemetery" class="form-control-sm">
<option value="1">J Cemetery, Middle Village</option>
<option value="3">C Cemetery, Farmingdale</option>
<option value="4">M Cemetery, Flushing</option>
<option value="2">H Cemetery, Brooklyn</option>
</select>
</div>
<div class="form-group text-left">
<label for="lastname">Last Name: Required - Parital OK</label>
<input type="text" maxlength="50" id="lastname" class="form-control form-control-sm" placeholder="Enter Last name">
</div>
<div class="form-group text-left">
<label for="firstname">First Name: </label>
<input type="text" maxlength="30" id="firstname" class="form-control form-control-sm" placeholder="Enter First name">
</div>
<input type="hidden" name="timecounter" value="Submit">
<br><button class="btn btn-primary" name="Submit" value="Search" id="Submit">~SEARCH~</button><br/>
</div>
</div>
<!-- LALO -->
</div>
</div>
<!-- MODAL -->
<div class="modal" id="aboutModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">My Name Mobile App</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Mobile App version 2.0.9<br/>
<br/>
If you are having an issue with this app, please contact me and give them the version number above.
</div>
<hr/>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer><p class="text-center">copyright © 2018, me</p></footer>
</body>
</html>
-----------------------------OLD QUESTION BELOW------------------------------
I've tried 10 solutions that I've found and none work. I have a form that can't just submit because it receives back data to then put into a div. This code is working for android, but not iOS. (This is an HTML 5 app using framework7 and bootstrap, then built with phonegap). It is a search form that submits to a server php page and takes the results back and puts them into a div. iOS does nothing when you click on the button.
Here is the button code:
<button class="btn btn-primary" name="Submit" value="Search" id="Submit">~SEARCH~</button>
Here is the handler code:
<script>
var xmlhttp;
var url;
window.onload = function()
{
document.addEventListener("deviceready", init, false);
}
function init()
{
document.getElementById('Submit').addEventListener('click', getData, false );
}
function getData(){
url = "http://www.mywebsite.org/myapp.php";
url += "?cemetery=" + document.getElementById('cemetery').value;
url += "&lastname=" + document.getElementById('lastname').value;
url += "&firstname=" + document.getElementById('firstname').value;
$.ajax({
type: 'get',
url: url,
success: function(data){
document.getElementById('laloinfo').innerHTML = "";
document.getElementById('laloinfo').innerHTML = "<strong>Scroll down for results</strong>";
/* document.getElementById('lalo2').innerHTML = data; */
$("#lalo2").html(data);
}
});
}
Thank you in advance for any help. It's driving me nuts and has been a week of torture.
John
