我的javascript函数不会重定向到其他页面

Question

I have two items first is a dropdownbox that once user selects its options will trigger a javascript code and show the results on the same page,

the second one is a input box and a search button, once user type something and click on search button, it triggers the javascript but for some reasons it adds the value to the current page address rather than redirecting to other page and xmlhttp.status returns 0.

Rather than redirecting to class/myresults.php it add the item1 and its value to the current page address which is www.myexample.com/index.php?item1=computer

My form that does not work

<form action="">
               <input name="search" type="text" title="Search"/>
               <input type="submit" value="search" onclick="finditem(this.form.search.value)"/>
</form>


function finditem(option){
    alert(option); <<<<shows the correct entered value
     if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            alert(xmlhttp.status);  << returns 0
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("Result").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","class/myresults.php?item1="+option,true);
        xmlhttp.send();
    }

java script of the drop down box that works

<select name="items" onchange="findbox(this.value)">
   .....
  </select>

 function findbox(option){
             if (window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("Result").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","class/myresults.php?item2="+option,true);
                xmlhttp.send();

            }

Answer 1

Your form gets submitted, i.e. the browser posts the data to the same location where it found your page. You do not seem to want that. Therefore you should prevent the submittal of the form. To accomplish that, you should not listen to the onclick event of the button but to the onsubmit event of the form:

<form action="" onsubmit="return finditem(this.search.value)">
               <input name="search" type="text" title="Search"/>
               <input type="submit" value="search"/>
</form>

And here's the JavaScript: (Notice that finditem returns false to prevent the form from actually submitting.)

function finditem(option){
     if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("Result").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","class/myresults.php?item1="+option,true);
        xmlhttp.send();

        return false;
    }