我有一个下拉框,其中包含一些选项,这些选项选择后显示隐藏文本,方法是调用函数toggletDisplay()
并通过发送选项的值,我希望它能够执行相同的操作但没有下拉框可供选择,而是使用带有onclick()
的纯文本而不是onchange()
或类似的字词。
当前代码
<form id="criteria" name="criteria">
<table width="200px" height="700px" name="criteria_search" align="left" border="1" style="margin-right:70px">
<tr>
<td class="dataLabel" width="100%" align="left"><strong>Add Rule : </strong>
<select name="rule" id="rule" onChange="toggletdDisplay(this.form);">
<optgroup label="Simple Rules">
<option value="instructions" selected="selected"> </option>
<option value="email">Email</option>
<option value="assigned">Assigned Racecourse</option>
</optgroup>
</select>
</td>
</tr>
</table>
<table align="right" border="1" width="300px" height="400px" style="float:left;">
<tr>
<td class="dataLabel" name="assigned" id="assigned" style="display: none;">
<table border="0">
<tr>
<td colspan="3"><h4>Assigned to Racecourse</h4></td>
</tr>
<tr>
<td style="margin-left:20px">
<b>Assigned To: </b><select name="selected_assigned_location" id="selected_assigned_location"></select>
</td>
</tr>
</table>
</td>
<td width="100px" class="dataLabel" name="email" id="email" style="display: none;" >
<table>
<tr>
<td colspan="3"><h4>Registered Email</h4></td>
</tr>
<tr>
<td><b>Do they have a registered Email Account?</b></td>
</tr>
<tr>
<td>
Yes <input type="radio" name="email_c" value="true_ex" {EMAIL_TEX_CHECKED} checked="checked"> No <input type="radio" name="email_c" value="false" {EMAIL_F_CHECKED}>
</td>
</tr>
</table>
</td>
...ect
我尝试只是通过onclick发送值
<td>
<p id="rule" name="rule" value="email" onclick="toggletdDisplay(this.form);">Email</p>
</td>
但是我得到一个错误值规则未定义。我该如何像以前一样通过不发送select语句的方式发送值?
添加了toggletDisplay,仅使用发回的值将datalabel的样式从隐藏更改为内联
function toggletdDisplay(me)
{
list = Array("instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday");
// hide any previously selected elements
for(x=0; x<list.length; x++)
{
deselect = getElementsByName_iefix("TD", list[x]);
for (j=0; j<deselect.length; j++)
{
deselect[j].style.display = "none";
}
}
// display currently selected criteria
selected = getElementsByName_iefix("TD", me.rule.value);
selected[0].style.display = "inline";
}
答案 0 :(得分:0)
您的代码似乎存在许多问题。其中之一是未定义的函数toggletdDisplay()
,只要您在选择字段中更改选择,就会调用该函数。
但是,基本上,如果要将表单中的输入字段或选择框的值发送到服务器上的php脚本,则需要在{{1}中定义一个action
属性}标签,并确保已提交表单。在您的情况下,可以通过在选择框中更改<form>
属性来实现(简化代码,没有表体系结构):
无论何时在选择框中更改选择,都会提交表单并将该选择框的值发送到onchange
。浏览器中的地址行将显示类似
target.php
我也不清楚为什么在某些...<your URL>/target.php?rule=email
元素中使用colspan
属性,因为该表中仅显示一列。
我的建议是使用“剪切和粘贴”是经济的,并且仅使用您完全理解的代码。逐步逐步构建您的页面。这样一来,您将能够了解发生问题时需要解决的问题。
修改
使用您的<td>
脚本,我们有一些工作要做。我想到的第一件事是,您没有在可能有用的jquery函数中使用它们。其次,您无需执行任何操作即可在控制台窗口中显示表单值或将其发送到php脚本。
还要注意,toggletdDisplay()
属性只能分配给name
或<input>
元素,而不能分配给<select>
元素。在下面的脚本中,我改用<td>
属性。
id
var tds,tdis;
$(function(){
var list = ["instructions","sex", "email", "mobile", "account", "age", "location", "spent", "booked_anything", "internet_booked", "package_type", "package_name", "booked_location", "new_booked_event", "booked_event_range","team", "no_reorder", "newsletter","hear_about","hear_about_bookings","mosaic_group","mosaic_type","assigned","assigned_user","lead_source","target_list","awc","birthday"];
// consider only TDs with IDs from list array:
tds= $('td').filter(function(i,el){return $.inArray(el.id,list)>-1;});
// trigger the display of results only for select and input elements within tds:
tdis=$('select,input', tds).on('change',listResults);
// assign the toggletdDispla function to the rule selector:
$('.action').on('change',toggletdDisplay);
});
function toggletdDisplay(){ tds.hide().filter('#'+this.value).show()}
function listResults(){
$('#show').html('<p>Values to be sent:</p>'+tdis.serialize().replace(/&/g,'<br/>'))
}