Onchange event

cms9651 · November 30, 2010, 3:28pm

Hi everyone, I need your help.

I used the onchange event in select:


<select name="menu" 
onchange="window.location.href='?codice='+this.options[this.selectedIndex].value;">
<option value="codice1">Testo 1</option>

After loading I can read the value parameter “codice” and show / hide items in relation to that value.

Now I upgraded to AJAX and I find this situation:


<select name="codice" id="codice" onChange="cerca_province();">
<option value="codice1">Testo 1</option>


function cerca_province() 
{

codice=document.form.codice.options[document.form.codice.selectedIndex].value

    if (window.XMLHttpRequest) {
        estrai_province= new XMLHttpRequest();
        estrai_province.onreadystatechange = ricevi_province;
        estrai_province.open("GET", "estrai.asp?codice="+codice, true);
        estrai_province.send(null);

    } else if (window.ActiveXObject) {
        estrai_province= new ActiveXObject("Microsoft.XMLHTTP");
        if (estrai_province) {
            estrai_province.onreadystatechange = ricevi_province;
            estrai_province.open("GET", "estrai.asp?codice="+codice, true);
            estrai_province.send();

        }
    }
}


  function ricevi_province() {   
    var province;       
	  if (estrai_province.readyState == 4) {	    
		  province=estrai_province.responseText;

			document.getElementById('provincia').innerHTML = province;
			 }
	}

But this way I can not read the value of parameter “codice” and show / hide items in relation to that value.

Can you help me? Can someone help me?
Thanks in advance.

dogFang · November 30, 2010, 4:19pm

local variable

[COLOR="Blue"]var [/COLOR]codice=document.form.codice.options[document.form.codice.selectedIndex].value

or pass the value

<select name="codice" id="codice" onchange="cerca_province([COLOR="Blue"]this.value[/COLOR]);">

cms9651 · December 1, 2010, 10:14am

dogFang:

local variable

[COLOR="Blue"]var [/COLOR]codice=document.form.codice.options[document.form.codice.selectedIndex].value

or pass the value

<select name="codice" id="codice" onchange="cerca_province([COLOR="Blue"]this.value[/COLOR]);">

Thanks for your help but your suggestion not working…
I can not read the value of parameter “codice”…

chris_upjohn · December 1, 2010, 11:14am

Try this, i cleaned up your code as repeating your ajax call 2 times is redundant

<select name="codice" id="codice" onChange="cerca_province(this.value);">
    <option value="codice1">Testo 1</option>
</select>

