Question

我试图创建一个更友好的输入表单，我在文本框中询问用户的名字，并根据输入的信息，我想将此回显给显示器在页面上稍微低一点，使页面更加个性化。

我试图使用AJAX，但我愿意接受更好的选择...

<script>
function myFunction()
{
    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("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET",document.getElementById("fname");,true);
    xmlhttp.send();
}
</script>

<p>Contact's first name <input type="text" id="fname" onkeyup="myFunction()">
<div id="myDiv">Contact's</div> phone number <input type="text" id="phn"></p>

Answer 1

使用这个简单的代码

<script>    
function myFunction(val){ 

    document.getElementById("myDiv").innerHTML = val; 

}</script>
<p>Contact's first name <input type="text" id="fname" onkeyup="myFunction(this.value)">
<div id="myDiv">Contact's</div> phone number <input type="text" id="phn"></p>

Answer 2

好的，让我得到这个。

1）用户输入他的名字

2）用户必须提交名称（添加按钮）

3）使用AJAX（只有当你必须动态地将名称存储到DB时，这才是一个不错的选择）

4）如果AJAX成功，则更新用户名，或显示错误

5）如果您只想在页面上更新名称，则无需使用AJAX。（除非你只是想学习东西，否则我不会看到它的使用）

<强> HTML

<form id="user-form">
    <div>
        <span>Contact's first name</span>
        <input type="text" id="fname" name="fname">
    </div>
    <div>
        <span>Contact's phone number</span>
        <input type="text" id="phn" name="phn">
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

<p id="user-name">User name</p>

<强> JS

var userForm = document.getElementById("user-form");
userForm.onSubmit = function(e){
    e.preventDefault();
    var name = document.getElementById("fname").value;
    var phone = document.getElementById("phone").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("user-id").innerHTML = name;
        }
    }
    xmlhttp.open("POST","file.ext",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=" + name + "&phone=" + phone);
}

我建议你开始使用jQuery库。它会简化很多事情

Answer 3

我会将jQuery用于您的ajax，因为它有一些跨浏览器兼容的功能，例如$.get。

除此之外，除了语法错误之外，我还没有看到任何其他建议：

xmlhttp.open("GET",document.getElementById("fname");,true);

你应该删除分号：

xmlhttp.open("GET",document.getElementById("fname"),true);

正如@Hitham评论的那样，在每个密钥上发送请求可能并不明智。您应添加一个按钮，然后使用点击事件发送信息，或使用表单并使用提交事件。但是，如果这是一个测试练习，那么它不应该是一个问题。

如何根据文本框中的输入在页面上动态更改标签？

3 个答案: