使用点击不同页面的链接更改表单选择字段 [英] Changing form select field with a link clicked on a different page

问题描述

我有一个服务页面，链接到带有表单的预约页面，我希望选择的服务在下拉列表中更改为所选的正确服务。

我能找到的类似问题的唯一解决方案就是下面的答案。但是，当窗体位于单独的页面上时，它似乎不起作用。当我将表单复制到同一页面上并在页面底部使用锚点时，它会改变字段，但是当使用链接到另一页面时，它不会。我假设这是由于它在另一个页面上，但我无法找到这种情况很多。

我已经包含了我的代码副本，我相信我已经包含了每个部分的相关代码片段。

---

在两个页面上声明脚本Head：

$ b

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

代码从服务页面的HTML链接：

< pre class =lang-html prettyprint-override> < a href =BookAppointment.htmldata-select =Bronze>


JS代码：

  var $ select = $（'＃package'）; 
 $（'a [href =BookAppointment.html]'）。click（function（）{
 $ select.val（$（this）.data（'select'））; 
}）; 
  

代码从预约表单（更多选项未列出）：

< select name =packageid =package>
<选项值=外部清洗>外部清洗< /选项>
< option value =青铜>青铜< /选项>
<！ - 更多选项 - >
< / select>


感谢您提供任何帮助。

解决方案

实际上，如果将所有元素嵌入到同一页面中，特别是< select> 元素， JS代码在页面范围内执行。因此，您可以在您点击 a href元素时更改选择值。

为了让您的 data-select 值可以在 BookmentPage.html 页面找到，它的值应该放在该页面上。
因此，总而言之，当您从 services.html 页面中点击 a href元素时，数据-select 值通过JavaScript处理并封装为查询参数，然后重定向到 BookAppointment.html页面。

• 现在让我们假设您的 services.html 页面如下所示（注意新的service-script.js ）：

< head>
< script src =Scripts / jquery-1.11.1.js> < /脚本>
< script src =Scripts / jquery-ui-1.11.0.custom / jquery-ui.js>< / script>
< script src =service-script.js>< / script>
< / head>
< body>
< a href =BookAppointment.htmldata-select =Bronze>
< / body>


• 在 service-script.js 文件，您将捕获 a href上的用户单击事件，然后检索 data-select 值（就像您以前所做的那样）。新部分将在您将重定向到的html引用中引入该值：
  

点击（函数（e）{
 e。）。（code）$（document）.ready（function（）{
 $（'a [href =BookAppointment.html]'）。 preventDefault（）; 
 var data = $（this）.data（'select'）; 
 window.location = $（this）.attr（'href'）+'？selectParam ='+ escape （data）; 
}）; 
}）; 
  

• 现在您必须移动<选择> 块到 BookAppointment.html 页面（注意新的book-appointment-script.js ）：

$ b

 < head> 
< script src =Scripts / jquery-1.11.1.js> < /脚本> 
< script src =Scripts / jquery-ui-1.11.0.custom / jquery-ui.js>< / script> 
< script src =book-appointment-script.js>< / script> 
< / head> 
< body> 
< select name =packageid =package> 
<选项值=外部清洗>外部清洗< /选项> 
< option value =青铜>青铜< /选项> 
 <！ - 更多选项 - > 
< / select> 
< / body> 
  







• 在 book-appointment-script.js 文件，您将捕获 selectParam 查询参数并根据它更新选择选项：
  



$（document）.ready（function（）{
var selectData = unescape（window.location.search.substring （1）.split（'='）[1]）;
var $ select = $（'＃package'）;
$ select.val（selectData）;
}）;


您可能需要转义和取消html特殊字符，因为这只是一个简单的示例。




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.

解决方案

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.

这篇关于使用点击不同页面的链接更改表单选择字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！