텍스트 필드가 AJAX를 통해 데이터를 전달하지 않음

Question

온라인에서 찾은 AJAX 기능을 사용하여 놀았으며 드롭리스트를 사용하여 텍스트를 사용하는 동안 값을 내 검색 페이지로 보낼 수있었습니다. 나는 어려움을 겪고있다.

<form name="search" action="" method="POST"> 
Search: <input type="text" name="find" /> 
<input type="submit" value="Search" onclick="showUser()"/> 
</form> 

다음 두 가지 형식을 사용하고 있습니다. 맨 아래에있는 것은 문제가있는 것입니다. 이 아이디어가 어떤 이유일까요?

<form> 
<select name="users" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<option value="200">200</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</form> 

<script> 
function showUser(str) { 
    if (str=="") { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
    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; 
    } 
    } 
    xmlhttp.open("POST","sfindme.php?q="+str,true); 
    xmlhttp.send(); 
} 
</script> 

Answer 1

페이지를 다시로드하지 않으려면, 제출 단추 대신 showUser 함수에 대한 호출을 트리거하는 간단한 단추를 사용하십시오. 따라서 코드는 다음과 같아야합니다 :

<form name="search" action="" method="POST"> 
Search: <input type="text" id="find" /> 
<input type="button" value="Search" onclick="showUser(document.getElementById('find'))"/> 
</form> 

<div id ="txtHint"> 
</div> 

<script> 
function showUser(str) { 
    if (str=="") { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
    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; 
    } 
    } 
    xmlhttp.open("POST","sfindme.php?q="+str,true); 
    xmlhttp.send(); 
} 
</script>