使用javascript将DB中的php变量与表单字段onchange进行比较，并相应地显示/隐藏范围_Javascript_Php_Jquery

使用javascript将DB中的php变量与表单字段onchange进行比较，并相应地显示/隐藏范围

javascript php jquery

使用javascript将DB中的php变量与表单字段onchange进行比较，并相应地显示/隐藏范围,javascript,php,jquery,Javascript,Php,Jquery,重申：有一个php变量： $地址有一个表单变量艾迪如果用户在表单变量中输入的值与php变量不匹配，我想在页面上显示一个span 例如，$address变量=“123 4th St” 用户在addy表单字段“132 4th St”中键入一旦用户单击字段外（文本输入），由于地址不匹配，我希望span id add_\u ck显示“地址不匹配” 但是，如果用户将addy的内容更改回“123 4th St”，span id add_ck将不会显示任何内容，或“” 我知道你可以用onchang

重申：

有一个php变量： $地址

有一个表单变量艾迪

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

例如，$address变量=“123 4th St”

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

一旦用户单击字段外（文本输入），由于地址不匹配，我希望span id add_\u ck显示“地址不匹配”

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

我知道你可以用onchange事件做显示/隐藏的事情，我以前用过下拉菜单。但是，将文本输入“change”（通过在字段外或其他字段中单击来确定）与php变量进行比较，以触发span display/no display事件，这是我试图找到的

这就是我迄今为止所尝试的：

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


var db_地址=“”；
document.getElementById（'address_field'）。addEventListener（“change”，function（））{
比较_地址（）；
});
var compare_addresses=函数（）{
var new_address=document.getElementById（'address_field'）。值；
var the_span=document.getElementById（'add_ck'）；
如果（数据库地址==新地址）
{
//地址相等。显示“添加”。
添加_ck.style.display='block'；
}
其他的
{
//地址不相等。请隐藏“添加”。
添加_ck.style.display='none'；
}
}
测试

PHP是服务器端的，javascript是客户端的，因此这里不需要定义var addy。只有在var$_POST['addy']中提交表单时，才应定义addy var

首先，您的输入字段应该有一个id。我们称之为

地址\u字段

：

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

在

compare\u 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和php。这种方式是不可能的。弄清楚你的逻辑中到底是什么可能有点棘手，但你在某种程度上混合了这些语言，它们并不完全是要混合的。您需要让JavaScript完全处理输入和逻辑，或者以一种可以持续访问PHP状态的方式将其拆分。PHP主要是寻找表单提交（您可以将其用于事件处理，但JS/JQ只是在这方面做得更好）。如果无法从“操作”启动PHP，那么一切都需要在JS中完成。PHP操作不一定需要重新加载页面。当我点击addy字段并将地址更改为$address变量以外的其他变量时，跨度没有变化。无论发生什么情况，它都保持可见。创建元素后必须运行JavaScript，换句话说，将

标记放在表单下方。我想向上投票并检查所选答案是说“+1”或“谢谢”的另一种方式：

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'.
        the_span.style.display = 'block';
    }
    else
    {
        //The addresses are not equal. Hide'add_ck'.
        the_span.style.display = 'none';
    }
}