Text box value gets automatically cleared on dropdown change event.

Question

khadrani_arif 0 Newbie Poster

16 Years Ago

Hi,

Here I am having a dropdown named Category and another drop down named Sub category.There is one text box named zipcode which is filled with the previous request page.What happens is when I select any category the onchange event fires and a list of cars gets displayed.But parallely the zipcode text box gets blank.

What I want is I dont want the text box value to be blank on drop down change event.

I guess this happens because on change event the page gets refresh.

<?
	include "config.php";
	$vc = $_GET['vc'];
	$zip = $_GET['zip'];
?>
<html>
<head>
<style>
<!--
.dragme{position:relative;}
-->
</style>

<script language="javascript" src="list.js"></script>
<link href="cars.css" rel="stylesheet" type="text/css" />
<script>
<?
echo "
function fillCategory(){ 
 // this function is used to fill the category list on load

";
	//For Category
	$q1=mysql_query("select * from jos_categories where section='com_vehiclemanager'");
	echo mysql_error();
	while($nt1=mysql_fetch_array($q1)){
	echo "addOption(document.form1.Category, '$nt1[id]', '$nt1[title]', selected='selected');";
	}

	// For model
	$model=mysql_query("select * from jos_vehiclemanager_vehicles");
	echo mysql_error();
	while($mo=mysql_fetch_array($model)){
	echo "addOption(document.form1.SubCat, '$mo[id]', '$mo[vmodel]', selected='selected');";
}

// end of while

?>

} // end of JS function

function SelectSubCat(){
// ON or after selection of category this function will work

	removeAllOptions(document.form1.SubCat);
	addOption(document.form1.SubCat, "", "SubCat", "");

// Collect all element of subcategory for various cat_id 

	<?
		//let us collect all cat_id and then collect all subcategory for each cat_id
		$q2=mysql_query("select distinct(catid)  from jos_vehiclemanager_vehicles");
		// In the above query you can collect cat_id from category table also. 
		while($nt2=mysql_fetch_array($q2)){
		//echo "$nt2[cat_id]";
		echo "if(document.form1.Category.value == '$nt2[id]'){";
		$q3=mysql_query("select vmodel from jos_vehiclemanager_vehicles where catid='$nt2[catid]'"); 
		while($nt3=mysql_fetch_array($q3)){
			echo "addOption(document.form1.SubCat,'$nt3[catid]', '$nt3[vmodel]');";
		} // end of while loop
		echo "} "; 
	} 

	?>
	var w = document.form1.Category.selectedIndex;
	var v = document.form1.Category.options[w].value;
	self.location = "index.php?option=com_content&view=article&id=58&Itemid=56&vc=new&v=" +v;
}
function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text)
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

function fillmodel()
{
	var val=document.form1.SubCat.selectedIndex;
	var m= document.form1.SubCat.options[val].value;
	self.location = "index.php?option=com_content&view=article&id=58&Itemid=56&vc=new&m="+m;
	
}
function fillprice()
{
	var val=document.form1.price.selectedIndex;
	var p = document.form1.price.options[val].value;
	self.location = "index.php?option=com_content&view=article&id=58&Itemid=56&p="+p;
}
function getzipcode()
{
	var zip = document.getElementById("zipcode").value;
	self.location ="index.php?option=com_content&view=article&id=58&Itemid=56&zip="+zip;
}
</script>

</head>

