如何有效地将表单之间的价格值从一页转移到另一页

Question

基本上我的顺序是4页

1. form1.php
2. form2.php
3. form3.php
4. form4.php

每个页面都包含一个带有Html选择选项的表单，并且在每个表单的底部是一个文本视图，该视图显示一个价格，价格根据您选择的选项而变化，然后单击下一步按钮，将您带到下一页也位于表单的底部

我要在这里实现的目的是，一旦单击“下一步”按钮，文本字段中显示的当前价格便会转移到下一个表格中作为基本价格，直到用户进入最终页面为止。

是的，我已经阅读了有关cookie和会话以及POST和GET方法的信息，但是我不知道如何实现它，也不知道哪种方法会更好地解决此类问题

第一页的html和带有jQuery的价格计算工具

var basePrice = 0;

$(".calculate").change(function() {
    newPrice = basePrice;
    
    $('.calculate option:selected').each(function() {
        newPrice += $(this).data('price')
    });
    
    $('#item-price').html(newPrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" role="form" method="POST" action="form2.php" >

                      <div class="form-group col-md-12">
                          <select class="calculate diff " id="service" name="serv"  required>
                            <option data-price="0" value="0">Choose A Service </option>
                            <option data-price="0" value="1">Airport Shuttle</option>                      
                          </select>
                             
                      </div>

                       <div class="form-group col-md-12">
                          <select class="calculate diff" id="airport" name="arpt" required>
                          <option data-price="0" value="0">Pick an Airport </option>
                          <option data-price="6000" value="1">MM1</option>
                          <option data-price="5900" value="2">MM2</option>
                          
                          </select>
                             
                      </div>

                  <div class="col-md-12 row" style="margin-top:-20px">
                    <h4 class="price">Price Estimate: ₦<span id="item-price" name="price" >0</span></h4>
                    </div>

                    <div class="col-md-6" >
                        <a href="form2.php">
                      <button style="float:right;" type="submit" class="button2">
                      <span><span>NEXT</span></span></button></a>
                    </div>

                    </form>

连续的页面具有相似的形式

因此，如果在第一页中选择了MM1，然后单击了下一步按钮，则第二页价格文本中将自动出现6000。

实现此目标的最佳方法是什么？我该如何正确执行？

Answer 1

您可以通过在加载第二个表单之前将数据发送到控制器来将数据存储在本地会话中，这意味着在表单上使用提交侦听器，然后向某个控制器发出AJAX请求。然后，您可以访问表格2上的数据。

这仅在下一个按钮的类型为Submit时才有效，否则，可能使用.click(function() {});来代替。

JavaScript

(function ($) {
    $('form').submit(function() {
        $.post('/some/form/controller', { price: $('#item-price').html() }, function(response) {
            return true;
        });
    });
})(jQuery);

PHP控制器

session_start();
$_SESSION['price'] = $_POST['price'] ?? 0; # PHP 7+

# Pointed out by @FunkFortyNiner
$_SESSION['price'] = isset($_POST['price']) ? $_POST['price'] : 0; #PHP 5.6+

表格2/3/4

<?php session_start(); ?>
<h1>£<?= $_SESSION['price']; ?></h1>

如果此方法的使用时间过长，则可以考虑在计算时将价格设为禁用的输入字段，或者将其设为隐藏的输入字段，然后将所有数据过帐到可以通过$_POST[]和输入{ {1}}作为索引。