Change select option based on clicked

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>

Set the anchor's `href` to be a URL with a query string `?eventtype=missionary`, then test the query string in the new page - I'd probably do that server-side (PHP, in your case). In a general sense any given anchor could then specify as many or few default settings as required. — nnnnnn, Oct 06 '16 at 02:57
nnnnnn, your idea was my original thought. I tried just what you told me but it didn't quite do anything yet. What do you mean by server-side? — B Johnson, Oct 06 '16 at 03:14
You're using PHP, right? Any PHP code that you write executes on your web server and the result gets sent to the browser. Any JavaScript code that you write executes within the browser. — nnnnnn, Oct 06 '16 at 03:24

score 1 · Accepted Answer · edited May 23 '17 at 12:01

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

Change select option based on clicked

1 Answers1