Javascript - формирование кнопки - метод поста - PullRequest
Новая
       13

Javascript - формирование кнопки - метод поста

0 голосов
/ 07 февраля 2019

Я не эксперт по javascript.Я работаю над проектом для реализации веб-интерфейса javascript, как на первом рисунке. первое изображение

Это форма.Когда я выбираю параметр в первом и втором выборе, я получаю вторую строку, отображаемую на втором изображении. второе изображение

Во второй строке вы видите, что я реализовал другую кнопку, которые выполняют скрипт php.Я хотел бы, чтобы, когда я выполняю это с методом post, результат появлялся на боковой рамке (где написано TEST).Таким образом, это означает, что у меня есть действие формы, связанное с кнопкой в ​​первой строке и другой кнопкой во второй строке.Мне бы хотелось, чтобы, когда я нажимал на первую кнопку (в первой строке), PHP-скрипт с методом post открывался в новом окне.С другой стороны, если я нажму кнопку во второй строке, я бы хотел выполнить другой скрипт php с методом post и чтобы его результаты отображались на боковой рамке.Для реализации этого я использовал форматирование для второй кнопки.Однако я не могу передать переменные, поступающие от выбора.Может кто-нибудь дать мне несколько штук, чтобы исправить эту проблему?

Я пишу здесь код, который использовал.Я не опубликовал два скрипта 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>
...