我试图找出如何创建一个文本验证框,假设在单击按钮时出现,并且在用户必须输入某个值之后,如果此值正确,则该按钮应继续正常功能。
这是我的代码:
<div id="texto-cupon" class="panel-boton-canjear">
<?php
if ($comprobarCanjear == 1 || $comprobarCanjear == 2 || $comprobarCanjear == 3) {
?>
<input disabled=disabled id="canjear" class="btn" type="button" value="<?php echo JText::_('COM_CUPHONEO_BOTON_CANJEAR'); ?>" data-id="<?php echo $valor->item_id; ?>" data-codigo="<?php echo $value->value; ?>" />
<?php
} elseif($comprobarCanjear == 4) {
?>
<input id="canjear" class="btn btn-info" type="button" value="<?php echo JText::_('COM_CUPHONEO_BOTON_CANJEAR'); ?>" data-id="<?php echo $valor->item_id; ?>" data-codigo="<?php echo $value->value; ?>" />
<?php
}
?>
</div>
在以下elseif($comprobarCanjear == 4)
内,按钮出现的位置以及单击此按钮时,应显示文本框。
此按钮调用下面的ajax代码:
<script>
jQuery(function(){
jQuery("#canjear").click(function(e){
if(this.tagName==="A"){
e.preventDefault();
}
jQuery.ajax({
url: "index.php?option=com_cuphoneo&task=miscuponess.canjearCupon",
type: "POST",
data: {id:jQuery(this).data("id"), codigo:jQuery(this).data("codigo")}
success: window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default"
});
});
});
</script>
答案 0 :(得分:0)
如果您不担心样式,可以使用浏览器内置的“promt()”功能。否则,您可以创建自己的窗口。第一种选择很简单。做类似下面的事情。
var input = prompt("Title");
if( input != null && input == "expectedValue")
{
window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default"
}
else
{
//invalid input
}
答案 1 :(得分:0)
尝试这一点,但请务必将一些内容更改为您自己的内容。需要jQuery UI进行对话。
示例HTML
<button id="canjear">Click me</button>
<div class="dialog" style="display:none;">
<input type="text" id="prompt" placeholder="Insert value hello" />
<button id="test">Submit</button>
</div>
<强> JS 强>
jQuery(function () {
jQuery("#canjear").click(function (e) {
jQuery('.dialog').dialog({
title: 'Prompt',
modal: true,
open: function (event, ui) {
jQuery('#test').click(function (evt) {
var theValue = jQuery('#prompt').val();
if (theValue == "hello") {
jQuery.ajax({
url: "index.php?option=com_cuphoneo&task=miscuponess.canjearCupon",
type: "POST",
data: {
id: jQuery(e.currentTarget).data("id"),
codigo: jQuery(e.currentTarget).data("codigo")
}
success: function (response) {
window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default"
}
});
}
});
}
});
});
});
答案 2 :(得分:0)
我认为你需要这样的东西:
编辑:输入页面
?>
<input type="text" id="txt" class="hidden">
<input id="canjear" class="btn btn-info" type="button"...
$("#canjear").on('click', btnClick);
function btnClick() {
$("#txt").show();
$(this).off().on('click', function() {
jQuery.ajax({
url: "index.php?option=com_cuphoneo&task=miscuponess.canjearCupon",
type: "POST",
data: {id:jQuery(this).data("id"), codigo:jQuery(this).data("codigo")},
success: function (data) {
// check against codigo ** codigo is returned by the server right??
if ($("#txt").val() != data.codigo) {
// invalid ** write code for invalid input.
alert("Please enter valid whatever into the field.");
return false;
} else {
// valid input
window.location.href = "index.php?option=com_cuphoneo&view=miscuponess&layout=default";
}
});
}
}
也许这更接近你想要的......