2012-01-27 77 views
0

我得到了一个表单(在html中或其他方式)。一旦用户在下拉列表中选择了一个选项,它将获得输入值并创建几个文本框。看来我必须使用onchange()。如何在脚本中自己读取输入并执行逻辑?而不是打开另一个.php脚本?在PHP中读取和打印HTML中的用户输入

目前这是我的。

<?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.""; 
?> 
+0

的'的onchange()'事件是JavaScript的,而不是PHP。正如@nickb在他的回答中所说的那样,在用户提交表单之前,PHP并不知道有任何改变。另外,以这种形式使用'$ PHP_SELF'永远不是一个好主意,它会[打开XSS攻击](http://phpsecurity.wordpress.com/2007/11/03/the-danger-of -php_self /)。我总是对页面名称进行硬编码(例如,如果这个页面被命名为tables.php:'

'),那么必须更新它当你重命名一个页面,但这不是什么大事。 – 2012-01-27 04:58:59

回答

1

一旦HTML被发送到浏览器,而无论是

  1. 刷新页面无法与PHP交互,或
  2. 使用AJAX(JavaScript的)。

如果您事先知道<select>中的选项(它看起来像您),您应该编写一些JavaScript来完成您所需的操作。这里是使用jQuery的simple example

$('#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>元素当第一次加载页面,但它是一个很好的起点。

0

如果你想添加任何输入类型...这里是演示demo with code
你使用下面的方法。

<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">&nbsp;</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>