CODEWITHSUNDEEP
javascriptphponchange
Guillaume
Guillaume

Reputation: 352

Several forms with OnChange event

I have a drop-down list and an input field. I would like the URL to change as soon as the drop-down list is modified.

<?php $s = $_GET["s"]; $q = $_GET["q"]; ?>
<form method="get" action="" name="formulaire" >
   <input type="text" name="q" value="<?php echo $q; ?>" />
   <select name="s" onchange="if (this.value) window.location.href=this.value">
   <option <?php if ( $s == 'opt1' ) { echo 'value="opt1" selected="selected" >opt1 '; } else { echo 'value="opt1" >opt1 '; } ?></option>
   <option <?php if ( $s == 'opt2' ) { echo 'value="opt2" selected="selected" >opt2 '; } else { echo 'value="opt2" >opt2 '; } ?></option>
   <option <?php if ( $s == 'opt3' ) { echo 'value="opt3" selected="selected" >opt3 '; } else { echo 'value="opt3" >opt3 '; } ?></option>
   </select>
</form>

As it is now, it runs only if the input field is filled before the list. I tried to replace value="opt1" by value="?s=opt1". But when the input field is filled, the URL is like this ?q=test&s=%3Fs%3Dopt1.

Here are the URL I'm expecting :

If only the text area is filled : ?q=text

If only the drop-down list is selected : ?s=opt1

If the input field and the drop-down list are both filled/selected : ?q=texte&s=opt1

Here is an example : http://arkhana.fr/tempstack/menudyn.php

Upvotes: 0

Views: 164

Answers (1)

yezzz
yezzz

Reputation: 3020

Try this. Use select onchange="loadUrl()". Assumes option value="opt1" like above... without "?=" etc that I see ATM on your sample page.

Put following script on the page:

function loadUrl() {
  var params = [];
  var inpVal = document.getElementsByName("q")[0].value;
  if (inpVal.length) params.push("q="+inpVal);
  var selVal = document.getElementsByName("s")[0].value;
  if (selVal.length) params.push("s="+selVal);

  window.location.search = params.join("&");
 }

Upvotes: 1

Related Questions