Question

这是php代码：从数据库中检索名称并粘贴联系号码。单击按钮需要填充多少，并在模态中显示多少，名称和联系人编号，然后单击是。

        <button type="submit"  data-target="#topup10" class="btn  btn-default"    data-toggle="modal" >TOPUP <br> RM 10.60</button> 
        <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>
        </div>
        <form name="getdata" method="post" action="">
            <div>

                <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>
                    <p></p>
                    <button type="reset" class="btn btn-default">Clear</button>
                </div>

                <!-- display RM10 -->
                <div id="topup10" 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>
                                        Name: <?php if (isset($_POST['cust_name'])) {echo $_POST['cust_name'];}?> <br>
                                        Contact Number: <?php
                                                                       $test = $_POST['no'];
                                                                       echo $test;
                                                        ?>  
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="#topup10" class="btn btn-sm btn-default" data-dismiss="modal">Close</a>
                                <button type="button" class="btn btn-sm btn-primary">Yes</button>
                            </div>

我如何获取价值表单联系号码文本框传递值并显示在模态引导程序中？
我尝试修改了许多isset，但也无法显示结果。感谢

Answer 1

假设以下是表格（不知道为什么你需要这里的表格）

<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>

以下是TOP-UP按钮

<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传递到模态，可以使用modal event listeners完成。

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

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

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

现在您已准备好price，contact和number个变量，现在将它们传递给模态，我在模态中添加了以下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);
    });
});

Fiddle

如何在文本框中获取值并将值显示到模态引导程序中？

1 个答案: