如何链接到表单中的“选择”选项

Question

I have pricing packages for my website.

This is how I want the enquiry of my packages to work:

1. I want the user to click on the 'Enquire' button on my packages page eg The bronze package:

<div class="card mb-4 box-shadow">
          <div class="card-header">
            <h3 class="my-0 font-weight-normal">Single-Page Website 🥉</h3>
          </div>
          <div class="card-body">
            <h4 class="card-title pricing-card-title">£250 <small class="text-muted">/ once off</small></h4>
            <ul class="list-unstyled mt-3 mb-4">
              <li><b>Fully responsive on mobile and tablet devices</b></li>
              <br>
              <li><b>Page speed optimisation (2-4 seconds load time)</b></li>
              <br>
              <li><b>Uploaded to the internet (fees do not apply)</b></li>
              <br>
              <li><b>On-page SEO provided (Google ranking)</b></li>
            </ul>
            <a class="book-a-call-link" href="/contact.php"><button type="button" class="btn btn-lg btn-block book-a-call-secondary"><b>Book a Call</b></button></a>
          </div>
        </div>

2. Once the user has clicked on the button. I want them to be taken to my form on my contact page. Except, I want the link they clicked on to activate a certain select option by default.

Eg If someone clicks on the 'Enquire' button for the bronze package. I want them to be taken to /contact.php with the 'Bronze Package' option already selected for them.

For context here is a small part of the form:

<div class="form-group">
        <select class="form-control" id="exampleFormControlSelect1">
          <option>General Enquiry</option>
          <option id="bronze">Bronze Package</option>
          <option>Silver Package</option>
          <option>Gold Package</option>
        </select>
      </div>

Notice that the 'Bronze Package' option has an id of 'bronze'. I attempted to link to it with /contact.php/#bronze. This would work for other elements. However, not with the select option.

My three questions are:

1. Can I somehow get this feature to work with the select option?
2. If not, will I need JavaScript to do this?
3. Wherever I can use HTML or JavaScript, how do I get this process to work the way I want it to?

Answer 1

I don't see any buttons in the first chunk of code, but it sounds like you want associate an event handler with that button. When the event is triggered, you want the user to be redirected to your contact page by setting window.location.href to the url of your contact page. Your contact page, in turn, should accept a query string to select a particular option. For example, &package=bronze. You want to update your contact page so the select has a name of package, and update the option has a value. You can, of course, also do this with JavaScript and use the form as is.

Answer 2

It looks like you are trying to use a "Destination Anchor" (which is intended for deeplink to specific parts of a destination webpage) to avoid having to implement a pre-selected form. You will need to use javascript or modify your php in order to do this.

For either solution, you should modify your links to add a url parameter identifying which package the user selected - eg /contact.php?tier=bronze

In php, you would check the url parameters in $_GET for the variable, and then output a slightly different html page (with the preselected option as the default value). Use <option selected="selected"> on the proper

In javascript, you could do something similar - here is a way to check for url parameters in javascript , which you could then add conditional logic to add the selected="selected" parameter to the proper <option>

Finally, I'd like to get a royalty from each of the payment options you are offering as compensation for my assistance. Thanks in advance.

Answer 3

If select is static then use <option id="bronze" selected>Bronze Package</option>

<select class="form-control" id="exampleFormControlSelect1">
      <option>General Enquiry</option>
      <option id="bronze" selected>Bronze Package</option>
      <option>Silver Package</option>
      <option>Gold Package</option>
    </select>