根据下拉菜单选择打开文件

问题描述:

网站开发新手。我有一个单选按钮和两个下拉菜单。每个这些事项的选择,并将决定哪个文件将打开。当进行每次选择并且用户点击“提交”时,我希望页面打开相应的Excel文件。根据下拉菜单选择打开文件

我有单选按钮和下拉内置,但是当我按下提交时,没有任何反应。我试图在PHP中这样做,使其更加动态,并避免有这么多的if/else语句,但PHP在我的服务器上无法正常运行,所以我选择使用JavaScript,这会导致if语句更多,但至少会是功能性的。

这是我的JavaScript:

<script type="text/javascript"> 

    var excelObject; 
    excelObject = new ActiveXObject("Excel.Application"); 
    excelObject.Visible = true; 
    excelObject.Workbooks.Open(strLocation, false, boolReadOnly); 


    //x, y, and z are the variables for the dropdowns/radio button 
    var x = document.getElementByID("x"); 
    var y = document.getElementByID("y"); 
    var z = document.getElementByID("z"); 

    window.onload = function(){ 
     document.getElementByID("x").innerHTML=x; 
     document.getElementByID("y").innerHTML=y; 
     document.getElementByID("z").innerHTML=z; 

    function docOpen(){ 

     if (x == "test" && y ="cat" && z == "claws"){ 
      readFile('file:\\folder\folder\test_cat_claws.xls'); 

这是我补充的形式:

<form name ='myform' method="post" onSubmit="Javascript:docOpen()" > 

而这正是我按下提交:

<input type= "submit" value="Submit" name="Submit" onclick="Javascript:docOpen(); return false;"/> 

编辑: 整个代码 - 编辑,以便更为通用:

<html lang=''> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript"> 

     var x = document.getElementByID("x"); 
      var y = document.getElementByID("y"); 
      var z = document.getElementByID("z"); 


     window.onload = function(){ 
      document.getElementByID("x").innerHTML=x; 
      document.getElementByID("y").innerHTML=y; 
      document.getElementByID("z").innerHTML=z; 

     function docOpen(){ 

      if (x == "test" && y =="cat" && z == "claws"){ 
          var excelObject; 
          excelObject = new ActiveXObject("Excel.Application"); 
          excelObject.Visible = true; 
          excelObject.Workbooks.Open('file:\your_excel_file_location_here.xlsx', false, boolReadOnly);  
      } 
    </script> 

    <title>Title</title> 

</head> 
<body> 

<div class="page"> 
    <div class="header"> 
    <table border="0px"><tr><td> 
    <td id="pagetitle"><h1>Page Title</h1></td> 

    <td><iframe src="" height="60" width="280" style="border:none" scrolling="no";> </iframe></td></tr></table> 
    </div> 

    <div id="includedContent"></div> 

<div class="main" id="MainContent"> 


<div class="form_table"> 

<!--<div class="clear"></div>--> 

<form name ='myform'> 

<div id="q0" class="q required"> 
<a class="item" name="radiobutton0"></a> 
<table class="inline_grid"> 
<tr> 
<td> <input type="radio" name="x" id="x" value="test" />Test</label></td> 
<td> <input type="radio" name="x" id="x" value="test2" />Test2</label></td> 
</tr> 
</table> 
</div> 

<div class="clear"></div> 

<div id="q1" class="q required"> 
<a class="item" name="dropdown1"></a> 
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label> 
<select id="y" name="y" class="drop_down"> 
<option></option> 
<option value="cat">Cat</option> 
<option value="dog">Dog</option> 
<option value="bird">Bird </option> 
</select> 
</div> 

<div id="q2" class="q required"> 
<a class="item" name="dropdown2"></a> 
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label> 
<select id="z" name="z" class="drop_down"> 
<option></option> 
<option value="claws">Claws</option> 
<option value="paws">Paws</option> 
</select> 
</div> 
<div class="clear"></div><br/> 




<input type="Submit" name="Submit" onclick="docOpen();"/> 

</form> 


    </div> 
    <div class="clear"> 
    </div> 

</div> 

</body> 

</html> 
+0

刚抬起头,因为你使用ActiveX对象的代码只会在IE –

+0

工作的这段代码将只能在IE中执行 - 使它成为有点困难。 @AlexanderEdwards – AAA

+0

明白了,检查我的答案。 –

好了,几件事情需要注意:

看来好像在你的逻辑,你被错误使用比较运算符和使用单个=而不是两个==进行比较。改变看起来像这样。

if (x == "test" && y =="cat" && z == "claws") 

此外,您可能正在初始化ActiveXObject太早(?)。为什么条件满足后无法创建Excel工作表,就像这样:

if (x == "test" && y =="cat" && z == "claws"){ 
var excelObject; 
    excelObject = new ActiveXObject("Excel.Application"); 
    excelObject.Visible = true; 
    excelObject.Workbooks.Open(strLocation, false, boolReadOnly); 

这样,你的代码不会甚至懒得打开电子表格,除非他们满足特定的标准。

此外,从我所知道的,readFile()不是一个有效的js函数。您需要将文件位置传递给excelObject.Workbooks.Open函数的第一个参数。因此,所有说,你的代码将是这个样子:

//x, y, and z are the variables for the dropdowns/radio button 
    var x = document.getElementByID("x"); 
    var y = document.getElementByID("y"); 
    var z = document.getElementByID("z"); 

    window.onload = function(){ 
      document.getElementByID("x").innerHTML=x; 
      document.getElementByID("y").innerHTML=y; 
      document.getElementByID("z").innerHTML=z; 
      } 

    function docOpen(){ 

     if (x == "test" && y =="cat" && z == "claws"){ 
      var excelObject; 
      excelObject = new ActiveXObject("Excel.Application"); 
      excelObject.Visible = true; 
      excelObject.Workbooks.Open('file:\your_excel_file_location_here.xlsx', false, boolReadOnly);  
       } 
} 

再次,你要知道,这只会在IE浏览器给您的使用ActiveXObjects的。也许这已经足够满足您的需求。

与完整的代码编辑:

<html lang=''> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 



    <title>Title</title> 

</head> 
<body> 

<div class="page"> 
    <div class="header"> 
    <table border="0px"><tr><td> 
    <td id="pagetitle"><h1>Page Title</h1></td> 

    <td><iframe src="" height="60" width="280" style="border:none" scrolling="no";> </iframe></td></tr></table> 
    </div> 

    <div id="includedContent"></div> 

<div class="main" id="MainContent"> 


<div class="form_table"> 

<!--<div class="clear"></div>--> 

<form name ='myform'> 

<div id="q0" class="q required"> 
<a class="item" name="radiobutton0"></a> 
<table class="inline_grid"> 
<tr> 
<td> <input type="radio" name="x" id="x1" value="test" />Test</label></td> 
<td> <input type="radio" name="x" id="x" value="test2" />Test2</label></td> 
</tr> 
</table> 
</div> 

<div class="clear"></div> 

<div id="q1" class="q required"> 
<a class="item" name="dropdown1"></a> 
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label> 
<select id="y" name="y" class="drop_down"> 
<option></option> 
<option value="cat">Cat</option> 
<option value="dog">Dog</option> 
<option value="bird">Bird </option> 
</select> 
</div> 

<div id="q2" class="q required"> 
<a class="item" name="dropdown2"></a> 
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label> 
<select id="z" name="z" class="drop_down"> 
<option></option> 
<option value="claws">Claws</option> 
<option value="paws">Paws</option> 
</select> 
</div> 
<div class="clear"></div><br/> 


</form> 

<button onclick="docOpen(); return;">button</button> 


    </div> 
    <div class="clear"> 
    </div> 

</div> 


    <script type="text/javascript"> 

     function docOpen(){ 

      var x = document.querySelectorAll('input[type="radio"]:checked')[0].value; 
      var ySelect = document.getElementById('y'); 
      var y = ySelect.options[ySelect.selectedIndex].value; 
      var zSelect = document.getElementById('z'); 
      var z = zSelect.options[zSelect.selectedIndex].value; 



      if (x == "test" && y =="cat" && z == "claws"){ 
          var excelObject; 
          excelObject = new ActiveXObject("Excel.Application"); 
          excelObject.Visible = true; 
          excelObject.Workbooks.Open('file:\excel.xlsx');  
      } 
     } 
    </script> 
</body> 

</html>