0

I have searched and searched for the answer, but I have had no luck whatsoever.

I have a form with four Selects and only the first Select is required. These Selects have the Options populated by a JS script pulling from my database to make a dynamic dependent drop down menu. The problem is I don't want "unselected" Selects to pass their parameter to the URL and make the query string long and complicated. Plus, when the "unselected" Selects pass the default value it is something like "Select Group" which shows in the URL as "Select+Group". I definitely want to use GET so I can copy/save links. How can I add the Select value(s) conditionally and not prevent the JS script from populating the options?

For example, here is a typical URL right now:

mydomain.com/bn/products?Division=1&Group=Select+Group&Segment=Select+Segment&Category=Select+Category

Here is what I want that URL to be for use with my .htaccess & RewriteRule:

mydomain.com/bn/products/1

Because Group, Segment and Category are not selected, their value pairs are making an unnecessary mess of the URL.

Any suggestions would be appreciated.

MORE INFO

I'm new to posting here and I don't understand where to add lengthy follow-ups. Here goes:

I like the idea of intercepting and generating via JS a new URL based on selections made. One problem I'm having is the way the URL is created by the form:

mydomain.com/bn/products?Division=1

A little background might be helpful. I'm using a content variable to retrieve page content from the database. All content except the site home page is displayed in the content directory (/bn). What is happening in the link above is that the content variable is already set (products), but the form is placing ? after the content variable. Here is a simple RewriteRule that would work if the URL were written correctly:

RewriteRule ^bn/products/([0-9-]+)$ /bn/index.php?content=products&Division=$1

I can access my selection using the following URL: mydomain.com/bn/products/1 because it conforms to the rewrite rule. Likewise I can get there using the traditional: mydomain.com/bn/index.php?content=products&Division=$1.

Now I must confess that I am a PHP guy with very limited JS and jQuery experience. Shomz suggests onsubmit="my_submit_function(); return false;" in my_submit_function I could check for the value of the select var divValue = $('#Division').val() and append it to a URL. What I don't know is how I send the generated URL. Obviously I want the URL to be in the "friendly" form mydomain.com/bn/products/1. Could someone offer insight there?

Many thanks.

UPDATE

I have created a function to replace the URL created by the form with one generated by my JS conditions. First, here is the form top:

<form action="" onsubmit="my_submit_function()" method="get" name="DDm" id="DDm">

Then one of my Selects:

<select id="Division" name="Division" onchange="Division_reload(this)">
  <option selected><?php echo $division; ?></option>
</select>

The Dynamic Dropdown Menu script has added the onchange element, could this be contributing to my problem?

My function:

function my_submit_function() {
  var DDmURL = $reqURL;
  var divVal = document.getElementById('Division').value;
  var grpVal = document.getElementById('Group').value;
  var segVal = document.getElementById('Segment').value;
  var catVal = document.getElementById('Category').value;

  if ((divVal != $division) || (divVal != -1)) {
      DDmURL += '/'+divVal; }
  if ((grpVal != $group) || (grpVal != -1)) {
      DDmURL += '/'+grpVal; }
  if ((segVal != $segment) || (segVal != -1)) {
      DDmURL += '/'+segVal; }
  if ((catVal != $category) || (catVal != -1)) {
      DDmURL += '/'+catVal; }
window.location = DDmURL;
};

I should mention that the PHP variables ($division, etc.) are default values like "Select Division". I should also mention that I omitted showing the php open and close tags to simplify the JS code above. The tags are there, just not shown.

When I use the dropdown to select from Division I still get the same URL as before:

mydomain.com/bn/products?Division=1

Any ideas why this is not working as expected?

RESOLVED

As stated in my comment to Shomz, I had not enclosed my PHP variables in quotes and that was causing problems and resulting in error messages in the console. Once I changed that, all works as expected.

Thanks to everyone for their help.

3
  • You could do a javascript pre-submit function and if the value isn't enabled, remove the name attribute. api.jquery.com/removeAttr
    – teynon
    Jun 17, 2013 at 22:44
  • I think it is common practice to set the value of the first option to "" in case it is just a descriptive option.
    – RST
    Jun 17, 2013 at 22:51
  • This is generated by the JS script and I don't have control over that.
    – banacan
    Jun 18, 2013 at 16:59

2 Answers 2

0

To remove those "Select+Group" from appearing, just assign those options a value of zero or whatever suits you. (but you won't even need that after you do the following paragraph)

To completely prevent those from sending, you can create an onsubmit function that will override the form submit functionality and will first generate a new URL based only on selected options and only then it will redirect. You can also remove the unselected elements from the DOM completely and submit the form afterwards. Whichever you choose, the HTML part should look something like this: <form method="GET" action="your_url" onsubmit="my_submit_function(); return false;">

UPDATE

Based on the additional info you provided, I can say you can build as friendly URLs as you want, you're not restricted by any means. You can use if or switch statements just like in PHP. For example:

var url = siteRoot;

if (divValue == "someUglyProductsValue")
   url += '/products';
else if (divValue == "someUglyOtherValue")
   url += '/other';

if (groupValue == "someUglyWhateverValue")
   url += '/whatever';

etc... This will be able to give you something like mydomain.com/bn/products/whatever or mydomain.com/bn/other or mydomain.com/bn/other/whatever...

After you build the whole URL the way you want, you can do something as simple as window.location = url; to redirect your browser.

14
  • Thanks for your reply, see added info in my original post.
    – banacan
    Jun 18, 2013 at 17:02
  • You're welcome, I've updated my answer. I think the only problem was that you were trying to append the URL instead of building it from scratch, right?
    – Shomz
    Jun 18, 2013 at 18:07
  • Yes, and the appended URL was not conforming to a pattern that my rewrite rule could use.
    – banacan
    Jun 18, 2013 at 18:17
  • To be clear, I'm going to create a function with conditionals inside to append to my base URL. At the end of the function after building the qualified parts, I will issue window.location = url; to send the browser to the generated URL, right? So does onsubmit take over from submit in the form? Also, what should the action be, blank?
    – banacan
    Jun 18, 2013 at 18:22
  • That's right. The function won't take anything from the form, in fact, you might not even need the form element; it will just strip the data from the selected values, build the URL and redirect the browser.
    – Shomz
    Jun 18, 2013 at 18:24
0

Would be easier if you shared some of your code.

My idea would be to generate the target url dynamically while changing the form. So that if one of your unwanted selects are deselected, their part of the url is also removed.

Then, on the target PHP page, you'd check with isset($_GET['something']) to see whether these elements are checked or not.

1
  • I added more info to my original post since I can't add details in these answers. Thanks for your suggestion.
    – banacan
    Jun 18, 2013 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.