Question

我不是javascript专家。我正在研究一个用于实现javascript Web界面的项目，如上图所示。first picture

这是一个表格。当我在第一个和第二个选择中选择一个选项时，第二行显示在第二张图片中。second picture

在第二行上，您可以看到我实现了另一个按钮，该按钮执行php脚本。我想这样，当我用方法post执行它时，结果将出现在侧面框架（写在TEST上）。因此，这意味着我有一个与第一行上的按钮和第二行上的另一个按钮相关联的表单动作。我想，当我单击第一个按钮（第一行）时，带有方法发布的php脚本将在新窗口中打开。另一方面，如果单击第二行上的按钮，则我想使用方法post执行另一个php脚本，并且其结果显示在侧面框架上。为了实现这一点，我对第二个按钮使用了formaction。但是我不能传递来自选择的变量。谁能给我一些解决方法？

我在这里写下我使用的代码。我没有发布这两个脚本php，因为它们确实微不足道。

<html>
<head>
<meta charset="UTF-8" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../calendar/mootools-yui-compressed.js"></script>
    <script type="text/javascript" src="../calendar/datepicker.js"></script>      
    <link type="text/css" rel="stylesheet" href="../calendar/datepicker.css">  
</head>
<body>
   
      
<script>
	var arrayA = ["Chap1"];

	var arrayB = ["Chap1"];

	var myForm = document.createElement("FORM");
	myForm.setAttribute("method","post");
	myForm.setAttribute("id","myForm");
	myForm.target ="";
	document.body.appendChild(myForm);
	
	var button = document.createElement("INPUT");
	button.setAttribute("type", "submit");
	button.setAttribute("formaction","test.php.php");
	button.setAttribute("formtarget","_blank");
	//----------- Select a matter-------------------------------------
	var arrayMatter = ["Choose a matter","Choice A","Choice B"];
	mySelect("matterSelect", arrayMatter, myForm);
	
	//------------ Select an operation---------------------------------
	var arrayOperations = ["Choose an operation",
	                   	   "Execute it"];
   
	mySelect("operationSelect", arrayOperations, myForm);

	myForm.appendChild(button);
	
	document.getElementById("matterSelect").addEventListener("click", function(){dropDownReset()});

	document.getElementById("operationSelect").addEventListener("click", function(){dropDownOperations()}); 

	//_________________________________________________________________________________________________________
	//----------------- FUNCTIONS------------------------------------------------------------------------------
	//_________________________________________________________________________________________________________
	
	//------------ Function to create a Select ------------------------------
	function mySelect(id, options, parent){
		var myselect = document.createElement("SELECT");
	    myselect.setAttribute("id", id);
	    parent.appendChild(myselect);
	    
		for(i = 0; i < options.length; i++){
			
		    var matterOption = document.createElement("option");
		    matterOption.setAttribute("value", options[i]);
		    var matterNode = document.createTextNode(options[i]);
		    matterOption.appendChild(matterNode);
		    myselect.appendChild(matterOption);
		}
	}

	//------------ Function to create a checkbox with text ------------------------------
    function myCheckBox(id, text){

		var cell1 = document.createElement("TD");
        
    	var mycheckbox = document.createElement("INPUT");
    	mycheckbox.setAttribute("type", "checkbox");
	    mycheckbox.setAttribute("id", id);
	    mycheckbox.setAttribute("name", id);	

		cell1.appendChild(mycheckbox);
		document.getElementById("chapterTable").appendChild(cell1);    
	    
	    var cell2 = document.createElement("TD");
	    var checkboxNode = document.createTextNode(text);
	    cell2.appendChild(checkboxNode);
		document.getElementById("chapterTable").appendChild(cell2);
	    
		var arrayMinDfLevel = ["Choose min difficulty level","1","2","3","4","5"];
		var arrayMaxDfLevel = ["Choose max difficulty level","1","2","3","4","5"];

		var cell3 = document.createElement("TD");
		mySelect("selectMinDfLevel"+id,arrayMinDfLevel,cell3);
		document.getElementById("chapterTable").appendChild(cell3);
		document.getElementById("selectMinDfLevel"+id).disabled = true;	
		
		var cell4 = document.createElement("TD");
		mySelect("selectMaxDfLevel"+id,arrayMaxDfLevel,cell4);
		document.getElementById("chapterTable").appendChild(cell4);
		document.getElementById("selectMaxDfLevel"+id).disabled = true;

		var butt = document.createElement("Input");
		butt.setAttribute("id","butt"+id);
		butt.setAttribute("type","submit");
		butt.setAttribute("formtarget","SideFrame");

		butt.setAttribute("method","post");
			
		butt.setAttribute("formaction","SideFrame.php");
		

		var textButt = document.createTextNode("Get Exercises list");
		butt.appendChild(textButt);
		document.getElementById("chapterTable").appendChild(butt);
		document.getElementById("butt"+id).disabled = true;

		
		mycheckbox.addEventListener( 'change', function() {
		    if(this.checked) {
		    	document.getElementById("selectMinDfLevel"+id).disabled = false;
		    	document.getElementById("selectMaxDfLevel"+id).disabled = false;
		    	document.getElementById("butt"+id).disabled = false;	
		    } else {
		    	document.getElementById("selectMinDfLevel"+id).disabled = true;
		    	document.getElementById("selectMaxDfLevel"+id).disabled = true;	
		    	document.getElementById("butt"+id).disabled = true;
		    }
		});
	}
       
	//------------ Function to create a submit ------------------------------
    function myFunction() {
    		document.getElementById("myForm").submit();
     }

	//------------ Function to reset chapters ------------------------------
     function dropDownReset() {
    	 document.getElementById("myForm").removeChild(document.getElementById("divTest"));
     }

     function displayListOptions(matter, subject, diff_level_min, diff_level_max){
         var urlget = "var1='"+var1+"'&diff_level_min="+diff_level_min+"&diff_level_max="+diff_level_max;
         windows.location.href =  "./SideFrame.php?"+urlget;    
     }

     function dropDownOperations(){
        var arrayS = [];
        if(document.getElementById("matterSelect").options[document.getElementById("matterSelect").selectedIndex].value == "Choice A"){
 			arrayS = arrayA;
        }
        else if(document.getElementById("matterSelect").options[document.getElementById("matterSelect").selectedIndex].value == "Choice B"){
         	arrayS = arrayB;
        }
         
    	var opSelect = document.getElementById("operationSelect");
    		
    	if(opSelect.options[opSelect.selectedIndex].value == "Créer une séquence d'entrainement random"){
    	     	
    	}
    	else if(opSelect.options[opSelect.selectedIndex].value == "Execute it"){
        	
     		var divTest = document.createElement("div");
    		divTest.setAttribute("id","divTest");
    		document.getElementById("myForm").appendChild(divTest);

     		var chapterTable1 = document.createElement("TABLE");
    		chapterTable1.setAttribute("id", "myTable");
    		divTest.appendChild(chapterTable1);

    		var row1 = document.createElement("TR");
    		row1.setAttribute("id", "myRow");
    		chapterTable1.appendChild(row1); 
    		
    		var chapterTable = document.createElement("TABLE");
    		chapterTable.setAttribute("id", "chapterTable");
    		divTest.appendChild(chapterTable);
    		
    		for(k = 0; k < 1; k++){
        		var row = document.createElement("TR");
        		row.setAttribute("id", "myRow"+k);
        		chapterTable.appendChild(row);
    			myCheckBox("chapter"+k,arrayS[k]);
    		}
   		}
     }
       
</script>

</body>
</html>

<html>
<head>
</head>
<frameset cols="70%,30%">
	<frame id ="GeneralPanel" name="GeneralPanel" heigth = 1000 width = 700 src="GeneralPanel_v002.php">
	<frame id = "SideFrame" name="SideFrame" src="SideFrame.php">
</frameset>
</html>

Javascript-格式按钮-方法发布

0 个答案: