如何获得值在文本框和显示值进入模态引导

假设下面是表单(不知道为什么这里需要表单)

<form name="getdata" method="post" action="">
<h5>TAG THIS SALE ORDER TO THE FOLLOWING CUSTOMER</h5>
<div class="col-xs-3">
<!-- display for customer name -->
    <div class="form-group">
        <label for="name">Contact Name</label>
        <input class="form-control" id="name" type="text" value="<?php if (isset($_POST['cust_name'])) {echo $_POST['cust_name'];}?>">                     
    </div>
    <!-- display for contact number -->
    <div class="form-group">
        <label for="no">Contact Number</label>
        <!--<input class="form-control" id="no" type="text" value="<?php /*if (isset($_POST['cust_hp_contact1'])) {echo $_POST['cust_hp_contact1'];}*/?>">-->
        <input class="form-control" id="no" name="no" type="text">
    </div>
    <button type="reset" class="btn btn-default">Clear</button>
</div>
</form>

以下是充值按钮

<button type="button" class="btn btn-default">TOPUP <br> RM 31.80</button>
<button type="button" class="btn btn-default">TOPUP <br> RM 53.00</button>
<button type="button" class="btn btn-default">TOPUP <br> RM 106.00</button>

在按钮中添加值(价格)作为数据属性，例如data-price，这些按钮也将处理模态调用，因此更改它们如下

<button type="button" class="btn btn-default" data-target="#topup"  data-toggle="modal" data-price="31.80">TOPUP <br> RM 31.80</button>
<button type="button" class="btn btn-default" data-target="#topup"  data-toggle="modal" data-price="353.00">TOPUP <br> RM 53.00</button>
<button type="button" class="btn btn-default" data-target="#topup"  data-toggle="modal" data-price="106.00">TOPUP <br> RM 106.00</button>

和现在的模态HTML(你不需要多个模态，一个模态就可以完成工作)

<div id="topup" class="modal fade">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"><img src="img/imgtopup/btncelcom.jpg"  class="img-rounded" width="70" height="60">Maxis RM10.00</h4>
        </div>
        <div class="modal-body">
            <div class="container">
            <div class="row">
            Are you sure?<br>
            <label>TopUP: <span id="TopUP"></span></label>
            <label>Name:  <span id="Name"></span></label>
            <label>Contact Number:  <span id="Contact"></span></label>
        </div>
    </div>
    <div class="modal-footer">
    <a href="#topup" class="btn btn-sm btn-default" data-dismiss="modal">Close</a>
    <button type="button" class="btn btn-sm btn-primary">Yes</button>
    </div>
</div>

现在要将值从form inputs传递到模态，可以使用模态事件侦听器来完成。

$('#topup').on('show.bs.modal', function (e) {
    //
});

创建变量以获取输入值并在modal event listeners中声明它们，同时通过e.relatedTarget从data-price属性中获取价格

$('#topup').on('show.bs.modal', function (e) {
    var price = $(e.relatedTarget).data('price');
    var contact = $('#name').val();
    var number = $('#no').val();
});

现在你有price, contact和number变量准备好了，现在将它们传递给modal，我在modal中添加了以下HTML代码来显示变量值

<label>TopUP: <span id="TopUP"></span></label>
<label>Name:  <span id="Name"></span></label>
<label>Contact Number:  <span id="Contact"></span></label>

所以最后的脚本将是

$(document).ready(function(){
    $('#topup').on('show.bs.modal', function (e) {
        var price = $(e.relatedTarget).data('price');
        var contact = $('#name').val();
        var number = $('#no').val();
        //Pass Values
        $('#TopUP').html(price);
        $('#Name').html(contact);
        $('#Contact').html(number);
    });
});

小提琴