我有一个表单(html中的php或其他形式)。一旦用户在下拉列表中选择了一个选项,它就会获得输入值并创建几个文本框。我似乎必须使用onchange()
。如何读取输入并在脚本中执行逻辑?而不是打开另一个.php
脚本?
目前这就是我所拥有的。
<?php
$tables = $_POST["tables"];
?>
<html>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
Table Name: <div id="tables">
<select name="tables">
<option value="Applications">Application</option>
<option value="Device">Device</option>
</select>
</div>
</form>
<?
echo "".$tables."";
?>
一旦HTML被发送到没有的浏览器,您就无法与PHP交互
- 刷新页面,或
- 使用AJAX(JavaScript)
如果你事先知道<select>
中的选项(看起来你确实知道),你应该编写一些JavaScript来完成你需要的东西。下面是一个使用jQuery的简单示例。
$('#tables_select').change(
function( eventObject ){
alert('You chose ' + $(this).val());
switch( $( this ).val())
{
case 'Applications':
$('#tables').append('<input type="text" name="application_name" value="Enter an application name" />"');
break;
case 'Device':
$('#tables').append('<input type="text" name="device_name" value="Enter a device name" />"');
break;
}
}
);
如果用户更改了他们的选择,您将需要添加额外的逻辑来删除插入的元素,并在页面首次加载时插入正确的<input>
元素,但这是一个很好的起点。
如果您想添加任何输入类型。。。这是代码为
的演示演示您使用以下方法。
<form method="post" action="<?php echo $PHP_SELF;?>" onChange="return createTxtbox()">
Table Name: <div id="tables">
<select name="tables">
<option value="Applications">Application</option>
<option value="Device">Device</option>
</select>
</div>
<span id="fooBar"> </span>
</form>
然后编写javascript、
<SCRIPT language="javascript">
function createTxtbox() {
var type="text";
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>