Form querystring manipulation.

[AnonG]

Hi all,

I'm trying to create a simple navigation script. It allows you to select a region. Once region is selected another list opens up and you can select a city within that region. It all works fine, you can change cities freely and url updates correctly. BUT if you have a city selected and want to re-select the region, the city id stays in the url which messes up my page.

Some examples:
http://192.168.2.16/Seznam.php?IdR=1
http://192.168.2.16/Seznam.php?IdR=1&IdM=101
These two are correct urls, region 1 and city 1 in region 1.

If you now change the region you will get this.
http://192.168.2.16/Seznam.php?IdR=4&IdM=101
Which means region 4 and city 1 in region 1. It should set IdM (city id) to 0 or remove it completely.

Any ideas?

Here's the code I'm using.

   <form method="get" action="Seznam.php" id="Spremeni">
   <fieldset>
   <select class="Polje" name="IdR" onchange="if(this.options[this.selectedIndex].value != -1){ forms['Spremeni'].submit() }">
   <option value="0">Izberi Regijo</option>
   <?PHP
 
   $Regija = Zavaruj($_GET['IdR']);
   $Mesto = Zavaruj($_GET['IdM']);
   // $Mesto_2 = substr($Mesto,0,1);
 
   $Poizvedba_Regije = mysql_query("SELECT * FROM Regije ORDER BY Id");
 
   while ($Izpis_Regij = mysql_fetch_assoc($Poizvedba_Regije))
   {
      ?>
      <option value="<?PHP echo $Izpis_Regij['Id'] ?>" <?PHP if ($Regija == $Izpis_Regij['Id']) echo "selected=\"selected\""; ?>><?PHP echo $Izpis_Regij['Ime'] ?></option>
      <?PHP
   }
 
   ?>
   </select>
   <?PHP
 
   if (!$Regija)
   {
      echo "</fieldset></form>";
   }
 
   if ($Regija)
   {
      ?>
      <select class="Polje" name="IdM" onchange="if(this.options[this.selectedIndex].value != -1){ forms['Spremeni'].submit() }">
      <option value="0">Izberi Mesto</option>
      <?PHP
 
      $Poizvedba_Mesta = mysql_query("SELECT * FROM Mesta WHERE Id_Regije = '$Regija' ORDER BY Id");
 
      while ($Izpis_Mest = mysql_fetch_assoc($Poizvedba_Mesta))
      {
         ?>
         <option value="<?PHP echo $Izpis_Mest['Id'] ?>" <?PHP if ($Mesto == $Izpis_Mest['Id']) echo "selected=\"selected\""; ?>><?PHP echo $Izpis_Mest['Ime'] ?></option>
         <?PHP
      }
 
      ?>
      </select>
      </fieldset>
      </form>
      <?PHP
   }
 

[Dormilich]

before you submit the form from the first select, simply reset the value of the second select.

you could improve your code further by using AJAX, so that you don’t need to reload the page each time.

[AnonG]

If I add a hidden input with name IdM then I get this: IdR=1&IdM=0&IdM=whatever it was before.

I think I don't understand exactly what you mean.

About ajax, I need to refresh page each time because that way all links get new paths. Sort of like categories / subcategories on a webstore page.

[Dormilich]

@AnonG
a hidden field is completely useless.

@AnonG
well, I kind of understand that…

ok, first you need to understand, how your form works. you have 2 form fields (2x <select> (I’ll refer to it as S1 and S2))
if you call form.submit() (either in S1 or S2) the browser checks every form field and makes a name-value pair for each and transforms that into an URL (in your case).

now the idea is that when you call submit() from S1, before you actually call it, you need to reset the current name-value pair of S2 (i.e. only the value, because the name is not changed)

expressed as pseudo code:

S1:
S2.value = default;
form.submit();
 
S2:
form.submit();

@AnonG
not a problem for AJAX, merely a matter of you JS skills.

[AnonG]

I have no knowledge of JS. I've been googling for hours now and I didn't find anything useful.

Am I going into the right direction?

<script type="Javascript">
function reset()
{
document.forms["Spremeni"].elements["IdM"].selectedIndex = 0;
}
</script>
 

I have tried adding this reset() to select fields and to option fields.. nothing worked.

[Dormilich]

I thought of

document.forms.IdM.value = 0;

[AnonG]

Were should I put that? I've tried adding it into select onchange"" but then I can't change region. Nothing happens when I click it.

[Dormilich]

@AnonG
there should nothing visible happen. does the URL be right now?

[AnonG]

I mean, I created a function with what you wrote in it.

<script type="Javascript">
function reset()
{
document.forms.IdM.value = 0;
}
</script>
 

And then I included it into this.

 <select class="Polje" name="IdR" onchange="if(this.options[this.selectedIndex].value != -1){ reset() forms['Spremeni'].submit() }">
 

If I add it like that nothing happens when I change regions in the first select form.

[Dormilich]

can you give me a link to the page, so that i can see for myself?

[Dormilich]

the interesting point is that it works every second time...

[AnonG]

Yep. Been like that since day one. I kinda need to get it to work every time not every second, hehe. But my lack of JS skills doesn't help at all. :)