首页 PHP 如何在文本框中获取值并将值显示到模态引导程序中?
如何在文本框中获取值并将值显示到模态引导程序中?
[英] How to get value in textbox and display value into modal bootstrap?
本文介绍了如何在文本框中获取值并将值显示到模态引导程序中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是php代码:从数据库中检索姓名并记录联系电话.单击按钮必须充值多少并在模式中显示多少、姓名和联系电话，然后单击是.
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> <form name="getdata" method="post" action=""><div><h5>将此销售订单标记给以下客户</h5><div class="col-xs-3"><!-- 显示客户名称--><div class="form-group"><label for="name">联系人姓名</label><input class="form-control" id="name" type="text" value="<?php if (isset($_POST['cust_name'])) {echo $_POST['cust_name'];}?>">
<!-- 显示联系电话--><div class="form-group"><label for="no">联系电话</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">
<p></p><button type="reset" class="btn btn-default">清除</button>
<!-- 显示 RM10 --><div id="topup10" class="modalfade"><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">×</button><h4 class="modal-title"><img src="img/imgtopup/btncelcom.jpg" class="img-rounded" width=70" height="60">Maxis RM10.00</h4>
<div class="modal-body"><div class="容器"><div class="row">你确定吗?<br>名称:<?php if (isset($_POST['cust_name'])) {echo $_POST['cust_name'];}?><br>联系电话:<?php$test = $_POST['no'];回声 $test;?>
<div class="modal-footer"><a href="#topup10" class="btn btn-sm btn-default" data-dismiss="modal">关闭</a><button type="button" class="btn btn-sm btn-primary">是</button>
如何获取值表单联系号码文本框传递值并显示在模态引导程序中? 我尝试修改了许多isset，但也无法显示结果.谢谢
解决方案
假设下面是表格(不知道为什么这里需要表格)
以下是充值按钮
TOPUP 在按钮中添加值(价格)作为数据属性，例如 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 class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title"><img src="img/imgtopup/btncelcom.jpg" class="img-rounded" width="70" height="60">Maxis RM10.00</h4>
<div class="modal-body"><div class="容器"><div class="row">你确定吗?<br><label>TopUP:<span id="TopUP"></span></label><label>名称:<span id="Name"></span></label><label>联系电话:<span id="Contact"></span></label>
<div class="modal-footer"><a href="#topup" class="btn btn-sm btn-default" data-dismiss="modal">关闭</a><button type="button" class="btn btn-sm btn-primary">是</button>
现在将值从表单输入传递到模态，可以通过来完成模态事件监听器 .
$('#topup').on('show.bs.modal', function (e) {//});创建变量以获取输入值并在modal event listeners中声明它们，同时通过e.relatedTargetdata-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 变量，现在将它们传递给模态，我在模态中添加了以下 HTML 代码以显示变量值
TopUP: <label>名称:<span id="Name"></span></label><label>联系电话:<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();//传递值$('#TopUP').html(价格);$('#Name').html(联系人);$('#Contact').html(number);});});小提琴
This is the php code: retrieve name from database and tape the contact number. click the button how much have to top up and display how much, name and contact number into the modal and click yes.
<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">×</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>
How I can get value form contact number textbox pass value and display in modal bootstrap?
I try to modified many isset there also cannot display the result. Thanks
解决方案
Assuming following is the form (no idea why you need the form here)
<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>
Following are TOP-UP buttons
<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>
add values (prices) as data attribute e.g data-price in buttons, also these buttons will also handle the modal call too so change them as following
<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>
And Now Modal HTML (You don't need multiple modals, one modal can do the job)
<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">×</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>
Now to pass values from form inputs to modal, can be done with modal event listeners .
$('#topup').on('show.bs.modal', function (e) {
//
});
create variables to get input values and declare them in modal event listeners along with fetch the price from data-price attribute by e.relatedTarget
$('#topup').on('show.bs.modal', function (e) {
var price = $(e.relatedTarget).data('price');
var contact = $('#name').val();
var number = $('#no').val();
});
Now you have price, contact and number variables ready, now pass them to modal, i added following HTML code in modal to show the variable values
<label>TopUP: <span id="TopUP"></span></label>
<label>Name: <span id="Name"></span></label>
<label>Contact Number: <span id="Contact"></span></label>
so final Script will be
$(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
这篇关于如何在文本框中获取值并将值显示到模态引导程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