<body onLoad="fillCategory();">
<table width="70%" cellpadding="0" cellspacing="5" class="table-border" border="1">
  <tr>
    <td colspan="3" align="left"><img src="images/stories/clearance_tab_new_off.gif" /><img src="images/stories/clearance_tab_used_off.gif" /><img src="images/stories/clearance_tab_deal_off.gif" width="157" height="26" /><span style="padding-left:200px">Your zip code 
    <input type="text" name="zipcode" id="zipcode" value="<? echo $zip; ?>" size="2" onChange="getzipcode()">
    <a href="#"  onClick="showzipcode();"><script language="JavaScript">document.write(zipcode)</script>change</a>
    </span>    </td>
  </tr>
  <tr>
    <td colspan="3" style="background-repeat:repeat-x">Top new car bargains in your area</td>
  </tr>
  <tr>
    <td width="33%" colspan="0" class="clearancelot-subtable" style="background-repeat:repeat-x"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="clearancelot-subtable">
      <tr>
        <td align="center" class="clearancelot-td-text">MSRP Range: $10,000-$65000</td>
      </tr>
      <tr>
        <td style="background-repeat:repeat-x;">
        <form id="form1" name="form1" method="post" action="">
        <p align="center">
        <select name="price" onChange="fillprice();">
        <option value="" >Select price</option>
        <option value="10000">$10000</option>
        <option value="15000">$15000-$65000</option>
        <option value="20000">$20000-$65000</option>
        <option value="25000">$25000-$65000</option>
        <option value="30000">$30000-$65000</option>
        <option value="35000">$35000-$65000</option>
        <option value="40000">$40000-$65000</option>
        <option value="45000">$45000-$65000</option>
        <option value="50000">$50000-$65000</option>
        <option value="55000">$55000-$65000</option>
        <option value="60000">$60000-$65000</option>
        <option value="65000">$65000</option>
        </select>
        </p>
 
        </td>
      </tr>
    </table></td>
    <td width="40%"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="clearancelot-subtable">
      <tr>
        <td class="clearancelot-td-text">Search By Make</td>
      </tr>
      <tr>
        <td>
        
          <p align="center">
        	<select name="Category" tabindex="1" onChange="SelectSubCat();">
            <option value="">Select Category</option>
            </select>
          </p>
           </td>
      </tr>
    </table></td>
    <td width="27%" class="clearancelot-subtable"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="clearancelot-subtable">
      <tr>
        <td class="clearancelot-td-text">Search By Model</td>
      </tr>
      <tr>
        <td>
          <p align="center">
            <select name="SubCat" id="SubCat" tabindex="1" onChange="fillmodel();">
              <option value="">Select Model</option>
             </select>
            </p>
             </td>
      </tr>
    </table></td></form>
  </tr>
  <tr>
    <td colspan="3" align="center" bgcolor="#CCCCCC" >
   	  <table border="0" cellpadding="0" cellspacing="5" >
      <tr>
            <td>
            	
				<?		
					
					$v = $_GET['v'];
					$m = $_GET['m'];
					$p = $_GET['p'];
					echo $price;
					$i = 1;
					if($zip > 0)
					{
						$query = mysql_query("select id, catid, image_link from                                             				                                              jos_vehiclemanager_vehicles 
											  where vlocation REGEXP '".mysql_real_escape_string($zip)."' ");
					}
					if($v == 0 && $m == 0)
					{
						$query = mysql_query("select id, catid, image_link from                                             				                                               jos_vehiclemanager_vehicles 
											 where vcondition='".$vc."' ");
					}
					if($v > 0)
					{
						$query = mysql_query("select id, catid,image_link from                                              jos_vehiclemanager_vehicles 
						                      where catid='".$v."' and vcondition='".$vc."' ");
					}
					if($m > 0)
					{
						$query = mysql_query("select id, catid,image_link from                                              jos_vehiclemanager_vehicles 
						                      where id='".$m."' and vcondition='".$vc."' ");
					}
					if($p == 10000)
					{
						$query = mysql_query("select id, catid, image_link 
						                      from jos_vehiclemanager_vehicles
											  where price < 10000 ");
					}
					else 
					{
						if($p > 10000 && $p < 65000)
						{
							$query = mysql_query("select id, catid, image_link, price 
						                      from jos_vehiclemanager_vehicles
											  where price between '".$p."' and 65000");
						}
					}
					echo '<table border="0" cellspacing="30" cellpadding="0" bgcolor="#FFFFFF">'
						.'<tr>';
						while($row=mysql_fetch_array($query))
						{
							echo '<td>'
								.'<a href="index.php?option=com_vehiclemanager&task=view&id='.$row['id'].'&catid='.$row['catid'].                                 '&Itemid=55"  >'
								.'<img src="components/com_vehiclemanager/photos/'.$row[                                  'image_link'].'" width="142" height="73" class="image"/>'
								.'</a>'.$row['price']
								.'</td>';
							if($i%4 == 0)
							{
								echo '</tr>'
									
									.'<tr>';
							}
							$i++;	
						}
						echo '</table>';
					
				?>            </td>
          </tr>
        </table>    </td>
  </tr>
</table>
</body>
</html>
<script>
function showzipcode()
{
	var zipcode = prompt("Enter your zip code");
	
}
</script>

Please help,
Thanks in advance

html-css javascript php

Edited 16 Years Ago by nav33n because: Changed code snippet to forum thread.

2 Contributors
1 Reply
769 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by CJesusSaves

Dani AI

Generated 10 Months Ago

Short diagnosis and a few practical fixes (builds on observation): the onchange handlers in the page perform a full redirect and that redirect replaces the current query string. If the redirect URL does not include the zip parameter, PHP never receives it and the input appears empty after the reload.

A robust, minimal-change fix: preserve existing query parameters when redirecting instead of hand‑concatenating strings. Example (modern browsers) — read the current search, set or replace the values needed, then navigate with the updated query string:

// read current query, change or add params, then reload with them
const params = new URLSearchParams(window.location.search);
params.set('v', selectedCategoryValue);
params.set('vc', 'new');
window.location.search = params.toString();

Better long-term: avoid full page reloads for dependent UI like the SubCat list. Serve a small JSON endpoint (e.g., ajax_models.php?cat=ID) and update the SubCat <select> with fetch/XHR. That keeps the zipcode input in the DOM and prevents any server round‑trip that clears it.

Quick alternatives when a reload is required but AJAX is not wanted:

Put the zipcode input inside the same <form> the selects use and submit the form (GET) on change so the browser includes it automatically.
Or add a hidden input into the form and copy document.getElementById('zipcode').value into it immediately before changing location.

Extra notes:

Use encodeURIComponent for any manual URL parameters and htmlspecialchars() on the PHP echo to avoid HTML/XSS issues when printing $zip.
The current page has a nonfunctional showzipcode/document.write fragment and a very small input size for US zips; consider fixing or removing that code.

Troubleshooting checklist: open Network tab to confirm the outgoing URL contains zip, and use var_dump($_GET) server‑side to verify the param arrives.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

CJesusSaves 6 Light Poster · Answer 1 · 2010-01-21T13:47:56+00:00

Line 68 of the subcategory function does not include a zip parameter in the url, so from self.location url, there's no zip for $_GET ($zip = $_GET; ) to get. So thus, on line 115, echo $zip will fill nothing for value because $zip was already set to nothing. Did you check to see if that is the case?

Anyhow if that's the case, "before the onchange event fires and a list of cars gets displayed" set/store the zipcode.

Your getzipcode() should really be called SetZipCode(), it creates less confusion. So from now on, I'll refer to getzipcode() as SetZipCode(). :)

1. On line 104, instead of that private variable, declare publicly var zip. That is, outside the function SetZipCode() (but within your JS script tags).

You will end up with:

var zip;
function SetZipCode()
{
	zip = document.getElementById("zipcode").value;
	self.location ="index.php?option=com_content&view=article&id=58&Itemid=56&zip="+zip;
}

Now whenever SelectSubCat() is called, you'll want to let the zip code value 'follow along' in the self redirect url you've got there on line 68.

Maybe something like:

self.location = "index.php?option=com_content&view=article&id=58&Itemid=56&zip="+zip+"&vc=new&v=" +v;

Good luck.