Solved

Submit html form using values from drop-down

Posted on 2014-12-03
9
318 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
[X]
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
  • 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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 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

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

734 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