2012-01-27 73 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>