Question

我有一个适用于注册和登录的表单，并使用javaScript Ajax提交它。

它在Mozilla Firefox中工作正常但在Chrome和IE中失败。

我正在尝试执行一个AJAX和PHP脚本，该脚本在文本框中使用电子邮件ID检查数据库。如果电子邮件ID已存在于数据库中，则显示密码字段（登录），否则显示其他强制字段。即姓名和电话号码（注册）。

我的主要问题是这部分不起作用。

document.getElementById("contbtn").style="display:none";
document.getElementById("subbtn").style="display:block";

这是javaScript Ajax代码：

<script>
function CheckUser()
{
    var uemail = document.getElementById("email").value;
    var xmlhttp;    
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
var frm_element = document.getElementById('contbtn');
var vis = frm_element.style;

if (vis.display=='' || vis.display=='none') {
    vis.display = 'block';
}
else {
    vis.display = 'none';
}

var frm_element1 = document.getElementById('subbtn');
var vis1 = frm_element1.style;

if (vis1.display=='' || vis1.display=='none') {
    vis1.display = 'block';
}
else {
    vis1.display = 'none';
}
        }
    }

    xmlhttp.open("GET","check_user.php?emlid="+uemail,true);
    xmlhttp.send();

}
</script>
<body>
<form action="" method="post">
<ul class="contactform">
<li><label>Email</label><input name="email" id="email" required="" onblur=" return CheckUser();" type="text"></li>
<div id="txtHint"></div>
<li>
<input class="btn" id="contbtn" onclick="CheckUser();" type="button" value="Next" style="display: block;">
<input class="btn" id="subbtn" style="display: none;" type="submit" value="Submit">
</li>
</ul>
</form>

Answer 1

要真正回答这个问题的原因：

style是HTMLElement的属性，无法覆盖。（它受到保护）。在您的第一个示例中，您尝试通过style = "string"执行此操作。

JavaScript代码中的样式为object，所有style attributes均可用作object attributes。 CSS代码和JavaScript之间的区别是破折号。单独的单词在CSS代码中得到短划线-，并在camelCasing的JavaScript中连接，例如：CSS代码中的border-width在JavaScript中变为borderWidth。

因此，要在JavaScript中正确设置或检索样式属性，请将style视为对象。 e.g：

Element.style.display = "block"
Element.style.borderBottomColor = "#ff0000"

Answer 2

我让它工作只是替换了这个

    document.getElementById("contbtn").style="display:none"
    document.getElementById("subbtn").style="display:block";

使用

var frm_element = document.getElementById('contbtn');
var vis = frm_element.style;

if (vis.display=='' || vis.display=='none') {
    vis.display = 'block';
}
else {
    vis.display = 'none';
}

var frm_element1 = document.getElementById('subbtn');
var vis1 = frm_element1.style;

if (vis1.display=='' || vis1.display=='none') {
    vis1.display = 'block';
}
else {
    vis1.display = 'none';
}

Javascript / Ajax适用于Mozilla Firefox，但不适用于Google Chrome和IE

2 个答案: