简体   繁体   English

执行 javascript onclick 按钮

[英]Execute javascript onclick button

There are thousand of topics about this, but I haven't found anyone with same problem.关于此的主题有数千个,但我还没有发现任何人有同样的问题。 I have tryed many example but I don't know what I'm wrong.我已经尝试了很多例子,但我不知道我错了什么。 I have created this example that calls data from db and fills one of two selections in this html page.我创建了这个示例,它从 db 调用数据并填充此 html 页面中的两个选择之一。 I have two functions, one executed correctly when I charge page, but I should want execute the second when I click on button.我有两个功能,一个在我收费页面时正确执行,但是当我点击按钮时我应该执行第二个。 Well, if I charge both functions on load using body tag, it works properly, while if I charge the first on load and I try to call the second by onclick event it doesn't works.好吧,如果我使用 body 标签在加载时为这两个功能充电,它可以正常工作,而如果我在加载时为第一个充电并尝试通过 onclick 事件调用第二个功能,则它不起作用。 Can someone helps me?有人可以帮助我吗? Thanks谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document</title>
</head>
<script type="text/javascript">

function getServ() {
var url = "all_wom.php";
var sel = document.getElementById('service1');
var obj;
var xmlhttp = new XMLHttpRequest();
//  ajax
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  obj = JSON.parse(xmlhttp.responseText);
  for ( i = 0; i < obj.length; i++) {

   var opt = document.createElement('option');
   opt.innerHTML = obj[i].Descrizione; 
   opt.value = obj[i].ID;
   sel.appendChild(opt);
  }
 }

}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

function getCol() {
var url = "all_col.php";
var sel = document.getElementById('service2');

var obj;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        obj = JSON.parse(xmlhttp.responseText);

  for ( i = 0; i < obj.length; i++) {

   var opt = document.createElement('option');
   opt.innerHTML = obj[i].Nome; 
   opt.value = obj[i].ID;
   sel.appendChild(opt);
  }
 }

 }
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

</script>
<body onload=getCol();>
 <form name="form" >

 <br />
 <br />
 <label>First Select</label><select id="service1"  ></select>
 <br />
 <br />
 <br />
 <br />
 <label>Servizi </label><select id="service2" ></select>
 <br />
 <br />

 <input type="submit" align="center" onClick=getServ(); value="service1" />
 <input type="submit" align="center" value="service2" />
 <br />
 <br />
 </form>
 </body>
 </html>

The click event is attached to a submit button.单击事件附加到提交按钮。

When you click the button you:当您单击按钮时,您:

  1. Trigger the Ajax request触发 Ajax 请求
  2. Submit the form提交表格
  3. Leave the page离开页面
  4. Destroy the JavaScript environment the Ajax request is running in (so there is nowhere for the Ajax respond handler to run now)破坏运行 Ajax 请求的 JavaScript 环境(因此 Ajax 响应处理程序现在无处可运行)
  5. Load a new page加载新页面

If you want the Ajax to work, you need to prevent the default behaviour of the submit button.如果您希望 Ajax 工作,您需要阻止提交按钮的默认行为。

Using legacy intrinsic event attributes in the way you are, you would return false;以您的方式使用遗留的内部事件属性,您将return false; from the onclick attribute.来自 onclick 属性。 You should switch to modern event binding techniques through.您应该通过切换到现代事件绑定技术

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM