将javascript onclick参数传递给另一个页面上的元素答案

【问题标题】：Passing javascript onclick parameter to an element on another page将javascript onclick参数传递给另一个页面上的元素
【发布时间】：2014-06-13 16:04:15
【问题描述】：

我编写了一个联系表单，它会根据页面顶部（表单选择选项）下拉列表中选择的内容自行更改，使用一些 javascript 隐藏元素并更改“必需”类等

这在页面上运行良好。

在网站的导航中，我有一个下拉菜单（引导程序 3），它模仿表单下拉菜单中的选项。这个想法是，访问者有 2 个选项来移动到他们想要的表单，或者从导航，或者从联系页面上的下拉列表。

我有一些 javascript 可以检测导航选择并应该更改联系页面上的关联下拉菜单，这实际上有效，前提是您已经在联系页面上。

我遇到的困难是将值从主页传递到联系页面。

下面的一些 sn-ps 可能会有所帮助：

联系页面表单下拉列表：

   <div class="dropdown">
    <label for="nature">Nature of Enquiry?</label>
      <select tabindex=1 name="nature" id="nature">
       <option value="0" selected>Ask a Question</option>
       <option value="1">Get a Quote</option>
       <option value="2">Submit Meter Reading</option>
       <option value="3">Log a Service Call</option>
      </select>
    </div>

全球导航：

   <li class="dropdown  <?=($page_title == 'Contact') ? 'active' : ''?>">
     <a data-toggle="dropdown" class="dropdown-toggle" href="#">Contact <b class="caret"></b></a>
     <ul role="menu" class="dropdown-menu choose">
       <li><a href="./contact.php#Contact" id="0">Ask a Question</a></li>
       <li><a href="./contact.php#Contact" id="1">Get a Quote</a></li>
       <li><a href="./contact.php#Contact" id="2">Submit Meter Reading</a></li>
       <li><a href="./contact.php#Contact" id="3">Log a Service Call</a></li>
     </ul>
   </li>

全局导航 javascript 捕获：

<script>
  $('.choose a').click(function() {
    $('#nature').val(this.id).change();
  });
</script>

本地联系人页面javascript更改功能：

$('#nature').change(function() 
{ 
var selectedValue = parseInt(jQuery(this).val());

switch(selectedValue){
    case 0:
        hide('error');
        hide('clicks');
        show('subject');
        document.getElementById('subjectspan').style.display = 'inline'; 
        document.getElementById('companyspan').style.display = 'none'; 
        $('input#mono').removeClass('required'); 
        $('input#company').removeClass('required');
        $('textarea#message').addClass('required');                          
        break;
    case 1:
        hide('error');
        hide('clicks');
        show('subject');
        document.getElementById('subjectspan').style.display = 'inline'; 
        document.getElementById('companyspan').style.display = 'none'; 
        $('input#mono').removeClass('required'); 
        $('input#company').removeClass('required');
        $('textarea#message').addClass('required');                           
        break;
    case 2:
        hide('error');
        show('clicks');
        hide('subject');
        document.getElementById('companyspan').style.display = 'inline';
        document.getElementById('meterspan').style.display = 'inline';            
        document.getElementById('subjectspan').style.display = 'none'; 
        $('input#mono').addClass('required');
        $('input#company').addClass('required');
        $('textarea#message').removeClass('required');                        
        break;
    case 3:
        hide('error');
        hide('clicks');
        show('subject');
        document.getElementById('companyspan').style.display = 'inline';
        document.getElementById('subjectspan').style.display = 'inline'; 
        $('input#mono').removeClass('required');            
        $('input#company').addClass('required');
        $('textarea#message').addClass('required');            
        break;
}

});

我知道最后一点 javascript 很不整洁，但现在它可以工作了。

就像我说的那样，导航脚本绝对可以完美运行，前提是您已经在联系页面上。我怎样才能让它从另一个页面工作？

【问题讨论】：

所以当有人点击Get a Quote 时，您希望它转到联系人页面并默认选择该选项吗？只需使用GET 参数。 <a href="contact.php?mode=ask-a-question">Ask a question</a>等

标签： javascript forms select onclick option

【解决方案1】：

尝试在联系页面的 URL 中使用 GET 参数，然后根据该参数触发您的更改事件。

网址：

<li><a href="./contact.php?nature=0#Contact" id="0">Ask a Question</a></li>

联系页面上的 JavaScript：

<script>
  $(function(){
    $('#nature').val(<?php echo $_GET['nature']; ?>).change();
  });
</script>

最好先清理参数以防止 JavaScript 注入。

【讨论】：