function cerca_province(codice) 
{
    if (window.XMLHttpRequest)
    {
        estrai_province = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        estrai_province = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    if (estrai_province)
    {
        estrai_province.onreadystatechange = ricevi_province;
        estrai_province.open("GET", "estrai.asp?codice="+codice, true);
        estrai_province.send(null);
    }
}

cms9651 · December 1, 2010, 11:34am

Thanks but not working… I can not read the value of parameter “codice”…

chris_upjohn · December 1, 2010, 11:40am

The code should work perfectly fine as I’ve used it successfully heaps of times.

Are you getting any errors?
What exactly happens when you select a new option value?

cms9651 · December 1, 2010, 12:26pm

Ok.

I don’t receive error… no value to the parameter…

index.asp



<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript" language="javascript">

var estrai_province;
var codice

function cerca_province(codice) 
{
    if (window.XMLHttpRequest)
    {
        estrai_province = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        estrai_province = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    if (estrai_province)
    {
        estrai_province.onreadystatechange = ricevi_province;
        estrai_province.open("GET", estrai.asp?codice="+codice, true);
        estrai_province.send(null);
    }
}
   

  function ricevi_province() {   
    var province;       
	  if (estrai_province.readyState == 4) {	    
		  province=estrai_province.responseText;

			document.getElementById('provincia').innerHTML = province;
			 }
	}

</script>
</head>


<body>
<form method="post" action="" name="form">
<table>
<%nome_form="form"%>

<tr>

<td>
<select name="codice" id="codice" onChange="cerca_province(this.value);">
<option value="0">Seleziona DTR</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>

<td id="provincia"></td>

</tr>	

</table>   
    		
</form>
			
// This code not working //			
<% response.write request.querystring("codice") & "<br>" %>

</body>

</html>

Stomme_poes · December 1, 2010, 2:51pm

Do you reach readystate 4?
If your debugger shows you at 0, then you’re trying to do it locally (which for some reason doesn’t work). The page with the Javascript has to be on the server with the asp script.

If you’re getting readystate 1, then for some reason the onreadystatechange function is running before the .open and .send (I get that a lot and still haven’t figured out why).


  function ricevi_province() {   
    var province;       
	  if (estrai_province.readyState == 4) {
            alert("READYSTATE 4 !!!");	    
          }
  }

cms9651 · December 1, 2010, 3:16pm

The page with the Javascript are on the server with the asp script.
Really I don’t realize what mistakes…

cms9651 · December 1, 2010, 4:22pm

Link of the page: http://www.romatitlan.com/public/index.asp

I need read the value of parameter “codice” also on the page index.asp.

It’s possible?
Thanks.

chris_upjohn · December 1, 2010, 10:23pm

Try this

This is the asp page index.asp.<br>Value of codice = <span id="codice_value"></span>

function cerca_province(codice)  
{
    // Set the value of "codice"
    document.getElementById('codice_value').innerHTML = codice;
    
    // Make a new Ajax HTTP Request
    if (window.XMLHttpRequest) 
    { 
        estrai_province = new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject) 
    { 
        estrai_province = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
  
    if (estrai_province) 
    { 
        estrai_province.onreadystatechange = ricevi_province; 
        estrai_province.open("GET", "estrai.asp?codice="+codice, true); 
        estrai_province.send(null); 
    } 
}

cms9651 · December 2, 2010, 7:24am

Many thanks, your suggestion it’s right.

But if I use the codice_value in the server language, for example in ASP query:


SELECT * FROM tbl WHERE codice_value = ???

What value should I write in this query?

cms9651 · December 2, 2010, 1:24pm

I need execute ASP query using the value of variable “codice”.

I read in the index.asp the value of variable “codice” with:


<span id="codice_value"></span>

How do I change this ASP query ? :


SELECT * FROM tbl WHERE codice_value = ???

Thanks for your attention.

siteguru · December 3, 2010, 11:08am

ASP runs on the server, and runs BEFORE any HTML/Javascript gets executed. You’ll need to use a method to submit the value to index.asp, e.g. as a hidden form field value, so that ASP can get the value as normal …

codice_value = Request.Form(“codice_value”)

cms9651 · December 3, 2010, 12:16pm

Many thanks for your help, but I don’t understand your suggestion.
The value get in a hidden form field value is null.

This is page index.asp:

<html> 
  
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript" language="javascript"> 
  
var estrai; 
  
function cerca(codice)  
{
    document.getElementById('codice_value').innerHTML = codice;
    
    if (window.XMLHttpRequest) 
    { 
        estrai = new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject) 
    { 
        estrai = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
  
    if (estrai) 
    { 
        estrai.onreadystatechange = ricevi; 
        estrai.open("GET", "estrai.asp?codice="+codice, true); 
        estrai.send(null); 
    } 
}
  
  function ricevi() {    
    var xxx;        
      if (estrai.readyState == 4) {         
          xxx=estrai.responseText; 
  
            document.getElementById('xxx').innerHTML = xxx; 
             } 
  
    } 
  
</script> 
</head> 
  
  
<body> 
<form method="post" action="" name="form"> 
<table> 
  
 
  
<tr> 
<td> 
<select name="codice" onChange="cerca(this.value);"> 
<option value="0">Seleziona</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</td> 
</tr> 
  
<tr> 
<td id="xxx">This is the page estrai.asp... </td> 
</tr>

<tr> 
<td id="codice_value">This is page index.asp... </span></td> 
</tr>

</table>  
 
<input type="hidden" value=document.form.codice.value name="codice_value" />
 
</form> 
 
 
<br>
 
<% 

      SQL = " SELECT SQL_CALC_FOUND_ROWS * FROM "
      SQL = SQL & " tbl "
      SQL = SQL & " WHERE 1 "
      SQL = SQL & " AND ID = " & Request.Form("codice_value") & " "
      
      response.write SQL

%>  


  
</body> 
  
</html>

estrai.asp

<% 
   stringa = request.querystring("codice")
   response.write stringa & "<br>"
%>

system · December 4, 2010, 11:02am

Hello Guys
VBScript is the default scripting language that ASP is coded in, so if you want to specify a different scripting language you have to state which scripting language you will be using at the very beginning of your code. Below is the line of code that must be your first line of ASP code or else your page will break and you’ll get a boring error message.

cms9651 · December 4, 2010, 1:31pm

Sorry… for me it’s difficult to understand… :sick:

siteguru · December 5, 2010, 2:25pm

It was a slightly misleading reply … I can see that you are using AJAX to send info to an ASP page and then use the response.

Perhaps the following test code might help in your investigation?

function cerca (codice) {
	var xmlHttp;
	var resp = '';
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	}
	catch (e) {
		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
				alert ('Your browser does not handle AJAX requests');
				return false;
			}
		}
	}
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			resp = xmlHttp.responseText;
			if (resp != codice) {
				alert ('There was a problem in the AJAX process.');
			}
		}
	}

	// Send the info to the PHP handler page
	var data = 'estrai.asp?codice=' + codice;

	xmlHttp.open ("GET",data,true);
	xmlHttp.send (null);
}

cms9651 · December 6, 2010, 12:27pm

Yes, your code is helpful… any value is selected in the:

<select name="codice" onChange="cerca(this.value);">

I have this output:

There was a problem in the AJAX process.

Why?
thanks

siteguru · December 7, 2010, 3:22pm

Change the alert to this …

alert ('There was a problem in the AJAX process. Sent was "' + codice + '"; Received was "' + resp + '"');

What does the alert show now?