Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Submit html form using values from drop-down

Posted on 2014-12-03
9
305 Views
Last Modified: 2014-12-03
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.
0
Comment
Question by:JJ2357
  • 5
  • 2
9 Comments
 
LVL 15

Expert Comment

by:gplana
ID: 40479055
<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
 

Author Comment

by:JJ2357
ID: 40479072
Thanks - is there a way to fetch those values and insert them into the referenced locations upon submitting?
0
 
LVL 15

Expert Comment

by:gplana
ID: 40479098
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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

Author Comment

by:JJ2357
ID: 40479288
TO be clear - there is no client-side scripting solution?
0
 
LVL 15

Assisted Solution

by:gplana
gplana earned 333 total points
ID: 40479331
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
 
LVL 15

Assisted Solution

by:gplana
gplana earned 333 total points
ID: 40479333
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
 
LVL 10

Accepted Solution

by:
Walter Padrón earned 167 total points
ID: 40479537
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
 
LVL 15

Expert Comment

by:gplana
ID: 40479648
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to dynamically set the form action using jQuery.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question