Question

I have a form that collects information on 15 participants, and based on a Class selected for each participant 3 drop down boxes (Events) are populated. Originally I had a drop down box to select the Class and I have changed to a textbox. However I cannot figure out how to associate the variable with the text box (instead of dropdown) with the Class for each participant. This is the part of function I am having trouble with: var class_id = class_dropdown.value; I have read other similar posts but cannot figure out how they associated text box and name in variable.

This is the form:

<form name="myform" method="post" action="insert_entries.php">

<table style="width: 139%" align="center">
	<tr>
		<td class="style2" style="width: 166px"><strong>FIRST NAME</strong></td>
		<td class="style2" style="width: 161px"><strong>LAST NAME</strong></td>
		<td class="style2" style="width: 66px"><strong>GENDER</strong></td>
		<td class="style2" style="width: 224px"><strong>DOB</strong></td>
		<td class="style2" style="width: 74px"><strong>CLASS</strong></td>
		<td class="style2" style="width: 104px"><strong>EVENT 1</strong></td>
		<td class="style2" style="width: 104px"><strong>EVENT 2</strong></td>
	</tr>
	<tr>
		<td style="width: 166px">
<input type="text" name="first1" size="35" style="width: 155px" /></td>
		<td style="width: 161px">
<input type="text" name="last1" size="35" style="width: 155px" /></td>
		<td style="width: 66px">
<select name="gender1" class="dropdownbox" id="series id15"style="height: 23px; width: 70px">
<option></option>
<option>M</option>
<option>F</option>
</select></td>
		<td style="width: 224px">
		<input type="date" name="dob1" size="35" onchange = "repeat()" style="width: 155px; height: 27px;" /></td>
		<td style="width: 74px">
<input type="text" name="class1" size="35" style="width: 155px" /></td>
		<td style="width: 104px">
<select name="events1" class="dropdownbox" id="series id"style="height: 23px; width: 104px">
<option></option>
</select> </td>
		<td style="width: 72px">
<select name="events1B" class="dropdownbox" id="series id16"style="height: 23px; width: 104px">
<option></option>
</select> </td>
	</tr>
</table>

And this is the function:

<script>
// function to get event list for selected class -
function get_event(class_dropdown)
{
	// get selected class value -
	var class_id = class_dropdown.value;
	
	// get name of selected class dropdown -
	var class_dropdown_name = $(class_dropdown).attr('name');
	
	// get no. appended to class dropdown name -
	var class_no = class_dropdown_name.replace ( /[^\d.]/g, '' ); 
	
	// prepare names of 3 event dropdowns -
	var event1 = 'events'+class_no;
	var event2 = 'events'+class_no+'B';
	var event3 = 'events'+class_no+'C';
	
	// empty 3 event dropdowns -
	$('select[name="'+event1+'"]').html('');
	$('select[name="'+event2+'"]').html('');
	$('select[name="'+event3+'"]').html('');
	
	if(class_id != '')
	{
		$.ajax({
			url:"get_event.php",
			type:"POST",
			dataType:"json",
			data:{class_id:class_id},
			success:function(data)
			{
				var event_option = '';
			
				event_option = event_option+'<option value=""></option>'; 
				
				for(var i=0; i<data.length; i++)
				{
					event_option = event_option+'<option value="'+ data[i].eventcode +'">'+ data[i].event +'</option>';
				}
				
				// append event list to 3 dropdowns next immediate -
				$('select[name="'+event1+'"]').html(event_option);
				$('select[name="'+event2+'"]').html(event_option);
				$('select[name="'+event3+'"]').html(event_option);
			}
		});
	}
}
</script>

Answer 1

如果我了解您的问题，您希望运行所包含的Javascript并填充class_dropdown变量，并填充对class1输入的引用。

有多种方法可以做到这一点，其中一种可能的方法是以与您的其他输入类似的方式内联事件调用，dob1调用repeat()中的onchange函数内联处理程序：

<input type="date" name="dob1" size="35" onchange = "repeat()" ...

这里类似的方法是选择一个输入值发生时发生的change事件或者当焦点从输入中消失时发生的blur事件。然后，内联处理程序调用传递 this 作为对实际输入的引用：

<input name='class1' onblur="get_event(this)" />

在上面的示例调用中，只要焦点从输入中删除，并且get_event被调用，将get_event引用传递给方法，就会调用class1。

您可以在以下playgound中验证这一点。只需键入您想要的任何内容，然后将焦点放在文本框中。该消息将显示输入的实际值。

＆＃13;

function get_event(class_dropdown) {
   var text = class_dropdown.value;
   alert(text);
}

＆＃13;

<input name='class1' onblur="get_event(this)" />

＆＃13;

assign variable for multiple textboxes

1 个答案: