Redirect to html based on drop Down selection

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 704 Views - Last Post: 19 October 2016 - 11:02 PM

#1 Mr_sang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-October 16

Redirect to html based on drop Down selection

Posted 18 October 2016 - 11:59 AM

Hello there, after completing my registration, i was "invited" to ask a question to the comunity, which was the main reason for registring and account, given that the forum is free for consult.
Like this aprouch that gets us straight to business without presention and first post Bs sort of crap.

I have a Script that pulls the info into a Drop-down menu regarding State, county and city. The data is stored into a mySql Db
Now i would like to, based on the user selection for a given city, a redirection to that city specific html.
I have no idea how to do it. I have been searching for the last 5 days and i starting to get desperate, near the point of giving up.

Here is the Js that controls the multiple drop down Selection:
 function getEstado() {
	
	if (window.XMLHttpRequest) {
		xmlhttp3 = new XMLHttpRequest();
		} else { 
		xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp3.onreadystatechange=function() {
		if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
			document.getElementById("estadoList").innerHTML=xmlhttp3.responseText;
		}
	}
	xmlhttp3.open("GET","includes/getEstado.php",true);
	xmlhttp3.send();
}

function getMunicipio(estado_id) {
	
	if (window.XMLHttpRequest) {
		xmlhttp3 = new XMLHttpRequest();
		} else { 
		xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp3.onreadystatechange=function() {
		if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
			document.getElementById("municipioList").innerHTML=xmlhttp3.responseText;
		}
	}
	xmlhttp3.open("GET","includes/getMunicipio.php?estado_id="+estado_id,true);
	xmlhttp3.send();
}

function getLocalidad(municipio_id) {
	
	if (window.XMLHttpRequest) {
		xmlhttp3 = new XMLHttpRequest();
		} else { 
		xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp3.onreadystatechange=function() {
		if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
			document.getElementById("localidadList").innerHTML=xmlhttp3.responseText;
		}
	}
	xmlhttp3.open("GET","includes/getLocalidad.php?municipio_id="+municipio_id,true);
	xmlhttp3.send();
} 


Here is the php script that controls the last list of possibilities
 <?php
	
	require ('conexion.php');
	
	$id_municipio = $_GET['municipio_id'];
	
	echo 'Selecciona Localidad: <select name="cbx_localidad" id="cbx_localidad">';
	
	$query = "SELECT id_localidad, localidad FROM t_localidad WHERE id_municipio = '$id_municipio' ORDER BY localidad";
	
	if($resultado=$mysqli->query($query))
	{
		while($row = $resultado->fetch_assoc())
		{
		?>
		<option value="<?php echo $row['id_localidad']; ?>"><?php echo $row['localidad']; ?></option>
		
		<?php
		}
	}
	echo '</select>';
?>


and the HTML script
 <html>
	<head>
		<title>ComboBox Ajax, PHP y MySQL</title>
		<script src="includes/js.js"></script>
	</head>
	
	<body onload="getEstado();">
		
		<div id="estadoList"></div> <br />
		
		<div id="municipioList"></div> <br />
		
		<div id="localidadList"></div>
		
	</form>
</body>
</html>
 


I think this is probably a very simple thing to do, but i'm new to programming and i have this idea of how i want to do things, wich means that i will only move forwoard after solving this issue.

Thanks in advance for any benevolent soul.

Is This A Good Question/Topic? 0
  • +

Replies To: Redirect to html based on drop Down selection

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13492
  • View blog
  • Posts: 53,896
  • Joined: 12-June 08

Re: Redirect to html based on drop Down selection

Posted 18 October 2016 - 12:07 PM

I would think the 'SELECT' 's "onchange' event would point to javascript function to load a page.
Example:
http://www.w3schools...nt_onchange.asp
Was This Post Helpful? 0
  • +
  • -

#3 Mr_sang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-October 16

Re: Redirect to html based on drop Down selection

Posted 18 October 2016 - 01:50 PM

Ok, i can grabe the selected option and output into html. That's done. but in the example you gave, var X will assume the input selected. Now, i need to make that X allows the opening of the webpage required, so if one selects the city named ABC , X will equal ABC and then open the ABC.html , the OBC.htm, if x gets the value OBC... and so one ...
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13492
  • View blog
  • Posts: 53,896
  • Joined: 12-June 08

Re: Redirect to html based on drop Down selection

Posted 18 October 2016 - 01:52 PM

A URL is nothing but a string. IF you have a set format - well.. just append the city name in the URL.
Was This Post Helpful? 0
  • +
  • -

#5 Mr_sang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-October 16

Re: Redirect to html based on drop Down selection

Posted 18 October 2016 - 02:24 PM

I'm not quite getting it... That first reference for W3 really helped to understand the concept, but getting and as i said, o got what o wanted partialy.
<html>
	<head>
	<script>
function getOption() {
    var obj = document.getElementById("cbx_localidad");
    document.getElementById("demo").innerHTML =
    obj.options[obj.selectedIndex].text;
}
</script>
		<title>ComboBox Ajax, PHP y MySQL</title>
		<script src="includes/js.js"></script>
	</head>
	
	<body onload="getEstado();">
		
		<div id="estadoList"></div> <br />
		
		<div id="municipioList"></div> <br />
		
		<div id="localidadList"></div>
		<input type="button" onclick="getOption()" value="Click Me!">
	</form>

	<p id="demo"></p>
</body>
</html>



this is working. This outputs the selection .

So instead of
 <p id="demo"></p>  
we would have <a id="demo" href= obj.php> </a>

??? I think that doesn't make any sense , sintaxily speaking :)

Help please
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13492
  • View blog
  • Posts: 53,896
  • Joined: 12-June 08

Re: Redirect to html based on drop Down selection

Posted 18 October 2016 - 02:27 PM

I do not understand where you are or what you are asking. Where's the 'onchange' event?
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: Redirect to html based on drop Down selection

Posted 18 October 2016 - 03:46 PM

If you're only using that select list to redirect someone, then it's probably better to write the full page URL in the value for each option, and you can just redirect to that value.
Was This Post Helpful? 0
  • +
  • -

#8 Mr_sang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-October 16

Re: Redirect to html based on drop Down selection

Posted 18 October 2016 - 04:55 PM

instead of onchange, i use the onclick... so when i click the button it executes the javascript. in this case it automatically prints the value stored in the var obj.

But instead of printing the value, i need to redirect to any html with the named stored in the variable.
Was This Post Helpful? 0
  • +
  • -

#9 Mr_sang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-October 16

Re: Redirect to html based on drop Down selection

Posted 19 October 2016 - 01:49 AM

I came up, with help, with this solution, so, instead of havinf a function display the result chosen, i have this one
function redirect(){
 obj = document.getElementById("choosedoption");
var href = obj.options[obj.selectedIndex].text;
window.location.href = 'obj.html?=' + this.options[this.selectedIndex].value;">
    }


where the var its used to generate the link for the html
obj


Is this the way ?
Was This Post Helpful? 0
  • +
  • -

#10 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13492
  • View blog
  • Posts: 53,896
  • Joined: 12-June 08

Re: Redirect to html based on drop Down selection

Posted 19 October 2016 - 06:41 AM

Maybe? There's not enough of the end-to-end to see what you are doing.

Side note - there is a large difference of 'onclick' and 'onchange'. You can click a control and not change something.. versus have the drop down actually do the meaningful task of changing the value and triggering the event.
Was This Post Helpful? 0
  • +
  • -

#11 Mr_sang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-October 16

Re: Redirect to html based on drop Down selection

Posted 19 October 2016 - 11:35 AM

<html>
	<head>
	<script>
function getOption() {
    var obj = document.getElementById("cbx_localidad");
    document.getElementById("demo").innerHTML =
    obj.options[obj.selectedIndex].text;
}
</script>
		<title>ComboBox Ajax, PHP y MySQL</title>
		<script src="includes/js.js"></script>
	</head>
	
	<body onload="getEstado();">
		
		<div id="estadoList"></div> <br />
		
		<div id="municipioList"></div> <br />
		
		<div id="localidadList"></div>
		<input type="button" onclick="getOption()" value="Click Me!">
	</form>

	<p id="demo"></p>
</body>
</html>



Okay, so with this, when a user chose an option on the
<div id="localidadList"></div>
, controloded by a php file and stored in the variable cbx_localidad , and after pressing the button, the function getOption() output's the selected option. ( holded by var obj )

Now i want to use the
var obj
to redirect to the html with the name stored int that variable.
I'm assuming that we can use the same function principle, but changing it to redirect to the selected page, So if the user selects the option ABC , the var obj holds the ABC value and then the scriptredirect to a file on localhost/abc.html.
After some digging i came across this solution. It's not working.

 function redirect(){
 obj = document.getElementById("cbx_localidad");
var href = obj.options[obj.selectedIndex].text;
window.location.href = "localhost/'obj.php?='" + this.options[this.selectedIndex].value;>
    }


I'm not sure that if a sintax error, a logic error or both.
All the rest of the code is working fine.The redirection part is what's missing.

Thanks in advance.
Was This Post Helpful? 0
  • +
  • -

#12 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13492
  • View blog
  • Posts: 53,896
  • Joined: 12-June 08

Re: Redirect to html based on drop Down selection

Posted 19 October 2016 - 11:38 AM

Wait - when did 'using a select box' turn into 'using a div'?
Was This Post Helpful? 0
  • +
  • -

#13 Mr_sang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-October 16

Re: Redirect to html based on drop Down selection

Posted 19 October 2016 - 11:52 AM

View PostMr_sang, on 18 October 2016 - 11:59 AM, said:

 

function getLocalidad(municipio_id) {
	
	if (window.XMLHttpRequest) {
		xmlhttp3 = new XMLHttpRequest();
		} else { 
		xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp3.onreadystatechange=function() {
		if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
			document.getElementById("localidadList").innerHTML=xmlhttp3.responseText;
		}
	}
	xmlhttp3.open("GET","includes/getLocalidad.php?municipio_id="+municipio_id,true);
	xmlhttp3.send();
} 


Here is the php script that controls the last list of possibilities
 <?php //getlocalidad.php File
	
	require ('conexion.php');
	
	$id_municipio = $_GET['municipio_id'];
	
	echo 'Selecciona Localidad: <select name="cbx_localidad" id="cbx_localidad">';
	
	$query = "SELECT id_localidad, localidad FROM t_localidad WHERE id_municipio = '$id_municipio' ORDER BY localidad";
	
	if($resultado=$mysqli->query($query))
	{
		while($row = $resultado->fetch_assoc())
		{
		?>
		<option value="<?php echo $row['id_localidad']; ?>"><?php echo $row['localidad']; ?></option>
		
		<?php
		}
	}
	echo '</select>';
?>

Was This Post Helpful? 0
  • +
  • -

#14 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13492
  • View blog
  • Posts: 53,896
  • Joined: 12-June 08

Re: Redirect to html based on drop Down selection

Posted 19 October 2016 - 11:56 AM

Okay.. I am unclear how that is responsive.

On that note, I'll tap out of the conversation.
Was This Post Helpful? 0
  • +
  • -

#15 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: Redirect to html based on drop Down selection

Posted 19 October 2016 - 12:03 PM

 function redirect(){
 obj = document.getElementById("cbx_localidad");
var href = obj.options[obj.selectedIndex].text;
window.location.href = "localhost/'obj.php?='" + this.options[this.selectedIndex].value;>
    }

Why are you using this instead of href? You define a variable called href and then you don't use it. You also have a stray ">" at the end, that's a syntax error. Your browser's developer console will point that out.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2