Submit html form using values from drop-down

I need to create a form in html that will take the user to a URL containing values selected within the form.  While I understand how to do this using basic form submit action, I don't know how to do it when the url contains a custom name-value pair schema.  I am requesting the form be completed in html with supporting js, if necessary.

The form will resemble:

<form action="http://www.mystore.com/page.html#c%5B%5D=e%3A1119//i+FIRST_NAME//%3Aeq//value1&c%5B%5D=e%3A1119//i+SECOND_NAME//%3Aeq//value2¤tPage=1&NAME1AGAIN%5B%5D=value1&NAME2AGAIN%5B%5D=value2" method="get">
  First Name:
<select name="value1">
  <option value="a">aaa</option>
  <option value="b">bbb</option>
  <option value="c">ccc</option>
</select>
<br>
  Second Name:
<select name="value2">
  <option value="a">aaa</option>
  <option value="b">bbb</option>
  <option value="c">ccc</option>
</select>
<br>
  <input type="submit" value="Submit">
</form>

Suppose that a user selects "aaa" from the first drop-down and "bbb" from the second.  Then, after clicking submit, she would be taken to:

http://www.mystore.com/page.html#c%5B%5D=e%3A1119//i+FIRST_NAME//%3Aeq//aaa&c%5B%5D=e%3A1119//i+SECOND_NAME//%3Aeq//bbb¤tPage=1&NAME1AGAIN%5B%5D=aaa&NAME2AGAIN%5B%5D=bbb

I'd like this to be as light-weight as possible.  Many thanks in advance.
JJ2357Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gplanaCommented:
<form action="http://www.mystore.com/page.html" method="get">
  First Name:
<select name="value1">
  <option value="a">aaa</option>
  <option value="b">bbb</option>
  <option value="c">ccc</option>
</select>
<br>
  Second Name:
<select name="value2">
  <option value="a">aaa</option>
  <option value="b">bbb</option>
  <option value="c">ccc</option>
</select>
<br>
  <input type="submit" value="Submit">
</form>

Open in new window

Ir you press submit button after selecting aaa for first name, and bbb for second name, you will be redirected to this URL:
http://www.mystore.com/page.html?value1=aaa&value2=bbb

This is because you are using GET method, so every item on the form is added as a GET parameter in the URL.

Hope it helps. Regards
0
JJ2357Author Commented:
Thanks - is there a way to fetch those values and insert them into the referenced locations upon submitting?
0
gplanaCommented:
Yes, but not in HTML. It can be accomplished by some server-side scripting, such as PHP or ASP.

For example, in php you can get the value of first param just by accessing GET['value1'] variable.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

JJ2357Author Commented:
TO be clear - there is no client-side scripting solution?
0
gplanaCommented:
Yes, you can also get the GET parameters from Javascript. This is accomplished accessing to window.location.

This function parse URL to get the GET parameters and return them

function parseSecond(val) {
    var result = "Not found",
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === val) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

Open in new window

0
gplanaCommented:
Also, if you prefer to have an array with every GET parameter, then use this:

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

Open in new window

0
Walter PadrónCommented:
Yes, there is a solution on client side for instance using jQuery and the javascript submit event

html code,
<form id="myform">
</form>

<select name="value1">
  <option value="a">aaa</option>
  <option value="b">bbb</option>
  <option value="c">ccc</option>
</select>

Open in new window


javascript code
jQuery(document).ready( function() {

  $('#myform').submit( function() {
        // Conform url here...
        var url = '?name1=' + $("name1").val();

         $('#myform').attr('action', 'https://example.com/page.html' + url);
  });
});

Open in new window


Best regards
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gplanaCommented:
Walter, I think what JJ2357 is asking is about how to get the values sent from the form on the new page, by using Javascript. What your solution does is sending the form, which can be done just in HTML as I explained before.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.