Solved

Submit html form using values from drop-down

Posted on 2014-12-03
9
288 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&currentPage=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&currentPage=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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to count occurrences of each item in an array.

705 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

18 Experts available now in Live!

Get 1:1 Help Now