How do I create a link to pre-select a form option

Question

I have the following code on another webpage on my site with a form (say on page index.html): JSFiddle

<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm()">

i.e a dropdown form.

I want to have a link on another webpage that will go to this page, and have the "Sales" option already selected.

<option value="1">
    Sales
</option>

from the drop down menu (instead of the current default option), how do I create this?

score 1 · Answer 1 · answered Jun 06 '17 at 10:57

1

Query parameters can be used to achieve the result you want, but you will need to parse the query parameter manually on your current page, since there is no standard JavaScript method for doing it.

You can write the following code on your page to automatically select the option:

$(document).ready(function() {
  // Parse your query parameters here, and assign them to a variable named `queryParams`
  var option = queryParams.type;
  $("#dropdown").val(option);
});

Now you can create an anchor with the URL of this page, e.g. http://yourpage.url?type=1, which will redirect to this page, and will automatically change the value of your dropdown accordingly.

answered Jun 06 '17 at 10:57

31piy

21,164
6
40
57

you can parse the querystring like this: https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript and maybe you have to trigger change event for additional functions-> $("#dropdown").trigger("change"); – Mic Jun 06 '17 at 11:01
Could you provide a JSFiddle for this please :) – Steve Jobs Jun 06 '17 at 11:03
@SteveJobs - I've included my JavaScript in [this fiddle](https://jsfiddle.net/fmktg2dp/1/). – 31piy Jun 07 '17 at 05:30

score 0 · Answer 2 · answered Jun 06 '17 at 11:00

You must add some kind of router functionality with Javascript in your site.

I think the simplest thing you could do it to have a script in that page that checks the url if it has say a #bar hash like so: http://yoursite.com/foo.html#bar.

<script>
// make sure you run this on DOM ready like in $.ready() in jQuery or in a script just before closing the body tag

if(window.location.hash === 'bar') {
  // add the selected attribute to the <option> you want
}
</script>

prasanth · Answer 3 · 2017-06-06T11:13:43.340

Try with append() function of jquery .and pass this with in onchange function call .And also added with document.ready for create the link on document load with selected value

function showForm(that){
var s = $(that).children('option:selected').text()
$('#link_box').append('<a href="'+s+'">'+s+'</a></br>')
}
$(document).ready(function(){ // for window load
showForm($('select'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
  <label class="control-label" for="dropdown">
       What can we help you with?
       
      </label>
  <select class="select form-control" id="dropdown" name="dropdown" onchange="showForm(this)">
       <option value="0" disabled>
   Select an option
       </option>
       <option value="1" selected>
     Sales
       </option>
       <option value="2">
     Complaints
       </option>
       <option value="3">
     Queries
       </option>
       <option value="4">
     Ideas
       </option>
      </select>
</div>
<div id="link_box">
<!-- its a link append  box-->
</div>

How do I create a link to pre-select a form option

3 Answers3