CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Infusion77
Infusion77

Reputation: 23

Changing form select field with a link clicked on a different page

I have a services page that links to an appointment page with a form and I would like the service selected to change in the dropdown to the correct service chosen.

The only solution to a similar question I could find was this answer below. However it does not appear to work when the form is on a separate page. When I copied the form onto the same page and use an anchor to the bottom of the page it will change the field however when using the link to the other page it does not. I am assuming this is due to the fact that it is on another page however I cannot locate much in regards to this situation.

I have included copies from my code of this, I believe I have included the relevant snippets from each section.

Change dropdown option with jQuery/Javascript on link click

Declaring Scripts On Both Pages Head:

<script src="Scripts/jquery-1.11.1.js"> </script>
<script src="Scripts/jquery-ui-1.11.0.custom/jquery-ui.js"></script>     
<script src="myscript.js"></script>

Code From HTML Link on Service Page:

<a href="BookAppointment.html" data-select="Bronze">

Code From JS:

var $select = $('#package');
$('a[href="BookAppointment.html"]').click(function () {
    $select.val( $(this).data('select') );
});

Code From Appointment Form (More Options Not listed):

<select name="package" id="package" >         
    <option value="Exterior Wash">Exterior Wash</option>
    <option value="Bronze">Bronze</option>
    <!-- more options -->
</select>

Thanks in advance for any help with this.

Upvotes: 2

Views: 1721

Answers (1)

tmarwen
tmarwen

Reputation: 16394

Actually your code work if you embed all elements in the same page, especially the <select> element, because your JS code is executed within the page scope. Thus you are able to change the select value when you hit the a href element.

In order to have your data-select value availble in the BookAppointment.html page, its value should be frowarded to that page. So to sum up, when you hit the a href element from services.html page, the data-select value is processed via JavaScript and encapsulated as a query parameter then redirected to BookAppointment.html page.

  • Now let's assume your services.html page is as follows (Note the new service-script.js):
<head>
  <script src="Scripts/jquery-1.11.1.js"> </script>
  <script src="Scripts/jquery-ui-1.11.0.custom/jquery-ui.js"></script>     
  <script src="service-script.js"></script> 
</head>
<body>
  <a href="BookAppointment.html" data-select="Bronze">
</body>
  • Inside the service-script.js file you will be catching user click event on the a href and then retrieving the data-select value (just as you were doing before). New part is to introduce that value in the html reference you will be redirecting to:
$(document).ready(function() {
  $('a[href="BookAppointment.html"]').click(function (e) {
    e.preventDefault();
    var data =  $(this).data('select');
    window.location = $(this).attr('href') + '?selectParam=' + escape(data);
  });
});
  • Now you have to move your <select> block to BookAppointment.html page (Note the new book-appointment-script.js):
<head>
  <script src="Scripts/jquery-1.11.1.js"> </script>
  <script src="Scripts/jquery-ui-1.11.0.custom/jquery-ui.js"></script>     
  <script src="book-appointment-script.js"></script> 
</head>
<body>
  <select name="package" id="package" >         
    <option value="Exterior Wash">Exterior Wash</option>
    <option value="Bronze">Bronze</option>
    <!-- more options -->
  </select>
</body>
  • In the book-appointment-script.js file you will be catching the selectParam query parameter and updating the select option based on it:
$(document).ready(function () {
  var selectData = unescape(window.location.search.substring(1).split('=')[1]);
  var $select = $('#package');
  $select.val( selectData );
});

You may need to escape and unescape html special characters, as this is just a straightforward example.

Upvotes: 1

Related Questions