Drop Down menu option selected based on URL paramater

Question

I have a website that I have very little control over.

The preset form has selected options I would like set different.

Example of the code is:

<form id="myForm" action="https://secure.domain.net/account/order" method="post">
<table><tbody><tr class="paperTR tr_class_paper"><td class="paperTD fiTitle fiItem">
<div>Paper</div>
<select id="paper" name="paper" onchange="EC_LithoCalc.updateForm()">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
</select>
</td></tr></tr></tbody></table>
</form>

I've tried many variants of the example: domain.com/page?paper=1

But nothing seems to work for me.

Everything I find is talking about javascript or jquery, but I don't have any knowledge of those. Though, I know that coding should start with a < tag and what I see just looks like what goes inside.

I'm so confused.

Can anyone out there help me?

I been on this all day and I would appreciate any help.

Thank you.

Answer 1

This is impossible (or nearly impossible) without using JavaScript code. Following is an example using jQuery (which is a JavaScript library):

Using jQuery, and new URL API, it can be done quite easily. You will have to include jQuery in your HTML. Here is a nice article about how to get it setup on your HTML.

So, to get the query parameter value, and then set it as a dropdown value, you can do something like this:

$(document).ready(function() {
  // Construct URL object using current browser URL
  var url = new URL(document.location);

  // Get query parameters object
  var params = url.searchParams;

  // Get value of paper
  var paper = params.get("paper");

  // Set it as the dropdown value
  $("#paper").val(paper);
});

So #paper matches the ID of the select element and then sets its selected value to what is received in the query parameter.

Related articles:

• jQuery selectors
• URL API

---

Update:

I see another library conflicting with jQuery as $ seems to be allocated to something else. To resolve this issue, you can try using jQuery's noconflict. The process to include jQuery in your HTML still remains the same. Just ensure that jQuery is loaded after the library which uses $ as its alias.

You only need to change the code like this:

// Relinquish control of `$` to previous library
jQuery.noConflict();

// Wrap jQuery code in IIFE
(function($) {
  $(document).ready(function() {
    // Construct URL object using current browser URL
    var url = new URL(document.location);

    // Get query parameters object
    var params = url.searchParams;

    // Get value of paper
    var paper = params.get("paper");

    // Set it as the dropdown value
    $("#paper").val(paper);
  });
})(jQuery);

The above simply wraps the previous code in an IIFE to prevent it from clashing with other libraries.

Answer 2

You're setting paper=1 as a query string parameter but that's not going to change the value of the select control. You'll need to extract the value of the query string parameter, and then set the select control accordingly.

For retrieving query string parameters in JavaScript, you can refer to the marked answer on this post How can I get query string values in JavaScript?

Once you have the value passed in the query string parameter, you can set the select control in JavaScript as follows:

document.getElementById('paper').value = paperValue;

Where paperValue is the variable holding the value passed to the page. Be sure to load/execute the function for setting the selected value when the document is ready.

Answer 3

You have given an extra </tr> which should be removed.

You need to submit that form using submit button. Your full code should be like this

<form id="myForm" action="https://secure.domain.net/account/order" method="post">
  <table>
   <tbody>
    <tr class="paperTR tr_class_paper">
     <td class="paperTD fiTitle fiItem">
      <div>Paper</div>
      <select id="paper" name="paper" onchange="EC_LithoCalc.updateForm()">
       <option value="1">Option1</option>
       <option value="2">Option2</option>
       <option value="3">Option3</option>
       <option value="4">Option4</option>
      </select>
     </td>
    </tr>
   </tbody>
  </table>
  <input type="submit" value="Submit">
</form>

Answer 4

If you aren't using any server language like ASP or PHP, the only way to make this work is either with Javascript or jQuery. It can be set to run after the page is fully loaded.

<script>
    if (document.readyState == 'complete') {
        var item = document.getElementById('paper').value;
        var items = document.getElementById('paper').options;
        for (var x = 0; x < items.length; x++) {
            if (items[x].value == item) {
                items[x].setAttribute('selected', true);
            }
        }
    } else {
        items[x].removeAttributes('selected');
    }
</script>

UPDATE 1:

It seems you really intended on just having a option selected by default, so just add the ´selected´ parameter in the desired option tag.

<option value="default" selected="selected">Default value</option>

If any other option tag had the same parameter, remove it from them.