没有在PHP中接收ajax
My PHP is not receiving ajax data that is sent when I change a value of an input is it because of that my PHP runs before my script(index.html includes test.js) if so how can resolve the problem or is it something else that I am missing?
PHP and HTML are in the same file because I need to use the values in the PHP
test.js
$(document).ready(function() {
var date = "";
var begin = "";
var eind = "";
var aantal = "";
$('#datum').change(function() {
date = $("#datum").val();
console.log(date);
});
$('#beginTijd').change(function() {
begin = ($(this).val());
console.log(begin);
});
$('#Tijdsduur').change(function() {
eind = ($(this).val());
console.log(eind);
});
$('#aantalSloepen').change(function() {
aantal = ($(this).val());
console.log(aantal);
$.ajax({
url: "index.php",
type: "POST",
data: {
date: begin,
quantity: aantal
},
success: function(data) {
console.log(begin, aantal);
}
});
});
});
index.php
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#ffffff">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="test.js"></script>
<title>reserveren</title>
</head>
<body>
<div id="BeschikbaarheidReserveren">
<hr id="hrOne"><hr id="hrTwo"><hr class="hrActive" id="hrThree"><br>
<h3>Beschikbaarheid & Reserveren</h3>
<div id="tableHeader">
<img src="images/GJ_arrow-left.png" alt="left arrow">
<img src="images/GJ_arrow-right.png" alt="right arrow">
<h2 id="vestiging">Utrecht</h2>
</div>
<img id="gif" src="http://moziru.com/images/pointer-clipart-animated-gif-7.gif" alt="">
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th class="TableGreenJoyGreen"></th>
<td class="TableGreenJoyGreen">9u</td>
<td class="TableGreenJoyGreen">10u</td>
<td class="TableGreenJoyGreen">11u</td>
<td class="TableGreenJoyGreen">12u</td>
<td class="TableGreenJoyGreen">13u</td>
<td class="TableGreenJoyGreen">14u</td>
<td class="TableGreenJoyGreen">15u</td>
<td class="TableGreenJoyGreen">16u</td>
<td class="TableGreenJoyGreen">17u</td>
<td class="TableGreenJoyGreen">18u</td>
<td class="TableGreenJoyGreen">19u</td>
<td class="TableGreenJoyGreen">20u</td>
<td class="TableGreenJoyGreen">21u</td>
</tr>
<tr>
<th>Ma, 26/02/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Di, 27/02/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wo, 28/02/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Do, 01/03/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Vr, 02/03/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Za, 03/03/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Zo, 04/03/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th class="TableGreenJoyGreen"></th>
<td class="TableGreenJoyGreen"> 9u</td>
<td class="TableGreenJoyGreen">10u</td>
<td class="TableGreenJoyGreen">11u</td>
<td class="TableGreenJoyGreen">12u</td>
<td class="TableGreenJoyGreen">13u</td>
<td class="TableGreenJoyGreen">14u</td>
<td class="TableGreenJoyGreen">15u</td>
<td class="TableGreenJoyGreen">16u</td>
<td class="TableGreenJoyGreen">17u</td>
<td class="TableGreenJoyGreen">18u</td>
<td class="TableGreenJoyGreen">19u</td>
<td class="TableGreenJoyGreen">20u</td>
<td class="TableGreenJoyGreen">21u</td>
</tr>
<tr>
<th>Ma, 26/02/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Di, 27/02/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wo, 28/02/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Do, 29/02/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Vr, 01/03/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Za, 02/03/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Zo, 03/03/2018</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="wrap">
<div id="fp1"><div class="circleBase type1"></div><p>Beschikbaar</p></div>
<div id="fp2"><div class="circleBase type2"></div><p>Enkelen beschikbaar</p></div>
<div id="fp3"><div class="circleBase type3"></div><p>Uitverkocht</p></div>
<div id="fp4"><div class="circleBase type4"></div><p>Niet beschikbaar</p></div>
</div>
</div>
<form action="betalen.php" method="post" id="form1">
<label for="date">Datum*</label>
<span>
<input name="datum" type="date" id="datum" required>
</span>
<br>
<label for="beginTijd">BeginTijd*</label>
<span>
<select name="beginTijd" id="beginTijd" required>
<option value="09:00">9u</option>
<option value="10:00">10u</option>
<option value="11:00">11u</option>
<option value="12:00">12u</option>
<option value="13:00">13u</option>
<option value="14:00">14u</option>
<option value="15:00">15u</option>
<option value="16:00">16u</option>
<option value="17:00">17u</option>
<option value="18:00">18u</option>
<option value="19:00">19u</option>
<option value="20:00">20u</option>
<option value="21:00">21u</option>
</select></span><br>
<label for="">Tijdsduur*</label>
<span>
<select name="Tijdsduur" id="Tijdsduur" required>
<option value="2:00">2 uur varen</option>
<option value="3:00">3 uur varen</option>
<option value="4:00">4 uur varen</option>
<option value="5:00">5 uur varen</option>
<option value="6:00">6 uur varen</option>
<option value="9:00">gehele dag varen (9.00-18.00)</option>
<option value="12:00">gehele dag varen + avond (9.00-22.00)</option>
</select></span><br>
<label for="">Aantal sloepen*</label>
<span>
<select name="aantalSloepen" id="aantalSloepen" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></span><br>
<label for="">Aantal personen per sloep*</label>
<span>
<select name="aantalPersonenPerSloep" id="aantalPersonenPerSloepSelect" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select><a href="javascript:void(0)" title="Persoon per sloep Info" data-toggle="popover" data-placement="left" data-content="Aantal personen (per sloep), NB: maximaal 540KG aan balast in totaal.">
<img src="images/info-alt.svg" alt="info">
</a>
</span><br>
<label for="">Vouchercode*</label>
<span>
<input name="VoucherCode" type="text">
<a href="javascript:void(0)" title="Vouchercode Info" data-toggle="popover" data-placement="left" data-content="Heeft u een voucher of kortingscode ? Voer deze hier in
Heeft u een kadobon of huurtegoed vul hier dan niets in. Zodra u het email adres onderin invult wordt de kadobon/tegoed verrekend">
<img src="images/info-alt.svg" alt="info">
</a>
</span>
<br>
<label class="containerTest">Ik ga akkoord met de
<a href="http://greenjoy.nl/algemene-voorwaarden/">algemene voorwaarden</a>*
<input name="algemevoorwaardenCheckbox" type="checkbox" required>
<span class="checkmark"></span>
</label>
<br><br>
<label class="containerTest">Borgsom €150.00 - verplicht*
<input name="borgCheckbox" type="checkbox">
<span class="checkmark"></span>
</label>
<a href="javascript:void(0)" title="Borg Info" data-toggle="popover" data-placement="left" data-content="De borg bedraagt 150 euro. Je ontvangt deze, als er geen schade is geconstateerd, na het varen weer retour per bank.">
<img src="images/info-alt.svg" alt="info">
</a>
<br><br>
<label class="containerTest">aanmelden nieuwsbrief en aanbiedingen (2,50 extra korting)
<input name="nieuwsbriefCheckbox" type="checkbox">
<span class="checkmark"></span>
</label>
<br />
<p>Verplicht veld*</p>
<input type="hidden" name="action" value="form1">
</form>
<button id="submitButton" type="submit" form="form1">Volgende ></button>
<?php
if (!empty($_POST['date'])) {
echo "Yes, mail is set";
$value1= $_POST['date'];
$value2= $_POST['quantity'];
}else{
echo "No, mail is not set";
}
echo $value1;
echo $value2;
$canmakereservation = "https://www.planyo.com/rest/?method=can_make_reservation&api_key=YOURKEY&resource_id=110556&start_time=2018-04-25 09:00&end_time=2018-04-25 12:00&quantity=5";
$cleancanmakereservation = preg_replace("/ /", "%20", $canmakereservation);
$reservationavailable = file_get_contents("$cleancanmakereservation");
$reservationAvailable = json_decode($reservationavailable, true);
// echo "$cleancanmakereservation";
// var_dump($reservationAvailable);
?>
</div>
<div id="footer">
<h3>Uw huurprijs exlusief borg: € 240,00</h3>
<p>Dit is momenteel de laagste prijs.<br>
- Langer varen = meer voordeel <br>
- Vertrek voor 11.00u en na 17.00u = extra voordeel
</p>
</div>
</body>
</html>
Solution - 1
Sometime you have to use Jquery's On method see here : enter link description here So your code should be something below
$('#aantalSloepen').on("change",function() {
aantal = ($(this).val());
console.log(aantal);
$.ajax({
url: "index.php",
type: "POST",
data: {
date: begin,
quantity: aantal
},
success: function(data) {
console.log(begin, aantal);
}
});
});
antoher solution Check Your Ajax is working proper when user change the input value so for this you can add alert to check whether it's working or not ...
Solution - 1 Try this ajax code with alert
$('#aantalSloepen').change(function() {
aantal = ($(this).val());
console.log(aantal);
alert(aantal);
$.ajax({
url: "index.php",
type: "POST",
data: {
date: begin,
quantity: aantal
},
success: function(data) {
console.log(begin, aantal);
}
});
});
Now it will display alert when user change the value
Solution - 2 : Check browser's Developer Tools
Open Developer Tool By Pressing CTRL+SHIFT+I Now Click On Network tab 
Now Change the Value of input box it should display your index.php if yes your ajax working properly if not then your ajax has error