Text box value gets automatically cleared on dropdown change event.

Question

khadrani_arif 0 Newbie Poster

14 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

php

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

2 Contributors
1 Reply
750 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by CJesusSaves

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.