搜索函数javascript提交

search function javascript submit

本文关键字：提交 javascript 函数 搜索      更新时间：2023-09-26

所以我正在尝试制作一个通过xml文件进行搜索的函数，我的结果会被给出，但页面会被刷新并继续加载。我以为这是因为提交，但我使用了return false，我仍然有同样的问题。有人能帮我吗？

下面是我的代码

    <script type="text/javascript">
function loadXMLDoc(XMLname)
{
var xmlDoc;
if (window.XMLHttpRequest)
  {
  xmlDoc=new window.XMLHttpRequest();
  xmlDoc.open("GET",XMLname,false);
  xmlDoc.send("");
  return xmlDoc.responseXML;
  }
else if (ActiveXObject("Microsoft.XMLDOM"))
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.load(XMLname);
  return xmlDoc;
  }
alert("Error loading document!");
return null;
}
</script>
</head>
<body>
<form id="oForm" name="oForm" onsubmit="search(); return false">
<input type="text" name="name" id="txt_name" size="30" maxlength="70">
<input type="submit" value="klik" onclick="search()"/>
</form>
<script type="text/javascript">
function search(){
name = document.oForm.name.value.toLowerCase();
xmlDoc=loadXMLDoc("data.xml");
var nodeList = xmlDoc.getElementsByTagName("article");
for (var i = 0; i < nodeList.length; i++) {
    var titleNode = nodeList[i];
    if(titleNode.getElementsByTagName("title")[0].childNodes[0].nodeValue.toLowerCase() == name){
        document.write("<div style='width:450px;'>")
        document.write("<p>"+titleNode.getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p>");
        document.write("<p>"+titleNode.getElementsByTagName("description")[0].childNodes[0].nodeValue+"</p>");
        document.write("<p>"+titleNode.getElementsByTagName("urltext")[0].childNodes[0].nodeValue+"</p>");
        document.write("</div>")
    }
}
}
</script>

我想重复一遍，我确实得到了结果，我只是失去了布局，页面不断加载。我为safari/safari手机做了这个，所以如果有人能提出解决方案，我会仔细研究一下。我也不能使用任何服务器端脚本，因为我需要能够离线缓存，所以我认为它必须是javascript。

Ty提前

编辑

    <input type="text" name="name" id="txt_name" size="30" maxlength="70">
<input type="button" value="klik" onclick="search();"/>
name = GetElementById("txt_name").value.toLowerCase();

假设xml处理代码可以工作，那么就这样做吧-document.write WIPES页面PS：由于XML:中的换行符，Firefox可能无法正常工作

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(XMLname) {
  var xmlDoc;
  if (window.XMLHttpRequest) {
    xmlDoc=new window.XMLHttpRequest();
    xmlDoc.open("GET",XMLname,false);
    xmlDoc.send("");
    return xmlDoc.responseXML;
  }
  else if (ActiveXObject("Microsoft.XMLDOM")) {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.load(XMLname);
    return xmlDoc;
  }
  alert("Error loading document!");
  return null;
}
var xmlDoc=loadXMLDoc("data.xml");
var nodeList = xmlDoc.getElementsByTagName("article");
function search(theForm) {
  var name = theForm.myname.value.toLowerCase();
  var html = "";
  for (var i = 0; i < nodeList.length; i++) {
    var titleNode = nodeList[i];
    if (titleNode.getElementsByTagName("title")[0].childNodes[0].nodeValue.toLowerCase() == name) {
      html += "<div style='width:450px;'>";
      html += "<p>"+titleNode.getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p>";
      html += "<p>"+titleNode.getElementsByTagName("description")[0].childNodes[0].nodeValue+"</p>";
      html += "<p>"+titleNode.getElementsByTagName("urltext")[0].childNodes[0].nodeValue+"</p>";
      html+= "</div>";
      document.getElementById("result").innerHTML=html
    }
  }
  return false; // cancel the submit
}
</script>
</head>
<body>
<form id="oForm" name="oForm" onsubmit="return search(this)">
<input type="text" name="myname" id="txt_name" size="30" maxlength="70">
<input type="submit" value="klik"/>
</form>
<div id="result"></div>
</body>
</html>

试试这个：

<input type="submit" value="klik" onclick="return search()"/>

以及在搜索方法中：

function search() {
   .....
   return false;
}

编辑1:您还可以为表单本身添加一个事件：

<form onsubmit="return false">

(http://www.w3schools.com/jsref/event_form_onsubmit.asp)

编辑2:这对我有效：

<form onsubmit="return false">
    <input type="submit" value="Go" onclick="alert('yo');"/>
</form>
相关文章：