HTML form - changing the select state from a link

Question

I have been surfing round for an answer to this for most of my morning and I must be not using the right search terms because I cant find anything close to what im after.

It could be something possibly easy or might need some JS, i'm not sure as I have never had to do this in a project.

Basically I have some staff profiles, each profile has a link to the contact page.

<a href="contact_form">Contact Steve</a>

On "contact_form" there will be a select setup with the staff names, what I want to know is there a way I can pass information through the url to change the select state to show the correct name in the select state automatically.

<select name="Recipient">
        <option selected="selected" value="reception">Reception</option>
        <option value="steve">Steve</option>
        <option value="bob">Bob</option>
        <option value="john">John</option>
</select>

So in this case when the user clicks on "Contact Steve" when they get to the form that "Steve" is selected rather than "Reception" which is selected by default.

Thanks

Can you clarify if the link goes to another page, or a contact form on the same page? — K Groll, Nov 01 '12 at 22:52
Yes sorry the profiles are on a different page, im trying to figure out how to pass something through the url to change the select state on a form on a different page, im just looking at some of the responses — webmonkey237, Nov 01 '12 at 23:01
You shouldn't have to use Javascript at all, and doing so is a needless dependency. You don't say how the staff profile page gets built, but I assume it's essentially a template where the staff info like the name "Steve" gets substituted. You can also set a query param in the link at the same time, for example `Contact ${first_name}` (or whatever the syntax is for *your* server-side technology) — Stephen P, Nov 02 '12 at 00:40

score 2 · Accepted Answer · edited May 23 '17 at 12:03

Using the getQueryString function from this answer. You could do the following:

function getQueryString() {
  var result = {}, queryString = location.search.substring(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

window.addEventListener("load", function() {
    document.getElementById('contact-list').value = getQueryString()['contact'];
});

Note that you must set the ID of the select element like:

<select name="Recipient" id="contact-list">

Now, you can specify what contact to be selected using the URL:

contact_form.html?contact=steve

score 0 · Answer 2 · answered Nov 01 '12 at 22:47

0

using jquery:

<a data-id="steve" href="#contact_form">Contact Steve</a>

...

$("a").click(function() {
   $("select[name=Recipient]").val($(this).data("id"))
})

answered Nov 01 '12 at 22:47

Jirka Kopřiva

2,939
25
28

score 0 · Answer 3 · answered Nov 01 '12 at 22:48

When you redirect to contact form, provide some GET parameter like: ?rep=steve

// EDIT: OR if a click is done in contact form already, then use solution provided before mine // EDIT

On a contact form, use javascript:

var $_GET = [];
var get_arr = document.location.search.replace('?','').split('&');

for(var prm in get_arr){
dbl = get_arr[prm].split('=');
$_GET[dbl[0]] = dbl[1];
};

And then using a jQuery for example do:

$(function() {
if ( typeof($_GET['rep']) != 'undefined' ) {
$('select[name="Recipient"] option:eq("'+$_GET['rep']+'")').attr("selected","selected");
};
});

Might contain some syntax errors, unchecked.

HTML form - changing the select state from a link

3 Answers3