Solved

Submit html form using values from drop-down

Posted on 2014-12-03
9
296 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
 

Author Comment

by:JJ2357
ID: 40479288
TO be clear - there is no client-side scripting solution?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

911 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now