javascript - 我的级联组合框发送了错误的值

标签 javascript html css

我有一个带有选项的下拉框,一旦选择将更改下一个下拉框的值。

  • 如果我选择第一个培训选项,两个日期都会通过表格发送到我的电子邮件地址。
  • 但是,如果我选择社交媒体研讨会或以下任何一个,则日期为 9 月 2 日或 18 日,这是第一个选项的值,而不是我为这个特定标签设置的值。

我称之为 <body onload="setup()"> Javascript:

function setup(){
   var select1 = document.getElementById('searchType');
   var selects = document.getElementsByTagName('select');

   for (i = 0; i < selects.length; i++) 
   {
       if (selects[i].id != this.id) {
           selects[i].style.display = 'none';
       }
      document.getElementById(select2).style.display = 'block';
      document.getElementById('textAreaSearchBox').style.display = 'block';
    };
}

CSS:

#socialmedia, #advancedmarketing, #textAreaSearchBox, #firstaid {
display: none;}

HTML:

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

<label for="phone">What kind of training?</label>
<select id="searchType" name="training" class="fixed-size-drop">
<option value="intromarketing">Introduction to Marketing</option>
<option value="socialmedia">Social Media Workshop</option>
<option value="advancedmarketing">Advanced Marketing Workshop</option>
<option value="firstaid">First Aid Training</option></select>

<label for="date">Choose your Date:</label>
<select id="intromarketing" name="date" class="fixed-size-drop2">
<option value="2ndsept" name="2ndsept">2nd sept 2014</option>
<option value="18thsept" name="18thsept">18th sept 2014</option></select>

<select id="socialmedia" class="fixed-size-drop2">
<option value="id">11th sept 2014</option>
<option value="18thsept">18th sept 2014</option></select>

<select id="advancedmarketing" class="fixed-size-drop2">
<option value="name">9th sept 2014</option>    
<option value="organization">25th sept 2014</option></select>

<select id="firstaid" class="fixed-size-drop2">
<option value="3rdsept" name="3rdsept">3rd September 2014</option>    
<option value="16thsept" name="16thsept">16th September 2014</option></select>
<input type="submit" class="ubutton" value="submit">
</form>

这是上传的表格:http://coffeemachines4u.co.uk/test-form.php

我已经摸不着头脑几个小时了,所以如果有人能指出我正确的方向,我将非常感激 :)

最佳答案

这是因为您的选择框的名称属性。只有第一个选择具有名称日期。如果这是不可见的,它也在那里,因此表单从日期发送日期参数。您可以同时更改 name 属性和 selectboxes 的 vivible

使用这个 JavaScrip

var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');

select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
    if (selects[i].id != this.id) {
        selects[i].style.display = 'none';
        selects[i].removeAttribute('name');
    }
}
document.getElementById(select2).style.display = 'block';
document.getElementById(select2).name = 'date';
document.getElementById('textAreaSearchBox').style.display = 'block';

关于javascript - 我的级联组合框发送了错误的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25326096/

相关文章:

css - 如何使用 css 单独在 css 中查找列表元素,即不依赖于 css3?

javascript - Angular 如何使用 querylist 对象?

javascript - 在ui-select中获取所选选项的索引 - Angularjs

javascript - offsetTop 返回 0

html - 无法将 table 并排放置

javascript - 使用 jQuery 固定菜单和滚动到 DIV

php - 如何在没有打印对话框的情况下从网络浏览器打印?

javascript - 以编程方式启动 crossbar.io

asp.net - 在单独的选项卡/窗口中打开 PDF

javascript - d3 中的条形位置与轴不匹配