javascript - 使用 javascript 将数据库中的 php 变量与表单字段 onchange 进行比较,并相应地显示/隐藏跨度

标签 javascript php jquery

重述:

有一个 php 变量: $地址

有一个表单变量 爸爸

如果用户输入表单变量的值与 php 变量不匹配,我想在页面上显示一个跨度

例如,$address 变量 = "123 4th St"

用户在 addy 表单字段中输入“132 4th St”

一旦用户单击字段外(文本输入),因为地址不匹配,我希望显示 span id add_ck,“地址不匹配”

但是如果用户将 addy 的内容更改回“123 4th St”,span id add_ck 将不会显示任何内容,或者“”。

我知道你可以使用 onchange 事件来执行显示/隐藏操作,并且我之前已经在下拉菜单中使用过它。但是,将文本输入“更改”(通过单击字段外部或进入其他字段来确定)与 php 变量进行比较以触发跨度显示/不显示事件是我试图找出的内容。

这是我迄今为止尝试过的:

<? 
$address = "123 4th St";
?>
<html>
<head>
<script>
var db_address = '<?php echo $address; ?>';
document.getElementById('address_field').addEventListener("change", function(){
compare_addresses();
});
var compare_addresses = function(){
var new_address = document.getElementById('address_field').value;
var the_span = document.getElementById('add_ck');
if(db_address == new_address)
{
//The addresses are equal. Show 'add_ck'.
add_ck.style.display = 'block';
}
else
{
//The addresses are not equal. Hide'add_ck'.
add_ck.style.display = 'none';
}
}
</script>
</head>
<body>
<form name="form" method="POST" action="">
<input type="text" name="addy" id="address_field">
<input type="submit"> 
</form>
<span id="add_ck">Testing</span>
</body>
 </html>

最佳答案

首先,您的输入字段应该有一个 id。假设我们将其命名为 address_field:

<input type="text" name="addy" id="address_field">

将 PHP 中的值放入 JS 变量中:

var db_address = '<?php echo $address; ?>';

向文本框添加事件监听器:

document.getElementById('address_field').addEventListener("change", function(){
   compare_addresses();
});

compare_addresses 函数中比较两个字符串:

var compare_addresses = function(){
    var new_address = document.getElementById('address_field').value;
    var the_span = document.getElementById('add_ck');
    if(db_address == new_address)
    {
        //The addresses are equal. Show 'add_ck'.
        the_span.style.display = 'block';
    }
    else
    {
        //The addresses are not equal. Hide'add_ck'.
        the_span.style.display = 'none';
    }
}

关于javascript - 使用 javascript 将数据库中的 php 变量与表单字段 onchange 进行比较,并相应地显示/隐藏跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37952550/

相关文章:

javascript - 在传单 map 上显示json数据

javascript - window.print()和window.close()函数Safari IOS在不等待打印预览的情况下关闭窗口

php - 在 codeigniter 中调试路由?

php - 标准化 PHP 中的 DateInterval

javascript - 进度条仅适用于页面加载/重新加载

javascript - 如果字符串与 jquery 中的一行匹配,则禁用按钮

javascript - 单击表会导致多个 ajax 操作使用 jQuery 运行

javascript - 油猴脚本

php - 您应该采取哪些步骤来加速 SimpleTest?

php - jQuery Ajax 返回整个页面