Attualmente vorrei fare in modo che l'utente attraverso due select invii al server dei dati, e che questo restituisca NELLA STESSA PAGINA html il risultato della query. Riesco però soltanto a restituirlo in una nuova scheda...
Vorrei usare Ajax ma non so bene come implementare la cosa perché il button di submit invia la richiesta al file php messo nell'attributo action della form, e ovviamente il valore restituito appare in una nuova pagina invece che nella sezione dinamica dello stesso file html pensata.
Non so come fare in modo che il button per inviare la domanda al server e quello usato per Ajax coincidano.
Form index.html:
<div class="login-dark">
<form action="ask.php" method="POST" name="myform">
<h6>What do you want to know?</h6><br>
<div class="form-group">
<select class="form-control" name="planet">
<option value="" disabled selected>Planet ??</option>
<option value="Earth">Earth</option>
<option value="Mars">Mars</option>
<option value="Saturn">Saturn</option>
<option value="Neptune">Neptune</option>
<option value="Jupiter">Jupiter</option>
<option value="Uranus">Uranus</option>
<option value="Moon">Moon</option>
<option value="Mercury">Mercury</option>
<option value="Venus">Venus</option>
</select>
<select class="form-control" name="info">
<option value="" disabled selected>Info</option>
<option value="planettype">Planet Type</option>
<option value="equatorialradius">Equatorial Radius</option>
<option value="averagedistancefromsun">Average Distance to the Sun</option>
<option value="surfacetemperature">Surface Temperature</option>
<option value="daylength">Rotation Period (Earth Days)</option>
<option value="yearlength">Orbit Period (Earth Years)</option>
<option value="surfacegravity">Surface Gravity</option>
<option value="atmosphericConstituents">Atmospheric Constituents</option>
<option value="rings">Rings</option>
<option value="moons">Moons</option>
<option value="escapevelocity">Escape Velocity</option>
<option value="density">Density</option>
<option value="mass">Mass</option>
<option value="volume">Volume</option>
</select><br>
<button class="btn-primary" id="ask" type="submit">Ask</button>
<button class="btn-primary" type="reset">Reset</button>
</div>
</form>
<div class="alt" name="userRating">
<div class="row featurette">
<div id="zona_din"></div>
</div>
</div>
</div>
Tentativi di script index.html:
<!--script>
var documenti = document.getElementsByName("ask");
for (var i = 0; i < documenti.length; i++) {
documenti[i].onclick = caricaDocumento;
}
function caricaDocumento(e) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = gestisciResponse;
httpRequest.open("GET", e.target.innerHTML + ".php", true);
httpRequest.send();
}
function gestisciResponse(e) {
if (e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200) {
document.getElementById("zona_din").innerHTML = e.target.responseText;
}
}
</script-->
<script>
var myform = document.getElementById("myform");
var fd = new FormData(myform);
$('#ask').click(function() {
$.ajax({
url: 'ask.php',
type: 'POST',
data: fd,
success: function(msg) {
eccccc
alert('Email Sent');
}
});
});
</script>
File ask.php:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<?php
$dbconn=pg_connect(" host="" port="" dbname=planets user="" password="" ")
or die("Could not connect: " . pg_last_error());
if (!empty($_POST["loginButton"])){
echo "An error occurred.\n";
exit;
}
else {
$info = $_POST["info"];
$planet = $_POST["planet"];
$q="select ".$info." from planets where name=$1";
$result=pg_query_params($dbconn, $q, array($planet));
if (!$result) {
echo "An error occurred.\n";
exit;
}
else {
$row = pg_fetch_row($result);
}
}
?>
<div class="row">
<?php echo $row[0]; ?>
</div>
</body>
</html>