How do I restrict the Onchange Event on a Form

ranhell
ranhell used Ask the Experts™
on
OK, Hopefully somebody already knows how to do it.

I have the following Form within a table where I have 4 Dropdown menus for filtering the results of a DB
Now I'm using the Onchange event for submitting the form
So my problem is that when I submit the form all 4 Dropdown menus are submited eventhough only one changed.
What I'm looking for is to just submit the one that changed is posible ...?
Or maybe a diferent approach could be useful too, All I'm trying to do is have 4 filters to search in a friendly layout.

<form name="filters" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST">
  <table width="800" border="1">
      <tr>
        <td>Ubicacion  :</td>
        <td>Tipo Propiedad :</td>
        <td>Venta /  Renta:</td>
        <td>Precio :</td>
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td><select name="ubicacion_id" onchange="document.filters.submit();">
          <?php foreach($ubicacion as $ubica): ?>
          <?php echo "<option value=\"{$ubica->id}\">{$ubica->description}</option>"; ?>
          <?php endforeach; ?>
        </select></td>
        <td><select name="tipo_id" onchange="document.filters.submit();">
          <?php foreach($tipo as $tp): ?>
          <?php echo "<option value=\"{$tp->id}\">{$tp->description}</option>"; ?>
          <?php endforeach; ?>
        </select></td>
        <td><select name="tipovr_id" onchange="document.filters.submit();">
          <?php foreach($tipoventa as $tpvr): ?>
          <?php echo "<option value=\"{$tpvr->id}\">{$tpvr->description}</option>"; ?>
          <?php endforeach; ?>
        </select></td>
        <td><select name="precio" onchange="document.filters.submit();">
          <?php foreach($precio as $pre): ?>
          <?php echo "<option value=\"{$pre->id}\">{$pre->description}</option>"; ?>
          <?php endforeach; ?>
        </select></td>
      </tr>
    </table>
</form>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
Hello ranhell,

You may create four "form", one by dropdown and not a form for four dropdown

Regards.
leakim971Multitechnician
Top Expert 2014

Commented:
Something like :
<table width="800" border="1">
      <tr>
        <td>Ubicacion  :</td>
        <td>Tipo Propiedad :</td>
        <td>Venta /  Renta:</td>
        <td>Precio :</td>
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td><form name="filters" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="ubicacion_id" onchange="document.filters.submit();">
          <?php foreach($ubicacion as $ubica): ?>
          <?php echo "<option value=\"{$ubica->id}\">{$ubica->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
        <td><form name="filters" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="tipo_id" onchange="document.filters.submit();">
          <?php foreach($tipo as $tp): ?>
          <?php echo "<option value=\"{$tp->id}\">{$tp->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
        <td><form name="filters" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="tipovr_id" onchange="document.filters.submit();">
          <?php foreach($tipoventa as $tpvr): ?>
          <?php echo "<option value=\"{$tpvr->id}\">{$tpvr->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
        <td><form name="filters" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="precio" onchange="document.filters.submit();">
          <?php foreach($precio as $pre): ?>
          <?php echo "<option value=\"{$pre->id}\">{$pre->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
      </tr>
    </table>

Open in new window

Author

Commented:
I tried your suggested solution but the form does not submit, it does not reload the page...!!
What could be wrong....?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

Commented:
form have same name...

Try :
<table width="800" border="1">
      <tr>
        <td>Ubicacion  :</td>
        <td>Tipo Propiedad :</td>
        <td>Venta /  Renta:</td>
        <td>Precio :</td>
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td><form name="filters1" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="ubicacion_id" onchange="document.filters1.submit();">
          <?php foreach($ubicacion as $ubica): ?>
          <?php echo "<option value=\"{$ubica->id}\">{$ubica->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
        <td><form name="filters4" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="tipo_id" onchange="document.filters4.submit();">
          <?php foreach($tipo as $tp): ?>
          <?php echo "<option value=\"{$tp->id}\">{$tp->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
        <td><form name="filters2" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="tipovr_id" onchange="document.filters2.submit();">
          <?php foreach($tipoventa as $tpvr): ?>
          <?php echo "<option value=\"{$tpvr->id}\">{$tpvr->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
        <td><form name="filters3" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"><select name="precio" onchange="document.filters3.submit();">
          <?php foreach($precio as $pre): ?>
          <?php echo "<option value=\"{$pre->id}\">{$pre->description}</option>"; ?>
          <?php endforeach; ?>
        </select></form></td>
      </tr>
    </table>

Open in new window

Author

Commented:
I didn't work either, I change the names of the forms, but still won't submit any of them....!!
I have exaclty the same code you just posted with the form names changed....

Any other ideas.....??

Author

Commented:
sorry , copy paste error, I got it working now....
I'll just do some testing before I grant the points..

Thanks for your help
leakim971Multitechnician
Top Expert 2014

Commented:
No worries, I just finished to test it ^__^

So, just for fun :
<html>
<head></head>
<body>
<table width="800" border="1">
<tr><td>Ubicacion  :</td><td>Tipo Propiedad :</td><td>Venta /  Renta:</td><td>Precio :</td><td rowspan="2"></td></tr>
<tr>
	<td><form name="filters1" action="http://www.altavista.com"  method="POST">
    	<select name="ubicacion_id" onchange="document.filters1.submit();">
			<option value="val1">val1</option>
			<option value="val1">val2</option>
        </select></form>
	</td>
	<td><form name="filters4" action="http://www.live.com"  method="POST">
    	<select name="tipo_id" onchange="document.filters4.submit();">
			<option value="val1">val1</option>
            <option value="val1">val2</option>
		</select></form>
	</td>
	<td><form name="filters2" action="www.yahoo.com"  method="POST">
		<select name="tipovr_id" onchange="document.filters2.submit();">
        	<option value="val1">val1</option>
			<option value="val1">val2</option>
		</select></form></td>
	<td><form name="filters3" action="http://www.google.com"  method="POST">
    	<select name="precio" onchange="document.filters3.submit();">
			<option value="val1">val1</option>
			<option value="val1">val2</option>
		</select></form></td>
	</tr>
</table>
</body>
</html>

Open in new window

Author

Commented:
If is not too much to ask, I do I get the form to change when the first value is selected....
I mean for example as your code
                        <option value="val1">val1</option>
                        <option value="val1">val2</option>
When the Dropdown menu appears the first value is already displaying, so when I change to the second value it works, but not when first value.....
hopefully you'll get what I mean.....?


Multitechnician
Top Expert 2014
Commented:
Use :

<option value=""></option>
<option value="val1">val1</option>
<option value="val1">val2</option>
leakim971Multitechnician
Top Expert 2014

Commented:
If needed :

<select name="tipovr_id" onchange="if(this.selectedIndex>0) document.filters2.submit();">

Author

Commented:
Well I was hoping you would suggest
<option value=""></option>
<option value="val1">val1</option>
<option value="val1">val2</option>

Now I use the other solution and it partually works, only the first time

But anywas, I guess leaving the firts option blank  is the best approach ritght...?
I just want to thank you one more time for your help

Author

Commented:
thanks
leakim971Multitechnician
Top Expert 2014

Commented:
You're welcome! Thanks for the points!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial