我正在创建一个结帐系统。我分为三个部分：
运输信息
付款信息
订单确认
我正在尝试找出一种方式，当客户输入他们的运输信息时，该数据可以回显到我的订单确认部分，以便他们可以确认将其运送到的位置。
我设计结帐系统的方式是，所有三个部分都在同一页面上。一次只显示一个部分，其他部分被隐藏，直到客户单击“继续到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">
有办法做到这一切都在同一页上吗？我真的不想为此设置多个页面，我喜欢所有格式化的方式。我只是想不通这部分。
参考方案
单击“查看”按钮时，可以通过表单的AJAX使用serialize()（如Matthew Johnson所建议）。第二个想法是这样的，您可以在页面的不同部分中从一个输入复制到另一个输入。设置工作要比AJAX之类的工作要多一些，因为您基本上是在复制表格。在.html()或div占位符内使用span可能也可以工作：
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>
我正在使用使用Visual Studio模板创建的Web表单应用程序。模板具有一个内容占位符，该占位符被访问的任何页面的内容替换。有问题的页面有几个服务器控件，例如文本框，标签和按钮。当我单击我的更新按钮时，它可以正常工作，这些值会回传并更新数据库。我想在所有子页面上创建通用的登录提示。我的导航栏（位于我的母版页中）具有引导程序设置。我在导航栏中添加了一个下…
Telerik单选按钮所需的字段验证器 - javascript如何设置Telerik单选按钮所需的字段验证器？我想在按钮单击“ BtnSave”上设置必填字段验证器吗？请帮忙！<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…
表单不提交或按钮提交不起作用 - javascript据我所知，此代码必须有效，但是我编码时却无效问题在于该表单未提交。我该如何解决？选中时，我什至没有得到复选框的值。<table id="example" class="display" cellspacing="0" width="100%"> <thead&g…
在PHP文件中调用javascript函数并在加载HTML文件之后？ - javascript我需要在我的php中调用js函数，但无法正常工作。有人可以告诉我我在做什么错吗？我该如何轻松地做到这一点？谢谢！我有三个文件： mail.php负责发送$ _POST的内容（工作正常）。我调用我的javascript函数来切换模式，具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…
如何使用PHP从动态输入字段捕获数组值？ - javascript我正在编写一个在线时间跟踪网页，允许用户将学习时间输入该系统。用户将首先输入名称，然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码，<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…