javascript - 如何在php中提交之前在另一个模态中预览模态的输入表单
问题描述
我有2个模态，第一个模态是显示输入表单，第二个模态是预览提交前在第一个模态上输入的数据。
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form action="" method="POST" name="form3">
<div class="modal-header">
<h5 class="modal-title text-left" id="exampleModalLongTitle">Start Swap</h5>
</div>
<div class="modal-body">
<div class="widget" id="swap">
<div class="col-md-12 mt-20 mb-20">
<div class="row">
<div class="col-md-5">
<h5><i class="fa fa-arrow-up fa-lg" aria-hidden="true" style="color: #8dc6fb"></i> SEND</h5>
<select class="selectpicker show-menu-arrow show-tick form-control" id="currency_send"
name="currency_send" title="select" required onchange="past(this)">
<!--<option value="">--- select ---</option>-->
<option value="1" selected="selected" data-content="<img src='../img/xe_icon/BTC.png' width='30' height='30' class='imgrs'><span> Bitcoin</span>">Bitcoin</option>
<option value="4" data-content="<img src='../img/xe_icon/ETH.png' width='30' height='30' class='imgrs'><span> Ethereum</span>">Ethereum</option>
<option value="2" data-content="<img src='../img/xe_icon/PM.png' width='30' height='30' class='imgrs'><span> Perfect Money USD</span>">Perfect Money USD</option>
</select>
<br><br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<!--<input type="number" name="se_amt" placeholder="Amount in USD" class="form-control" id="b1" value="" onKeyUp="(this.value - (this.value/100)*2)" required> -->
<input type="number" step="0.01" pattern="[0-9]+([\.,][0-9]+)?" title="Only numbers are allowed" name="se_amt" placeholder="Amount in USD" class="form-control" id="b1" value="" onKeyUp="mySend()" required>
</div>
</div>
<p id="send_crypto"></p>
</div>
<div class="col-md-2 text-center" style="margin: auto; text-align: center;"><i class="fa fa-exchange fa-2x"></i></div>
<div class="col-md-5">
<br class="visible-xs">
<h5>RECEIVE <i class="fa fa-arrow-down fa-lg" aria-hidden="true" style="color: #5cb85c"></i></h5>
<select class="selectpicker show-menu-arrow show-tick form-control" id="currency_receive"
name="currency_receive" title="select" required onchange="copyed(this)">
<!--<option value="">--- select ---</option>-->
<option value="1" data-content="<img src='../img/xe_icon/BTC.png' width='30' height='30' class='imgrs'><span> Bitcoin</span>">Bitcoin</option>
<option value="4" selected="selected" data-content="<img src='../img/xe_icon/ETH.png' width='30' height='30' class='imgrs'><span> Ethereum</span>">Ethereum</option>
<option value="5" data-content="<img src='../img/xe_icon/XRP.png' width='30' height='30' class='imgrs'><span> Ripple XRP </span>">Ripple XRP</option>
<option value="6" data-content="<img src='../img/xe_icon/TRON.png' width='30' height='30' class='imgrs'><span> Tron TRX</span>">Tron</option>
<option value="2" data-content="<img src='../img/xe_icon/PM.png' width='30' height='30' class='imgrs'><span> Perfect Money USD</span>">Perfect Money USD</option>
</select>
<br><br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="number" step="0.01" pattern="[0-9]+([\.,][0-9]+)?" title="Only numbers are allowed" name="re_amt" placeholder="Amount in USD" class="form-control" id="c1" value="" onKeyUp="myRecieve()" required>
</div>
</div>
<p id="recieve_crypto"></p>
<script>
function copyed(b){
var bx = b.options[b.selectedIndex].value;
if(bx==1){
document.getElementById("crypto_address").innerHTML = "BTC Address";
}
if(bx==2){
document.getElementById("crypto_address").innerHTML = "PM Account No.";
}
if(bx==4){
document.getElementById("crypto_address").innerHTML = "ETH Address";
}
if(bx==5){
document.getElementById("crypto_address").innerHTML = "XRP Address";
}
if(bx==6){
document.getElementById("crypto_address").innerHTML = "TRX Address";
}
//return bx;
}
function mySend() {
var x = document.getElementById("b1").value;
document.getElementById("c1").value = (x - (x/100)*2).toFixed(2);
}
function myRecieve() {
var y = document.getElementById("c1").value;
document.getElementById("b1").value = Math.round(+((y/100)*2) + +y).toFixed(2);
}
</script>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<span class=" input-group-addon"><i class="fa fa-folder"></i>
<span id="crypto_address">ETH Address</span> </span>
<input type="text" name="cryp_address" id="cryp_address" minlength="8" onkeyup="checkLen(this.value)" class="form-control" placeholder="Enter address to recievve coin" required>
</div>
</div>
<div id="counterDisplay" class="text-danger pull-right" style="font-size: 12px"></div>
<script type="text/javascript">
function checkLen(val){
if(val.length<9){
document.getElementById('counterDisplay').innerHTML = 'Invalid Entery!';
}
if(val.length>8){
document.getElementById('counterDisplay').innerHTML = ' ';
}
}
</script>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="exbutton" class="btn btn-primary" name="preview_order" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal"><i class="fa fa-refresh" id="resh" aria-hidden="true"></i> Preview Order</button>
</div>
</form>
</div>
</div>
</div>当您单击预览时，它会显示下一个模态
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="prvwModalLabel">Preview Oder</h4>
</div>
<div class="modal-body">
<div class="col-md-12 text-center">
<h3><?php
if(($_SESSION['currency_receive'])==1){
echo $_SESSION['re_amt']." BTC";
}elseif(($_SESSION['currency_receive'])==2){
echo $_SESSION['re_amt']." PM";
}elseif(($_SESSION['currency_receive'])==4){
echo $_SESSION['re_amt']." ETH";
}elseif(($_SESSION['currency_receive'])==5){
echo $_SESSION['re_amt']." XRP";
}elseif(($_SESSION['currency_receive'])==6){
echo $_SESSION['re_amt']." TRX";
}else{
echo "Invalid Selection";
}
?>
</h3>
</div>
<?php echo $_SESSION['currency_receive'].'<br>'; ?>
<?php echo $_SESSION['currency_send']." Send<br>"; ?>
<?php// echo $_SESSION['re_amt']; ?>
<?php echo $_SESSION['se_amt']; ?>
<?php //echo $_SESSION['cryp_address']; ?>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>这是我使用的 PHP 代码将这些数据存储在会话中，但如果我尝试执行另一个事务，它仍会显示先前保存的会话数据
<?php
//Swap Action
if(isset($_POST['preview_order'])){
$currency_send = $_POST['currency_send'];
$se_amt = $_POST['se_amt'];
$currency_receive = $_POST['currency_receive'];
$re_amt = $_POST['re_amt'];
$cryp_address = $_POST['cryp_address'];
if($currency_send != "" && $currency_receive !="" && $se_amt!="" && $re_amt!="" && $cryp_address!=""){
//condition is met open the preview modal
$_SESSION['currency_send'] = $currency_send;
$_SESSION['currency_receive'] = $currency_receive;
$_SESSION['se_amt'] = $se_amt;
$_SESSION['re_amt'] = $re_amt;
$_SESSION['cryp_address'] = $cryp_address;
//echo "<script>$('#thankyouModal').modal('show')</script>";
//Code Review
//Call ANOTHER MODAL TO PREVIEW ORDER BEFORE SUBMISSION
}
}
?>
我只希望第一个模式上的输入数据在单击预览订单按钮时动态显示在预览订单模式框中。感谢您的贡献。
解决方案
推荐阅读
- python - 比较 Python 中的 if 语句
- javascript - 在视图中渲染 promises.all 的结果，nodeJS
- java - 如何更改从 main 使用的数组
- android - 导航组件的默认空值：参数过多错误
- google-cloud-platform - gcp监视“任何时间序列违反”与“所有时间序列违反”
- python - 通过用户输入访问嵌套字典 - 学生数据
- concurrency - Redis 用于处理高并发和容量有限的模型？
- css - 下拉导航栏的问题
- python - 如何按性别显示包含多个选项的直方图
- javascript - ReactJS 无法让搜索过滤器（文本）工作