File "table02.php"

Full Path: /home/analogde/www/Design/fileman/Fusion/Table/table02.php
File size: 3.45 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!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()
{
			
			var xhr = getXhr();
						
			xhr.onreadystatechange = function()
			{
					//  le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200)
					{
						response = xhr.responseText;
						document.getElementById('message').innerHTML = response;
					}
			}

			xhr.open("POST","ajax_request.php",true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			joueur = document.getElementById('myInput').value;
			
			//alert(" ---- " + joueur);
			
			//joueur = "ririavectoto"; //sel.options[sel.selectedIndex].value;
			xhr.send("joueur="+joueur);
			
			
			//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";
  
  //var currentElement = document.activeElement.value;
  
  //document.getElementById("div_message").innerHTML = " on the road again ... " + val;
  
  //alert("  ===   "  + val );
  
  
}

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

</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() " /></td>
    <td><input type="text" id="aaa" name="col2" onfocus="focusFunction(this.id)" onblur="blurFunction() " /></td>
    <td><input type="text" id="zzz" name="col3" onfocus="focusFunction(this.id)" onblur="blurFunction() " /></td>
  </tr>
  
</table>

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

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

</br></br>

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

</body>
</html>