来自同一页面上的PHP表单的数据

时间：2018-03-23 15:13:38

标签： javascript php jquery ajax forms

在提交之前，是否可以在同一页面中将数组从javascript发送到php？

我有一个带有表单的index.php，当你更改输入的值时使用它并将其发送到php。然后在PHP中使用它来发出http请求并获取新计算的价格。并使用该价格显示在页脚中。但它需要在同一页面上。

http://enjoytesting.nl/test/

所以在这里你可以看到输入字段，如果你改变了例如我想改变页脚租金价格的持续时间。

编辑：所以我认为我的更改功能有效，我想我的ajax但是在我的php中我得到错误未定义索引：日期和未定义索引：数量。那是因为我的php在我的ajax发送之前运行了吗？ 

$('#beginTijd').change(function(){
    begin =( $(this).find("option:selected").attr('value') ); 
    console.log(begin);      
});
$('#aantalSloepen').change(function(){
    aantal =( $(this).find("option:selected").attr('value') ); 
    console.log(aantal);

  $.ajax({
  type: "POST",
  data: {date:begin, quantity: aantal},
    success: function(data) {
        console.log(begin , aantal);
    }
});
});

PHP 

$value1= $_POST['date'];  
$value2= $_POST['quantity'];     

echo $value1; 
echo $value2;

完整代码

<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>
  <title>reserveren</title>
</head>
<body>
  <div id="BeschikbaarheidReserveren">
    <hr id="hrOne"><hr id="hrTwo"><hr class="hrActive" id="hrThree"><br>
    <h3>Beschikbaarheid &#38; 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>
<script type='text/javascript'>
var date = "";
var begin = "";
var eind = "";
var aantal = "";


$('#datum').change(function() {
  date = $("#datum").val();
  console.log(date);
});
$('#beginTijd').change(function(){
    begin =( $(this).find("option:selected").attr('value') ); 
    console.log(begin);      
});
$('#Tijdsduur').change(function(){
    eind =( $(this).find("option:selected").attr('value') ); 
    console.log(eind);      
});
$('#aantalSloepen').change(function(){
    aantal =( $(this).find("option:selected").attr('value') ); 
    console.log(aantal);

  $.ajax({
  type: "POST",
  data: {date:begin, quantity: aantal},
    success: function(data) {
        console.log(begin , aantal);
    }
});
});

</script>
<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

$value1= $_POST['date'];  
$value2= $_POST['quantity'];     

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>

1 个答案:

答案 0 :(得分：2)

对该特定输入标记使用change事件，并使用ajax将值发送到php 

$('#emplinpt').change(function() {
     $.ajax({
         type: "POST",
         data: {
             data: $(this).val()
         },

         success: function(data) {
             jQuery(".res").html(data);

             $('#test').html(data)
         }
     });
 });
相关问题
最新问题