Tiny File Manager

File "table03.php"
Full Path: /home/analogde/www/Design/fileman/Fusion/Table/table03.php
File size: 10 KB
MIME-type: text/x-php
Charset: utf-8
Open Edit Advanced Editor Back
<?php
 
	if (isset($_POST['form_submitted'])) 
	{
		echo "Submission ...";
		
		$indice = "col1" ."-" ."row1"; 
		
		echo "----> " .$indice  . '   ' .$_POST[$indice];
		
	}		




?>

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>

<script>

//  AJAX - XMLHttpRequest
// https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/JAVASCRIPT/63-XMLHttpRequest/
// https://www.xul.fr/xml-ajax.html
// https://itecnote.com/tecnote/javascript-passing-multiple-parameters-by-post-using-ajax-to-php/

// XMLHttpRequest post

// https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-get-the-value-of-an-input-text-box

// http://www.java2s.com/Tutorials/Javascript/Javascript_Form_How_to/Text_Input/Validate_input_text_field_value_on_blur_event.htm

//traitement();

function getXhr()
{
			var xhr = null; 
			if(window.XMLHttpRequest) // Firefox et autres
			      xhr = new XMLHttpRequest(); 
			else if(window.ActiveXObject)
			     { // Internet Explorer 
					try { 
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						} 
					catch (e) 
						{ 
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
				}
				else 
				{ 
					// XMLHttpRequest non supporté par le navigateur 
					alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
					xhr = false; 
				 } 
                
				return xhr;
}

function traitement(val)
{
			
			var xhr = getXhr();
						
			xhr.onreadystatechange = function()
			{
					//  le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200)
					{
						/*var vide = "vide";
						var v1 = "pipo";
						var v2 = "rrpipo";
						
						if( v1 == v2)
						{
							alert("zorro");
						}	
						else
						{
							alert("Diif");
						}	*/						
						
						var response = xhr.responseText;
						var elt = response.charAt(0)
						//alert(response.charAt(0));
						//console.log(typeof elt);
						
						if( elt == "v")
						{
							//alert("Bingo");
							//document.getElementById('myInput').value = "";
							document.getElementById(val).value = "";
							document.getElementById('message').innerHTML = "Non valide";
						}							
						else
						{	
							document.getElementById(val).value = response;
							document.getElementById('message').innerHTML = "Valide";
						}	
					}
			}

			xhr.open("POST","analyse_champ.php",true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			//champ = document.getElementById('myInput').value;
			champ = document.getElementById(val).value;
			//alert(" ---- " + joueur);
			
			//joueur = "ririavectoto"; //sel.options[sel.selectedIndex].value;
			xhr.send("champ="+champ);
			
			
			//joueur = document.getElementById('myInput').value;
			
			//alert(" ---- " + joueur);
}




function myFunction() {
  //alert("Row index is: " + x.rowIndex);
  alert("Plouf...");
  
  // function getVal() {
  //const val = document.querySelector('input').value;
  //console.log(val);
}

function focusFunction(val) 
{
  //document.getElementById("myInput").style.background = "yellow";
  
  document.getElementById(val).style.background = "yellow";

  
  //var currentElement = document.activeElement.value;
  
  //document.getElementById("div_message").innerHTML = " on the road again ... " + val;
  
  //alert("  ===   "  + val );
  
  
}

function blurFunction(val) 
{
	document.getElementById(val).style.background = "white";
	
  //document.getElementById("myInput").style.background = "red";
  
  //document.getElementById(val).style.background = "red";
  
  
  //document.getElementById("div_message").innerHTML = "zoulou";
  
  //document.getElementById("div_message").innerHTML =  document.getElementById("myInput").value;
  
  traitement(val);
  
}
  

</script>

<body>

<h2>A basic HTML table</h2>

<table>
  <tr>
    <th>Un</th>
    <th>Deux</th>
    <th>Trois</th>
  </tr>
  <tr>
    <td><input type="text" id="myInput" name="col1" onfocus="focusFunction(this.id)" onblur="blurFunction(this.id) " /></td>
    <td><input type="text" id="aaa" name="col2" onfocus="focusFunction(this.id)" onblur="blurFunction(this.id) " /></td>
    <td><input type="text" id="zzz" name="col3" onfocus="focusFunction(this.id)" onblur="blurFunction(this.id) " /></td>
  </tr>
  
</table>

<!--
<p>To understand the example better, we have added borders to the table.</p>
-->

<div id="message" style="background-color: green;"></div> 

</br></br>

<div id="div_message"   >  	</div> 
				
				


	<form action="#" method="post">
	
	<table border="2px" >
	<tr>

<?php
	
	$array_val = array("A", "B", "C", "D", "E", "F" , "G", "H", "I" , "J" , "K");
	
	echo count($array_val);

	for ($i = 0; $i <= count($array_val)-1; $i++) 
	{
		echo  "<th>" .$array_val[$i] ."</th>";
	}
?>	
	</tr>
	
	<tr>
<?php	

	for($row=0;$row<7;$row++)
	{
?>
		<tr>
<?php		
		for($col=0;$col <= count($array_val)-1;$col++)
		{
			$indice_row = $row+1;
			$indice_col = $col+1;

			$indice = "col".$indice_col ."-" ."row".$indice_row ; 
?>			
			<td><input type="text" name = "<?php echo $indice; ?>"  id="<?php echo $indice; ?>" onblur="blabla(this.id)" /></td>
<?php
		}	
?>
		</tr>
<?php		
	}

/*
	for($i=0;$i<10;$i++)
	{
?>

		<tr>
		<td><input type="text" name="row<?php echo $i; ?>" /></td>
		<td><input type="text" name="row<?php echo $i; ?>" /></td>
		<td><input type="text" name="row<?php echo $i; ?>" /></td>
		<td><input type="text" name="row<?php echo $i; ?>" /></td>
		<td><input type="text" name="row<?php echo $i; ?>" /></td>
		<td><input type="text" name="row<?php echo $i; ?>" /></td>
		<td><input type="text" name="row<?php echo $i; ?>" /></td>
		

		</tr>
		
	
<?php
	}
*/	
?>
		<!--</tr> -->
		</table>
		
		<input type="hidden" name="form_submitted" value="1" >

		<input type="submit" value="Submit"/>
		</form>
		

	</br>
	</br>
	</br>

<div class="wrapper">
  <table id="myTable">
    <tr>

<?php

	$array_val = array("A", "B", "C", "D", "E", "F" , "G", "H", "I" , "J" , "K");
	

	for ($i = 0; $i < 10; $i++) 
	{
		echo  "<th>" .$array_val[$i] ."</th>";
	}
?>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
      <th>Col5</th>
      <th>Col6</th>
      <th>Col7</th>
      <th>Col8</th>
      <th>Col9</th>
      <th>Col10</th>
	  <th>Col11</th>
      <th>Col12</th>
      <th>Col13</th>
      <th>Col14</th>
      <th>Col15</th>
      <th>Col16</th>
      <th>Col17</th>
      <th>Col18</th>
      <th>Col19</th>
      <th>Col20</th>
    </tr>
    <tr>
      <td><input id="indice" type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
	  <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
	  <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>
      <td><input type="string" size=5></td>

      
    </tr>
    <tr>
      <td>xxx</td>
      <td>aaa </td>
      <td>bbb </td>
      <td>ccc </td>
      <td>ddd </td>
      <td>eee </td>
      <td>fff </td>
      <td>ggg </td>
      <td>hhh </td>
      <td>iii </td>
	  <td>xxx</td>
      <td>aaa </td>
      <td>bbb </td>
      <td>ccc </td>
      <td>ddd </td>
      <td>eee </td>
      <td>fff </td>
      <td>ggg </td>
      <td>hhh </td>
      <td>iii </td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>aaa </td>
      <td>bbb </td>
      <td>ccc </td>
      <td>ddd </td>
      <td>eee </td>
      <td>fff </td>
      <td>ggg </td>
      <td>hhh </td>
      <td>iii </td>
	  <td>xxx</td>
      <td>aaa </td>
      <td>bbb </td>
      <td>ccc </td>
      <td>ddd </td>
      <td>eee </td>
      <td>fff </td>
      <td>ggg </td>
      <td>hhh </td>
      <td>iii </td>
    </tr>
  </table>
</div>

<br><br><br>	

<!--
https://onlinewebtutorblog.com/submit-a-form-using-xmlhttprequest-in-javascript/
-->

	<form action="javascript:void(0);" id="frmdata" onsubmit="submitFormData(this)">
	<input type="text" id="name" name="name" placeholder="Enter name">
	<input type="email" id="email" name="email" placeholder="Enter email">
	<button type="submit">Submit</button>
	</form>
				
<script>
			
function submitFormData(event) 
{
			alert("plouf");
			
			
			var indice = "col1-row1"; 
			
			champ = document.getElementById(name).value;
			
			alert("++++ " + champ);
	
			// form values
            var name = event.name.value;
            var email = event.email.value;

            var http = new XMLHttpRequest();

            var url = 'server.php';
            var params = 'name=' + name + '&email=' + email;
            http.open('POST', url, true);

            //Send the header information
            http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

            http.onreadystatechange = function() 
			{
                if (http.readyState == 4 && http.status == 200) 
				{
                    alert("Form submitted successfully");
                    document.getElementById("frmdata").reset();
                    console.log(http.responseText);
                }
            }

            // Send params with request
            http.send(params);
}

<!-- 
https://stackoverflow.com/questions/12096941/how-to-send-arrays-using-xmlhttprequest-to-server
-->
			
function blabla(val) 
{
	alert(val);
}
				
				</script>

</body>
</html>