搜索函数javascript提交_Javascript_Search

搜索函数javascript提交

javascript search

搜索函数javascript提交,javascript,search,Javascript,Search,因此，我试图创建一个函数，通过一个xml文件进行搜索，结果会被给出，但页面会被刷新并继续加载。我想这是因为提交，但我使用了returnfalse，我仍然有同样的问题。有人能帮我吗下面是我的代码 <script type="text/javascript"> function loadXMLDoc(XMLname) { var xmlDoc; if (window.XMLHttpRequest) { xmlDoc=new window.XMLHttpRequest()

因此，我试图创建一个函数，通过一个xml文件进行搜索，结果会被给出，但页面会被刷新并继续加载。我想这是因为提交，但我使用了returnfalse，我仍然有同样的问题。有人能帮我吗

下面是我的代码

    <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>


函数loadXMLDoc（XMLname）
{
var-xmlDoc；
if（window.XMLHttpRequest）
{
xmlDoc=newwindow.XMLHttpRequest（）；
open（“GET”，XMLname，false）；
xmlDoc.send（“”）；
返回xmlDoc.responseXML；
}
else if（ActiveXObject（“Microsoft.XMLDOM”））
{
xmlDoc=新的ActiveXObject（“Microsoft.XMLDOM”）；
xmlDoc.async=false；
xmlDoc.load（XMLname）；
返回xmlDoc；
}
警报（“加载文档时出错！”）；
返回null；
}
函数搜索（）{
name=document.oForm.name.value.toLowerCase（）；
xmlDoc=loadXMLDoc（“data.xml”）；
var nodeList=xmlDoc.getElementsByTagName（“文章”）；
对于（变量i=0；i”；
document.write（“”+titleNode.getElementsByTagName（“说明”）[0]。childNodes[0]。nodeValue+””；
document.write（“”+titleNode.getElementsByTagName（“urltext”）[0]。childNodes[0]。nodeValue+””；
文件。写（“”）
}
}
}

我想重复一下，我得到的结果，我只是失去了我的布局和网页不断加载。我是为safari/safari mobile制作的，所以如果有人能提出解决方案，我会非常感激。我也不能使用任何服务器端脚本，因为我需要能够离线缓存它，所以我认为它必须是javascript

提前付款

编辑


name=GetElementById（“txt_name”）.value.toLowerCase（）；

试试这个：

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

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

<form onsubmit="return false">

（）

编辑2：这对我很有用：

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

假设xml处理代码工作正常，按如下方式操作-document.write会擦除页面 PS:Firefox可能无法按预期工作，因为XML中存在换行符：

<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>


函数loadXMLDoc（XMLname）{
var-xmlDoc；
if（window.XMLHttpRequest）{
xmlDoc=newwindow.XMLHttpRequest（）；
open（“GET”，XMLname，false）；
xmlDoc.send（“”）；
返回xmlDoc.responseXML；
}
else if（ActiveXObject（“Microsoft.XMLDOM”））{
xmlDoc=新的ActiveXObject（“Microsoft.XMLDOM”）；
xmlDoc.async=false；
xmlDoc.load（XMLname）；
返回xmlDoc；
}
警报（“加载文档时出错！”）；
返回null；
}
var xmlDoc=loadXMLDoc（“data.xml”）；
var nodeList=xmlDoc.getElementsByTagName（“文章”）；
函数搜索（表格）{
var name=form.myname.value.toLowerCase（）；
var html=“”；
对于（变量i=0；i”；
html+=“”+titleNode.getElementsByTagName（“说明”）[0]。childNodes[0]。nodeValue+””；
html+=“”+titleNode.getElementsByTagName（“urltext”）[0]。子节点[0]。节点值+””；
html+=“”；
document.getElementById（“结果”）.innerHTML=html
}
}
return false；//取消提交
}

为什么需要提交按钮？你可以简单地使用一个普通的按钮。我看不出你在哪里对提交请求返回false？@Martin我也使用了一个常规按钮，但它仍然给出了相同的问题。不要完全使用表单，而是使用一个按钮，给文本输入一个id，然后只使用GetElementById（“id”）。输入内容的值…将页面加载到firefox中，在控制台中查看。肯定会有错误。使用onsubmit并返回false可以正常工作，除非代码或处理中存在错误。从submit按钮name=document.getElementById（“txt_name”）.value.toLowerCase（）中删除代码；好吧，我尝试了所有这些（再做一次），但对我不起作用。。。我仍然会看到一个没有布局的页面（我得到了结果），并且页面一直在加载：（建议不好。如果您想使用表单的事件，请使用表单的提交事件，而不要使用按钮的事件！在代码中，您调用搜索方法两次，一次是在单击提交按钮时，然后是在表单上触发onsubmit事件时。您是否完全按照我在第二次编辑中添加的代码进行了尝试？还有不同之处e、我用我的代码触发了一个完整的函数…可能有什么地方出错了？或者正如@mplungjan所说的：我从来不知道一个文档。write擦除一个页面o。o非常感谢。正如你所看到的，我有很多东西要学。document.write在加载后擦除页面。如果必须，你可以内联编写，但innerHTML或DOM操作更好

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

<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>