Question

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

这在页面上工作正常。

在网站上的导航栏中，我有一个下拉列表（引导程序3），它模仿表单下拉列表中的选项。想法是，访问者可以通过导航或联系页面上的下拉列表选择两种方式来移动到他们想要的表单。

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

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

下面的一些片段可能会有所帮助：

联系页面表单下拉列表：

   <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 catch：

<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非常不整洁，但现在它可以工作。

就像我说的那样，只要你已经在联系页面上，导航脚本就可以完美地运行。如何从其他页面开始工作？

Answer 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注入是个好主意。

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

1 个答案: