javascript - 回显/输出添加到同一页面上的输入字段的信息

Question

我正在创建一个结帐系统。我分为三个部分:

1. 送货信息
2. 付款信息
3. 订单确认

我正在尝试找出一种方法，当客户输入他们的送货信息时，该数据可以回显到我的订单确认部分，这样他们就可以确认这是他们想要将其运送到的地方。

我设计结帐系统的方式是所有三个部分都位于同一页面上。一次仅显示一部分，其他部分则隐藏，直到客户单击“继续 xxxx”。当他们单击“继续”按钮时，不会发送任何内容。它只是获取 div 并显示它并隐藏前一个 div。在客户单击确认 div 上的“提交订单”之前，不会发送任何内容。

我验证字段并将它们分配给变量，以便我可以将运输和产品信息发布到我的数据库中。

if($validation->passed()) {
    if(isset($_POST['create'])){ 
        $fullname = trim( $_POST['customer_name'] );
        $streetline1 = trim( $_POST['streetline1'] );
        $streetline2 = trim( $_POST['streetline2'] );
        $city = trim( $_POST['city'] );
        $state = trim( $_POST['state'] );
        $zipcode = trim( $_POST['zipcode'] );
        $phone_number = trim( $_POST['phone_number'] );
        $email = ( $_POST['email'] );
        //etc...

运输信息部分:

<div class="shippinginfocontainer">
    <span class="summarytitle">
    <p>Enter Shipping Information</p>
    </span><br>
    <div class="center">
        <div class="field">
            <label class="paddingleft" for="fullname">Full Name</label>
            <div class="center">
                <input type="text"  class="biginputbarinline" name="fullname" value="<?php echo escape(Input::get('firstname')); ?>" required>
            </div>
        </div>
        <div class="field">
            <label class="paddingleft" for="streetline1">Street Line 1</label>
            <div class="center">
                <input type="text"  class="biginputbarinline" name="streetline1" value="<?php echo escape($user->data()->streetline1); ?>" required>
            </div>
        </div>
        <div class="field">
            <label class="paddingleft" for="streetline2">Street Line 2</label>
            <div class="center">
                <input type="text"  class="biginputbarinline" name="streetline2" value="<?php echo escape($user->data()->streetline2); ?>">
            </div>
        </div>
        <div class="field">
            <label class="paddingleft" for="city">City</label>
            <div class="center">
                <input type="text" class="biginputbarinline" name="city" value="<?php echo escape($user->data()->city); ?>" required>
            </div>
        </div>
    </div>
    <div class="formleftcenter">
        <div class="field">
            <label for="state">State</label>
            <input type="text" class="mediuminputbar" name="state" value="<?php echo escape($user->data()->state); ?>" required>
        </div>
        <div class="field">
            <label for="Phone Number">Phone Number</label>
            <input type="text" class="mediuminputbar" name="Phone Number" value="<?php echo escape($user->data()->phone_number); ?>">
        </div>
    </div>
    <div class="formrightcenter">
        <div class="field">
            <label for="zipcode">Zip Code</label>
            <input type="text" class="mediuminputbar" name="zipcode" value="<?php echo escape($user->data()->zipcode); ?>" required>
        </div>
        <div class="field">
            <label for="email">Email</label>
            <input type="text" class="mediuminputbar" name="email" value="<?php echo escape($user->data()->email); ?>" required>
        </div>
    </div>
    <div class="clear">
        <button class="checkoutbutton" id="button2">Proceed to Payment Information</button>
    </div>
</div>

我不会添加我的付款部分，因为它与此问题无关。

那么这就是确认部分的相关部分。我不知道如何做到这一点，所以我只是写在 echo 中来展示我正在尝试做的事情。

<div class="confirmshippinginfo">
    <p>Shipping to:</p>
    <p><?php echo $fullname; ?></p>
    <p><?php echo $streetline1; ?></p>
    <p><?php echo $streetline2; ?></p>
    <p><?php echo $city . $state . $zipcode; ?></p>
</div>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<input class="widebutton" type="submit" value="Place Your Order">

有没有办法将所有这些都保留在同一页面上？我真的不想有多个页面，而且我喜欢所有这些格式的方式。我只是无法弄清楚这部分。

Answer 1

当您单击审阅按钮时，您可以通过表单的 serialize() 使用 AJAX(正如Matthew Johnson 建议的那样)。第二个想法是这样的，您可以在页面的不同部分从一个输入复制到另一个输入。与 AJAX 之类的东西相比，它需要更多的工作来设置，因为您基本上是在复制表单。在 div 或 span 占位符中使用 .html() 也可能有效:

HTML:

<input type="text" class="copy-from" data-copy="name" name="name" />
<input type="text" class="this-elem" id="name" disabled />

CSS

.this-elem {
    border: none;
    font-size: 18px;
    color: #333;
}

jQuery

$(document).ready(function() {
    $(".copy-from").keyup(function() {
         var ElemId = $(this).data('copy');
        $("#"+ElemId).val($(this).val());
     });
});

演示

http://jsfiddle.net/fh5kfhtm/4/

<小时/>

编辑:AJAX/PHP 解决方案

<!-- This is the placeholder for the data after submission -->
<div id="final"></div>
<!-- FORM, well really simplified form -->
<form id="orderform" method="post" action="process.php">
    <input type="hidden" name="order_form" />
    <input type="text" name="address" />
    <!--
    This triggers the ajax (you would use your 
    "Proceed to Order Confirmation" button)
    -->
    <div id="confirm">CONFIRM</div>
    <input type="submit" name="submit" value="ORDER" />
</form>

new.php文件名/路径必须与 AJAX url

中的内容匹配

<?php
if(isset($_POST['order_form'])) {
    print_r($_POST);
    exit;
}?>

jQuery AJAX

<!-- GET THE LIBRARIES (YOU SHOULD ALREADY HAVE THEM) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>    
<script>
$(document).ready(function() {
    $("#confirm").click(function() {
            $.ajax({
                    // This is where you need the right path to the new php file
                    url:'/path/to/new.php',
                    type: 'post',
                    data: $("#orderform").serialize(),
                    success: function(response) {
                        $("#final").html(response);
                    }
                });
        });
});
</script>