根据<a>点击</a>更改选择选项

Question

I've seen it done before, but basically what I'm trying to do is when a user clicks on an option "Missionary Farewell/Homecoming", it redirects them to a contact form with a dropdown menu where "Missionary Farewell/Homecoming" is already selected for them in the contact form, and do that for the various different <a> tags and different select options.

HTML Form I'm redirecting to

<form class="contactform" method="post" action="php/events.php">
  <input class="leftbox halfbox" name="contactname" placeholder="Contact's Name">
  <input class="rightbox halfbox" name="eventname" placeholder="Event Name">
  <input class="leftbox halfbox" name="contactphone" placeholder="Contact Phone">
  <input class="rightbox halfbox" name="contactemail" placeholder="Contact Email">
  <select class="fullbox stubborn" name="eventtype">
    <option>What type of event is it?</option>
    <option value="missionary">Missionary Farewell/Homecoming</option>
    <option value="highlight">Athletic/Dance Featurette</option>
    <option value="birthday">Birthday</option>
    <option value="funeral">Funeral</option>
    <option value="graduation">Graduation</option>
    <option value="anniversary">Anniversary</option>
    <option value="engagement">Engagement</option>
    <option value="other">Other</option>
  </select>
  <textarea class="fullbox" id="textarea" name="otheroption" placeholder="If other, please specify"></textarea>
  <input class="leftbox halfbox" name="eventloc" placeholder="Event Location">
  <input class="rightbox halfbox" name="eventtime" placeholder="Event Duration">
  <textarea class="fullbox" id="textarea" name="otherquestions" placeholder="Do you have any other questions/specifications?"></textarea>
  <input class="fullbox stubborn" id="submit" name="submit" type="submit" value="Submit">
</form>

Answer 1

Set the anchor's href to be a URL with a query string that carries the event type:

<a href="form-page.php?eventtype=missionary">...</a>

On the form page form-page.php a Javascript reads the URL, parses the query string for the eventtype parameter and sets the option menu accordingly.

In order to do that is better to give an id to the event dropdown, let's use eventtype :

<select class="fullbox stubborn" name="eventtype" id="eventtype">

Then at the end of the body before the closing tag </body> you put something like this:

<script>
    function getParameterByName(name)
    {
        var url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    ​document.getElementById('eventtype').value = getParameterByName('eventtype');​​​​​​​​​​
</script>

This approach is pure client-side (pure html) without php or any server side code to manage the page.

(Of course the same goal can be accomplished without Javascript server-side-building the form page with the option pre-selected)

Credits:

The function getParameterByName() comes from: How can I get query string values in JavaScript?

How to change the selected option by value using JavaScript is described here: HTML SELECT - Change selected option by VALUE using JavaScript