使用php动态创建表单元素

时间:2010-03-03 05:27:46

标签: php javascript xhtml

这个简短的程序假设找到表X的列名,并创建一个包含至少一个文本字段的表单和一个包含表的列的所有名称的select元素。利用该信息,用户可以对该表执行搜索并进一步指定他想要在哪个列上进行搜索。我希望用户能够添加更多带有匹配选择元素的文本字段,以防万一他想改进搜索。

当用户按下按钮时,如何动态添加这些额外字段?

<?php
$table_name = "tablename";
mysql_connect("localhost", "root", "");
$query = "SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = '$table_name'";
$result = mysql_query($query);

$column_names="";

while($row = mysql_fetch_array($result)){
    $column_names == "" ? $column_names .= $row["COLUMN_NAME"] : $column_names .= "," . $row["COLUMN_NAME"] ;
}

$column_names = explode(",", $column_names);
?>

<html>
<head>
    <title>SQLSEARCH</title>
</head>
<body>


<form action="index.php" method="post">
<?php
    echo "Search: <input tpe=\"text\" name=\"advtext[]\" /> in ";
    echo "<select name=\"advselect[]\">";

        foreach($column_names as $value)
            echo "<option>" . $value . "</option>";

    echo "</select>";
?>

<input type="hidden" name="searchsent" value="1" />
<input type="submit" name="searchbutton" value="Search" />

</form>

<input type="button" name="addattributes" value="Add Search Attributes" / onclick="AddSelect();">

</body>
</html>

2 个答案:

答案 0 :(得分:1)

每次用户按下按钮时,此函数都会添加一个input元素和一个select元素。

 function AddSelect(){

    var newInput = document.createElement('input');
    newInput.type='text';
    newInput.name = 'advtext[]';

<?php
    foreach($column_names as $value => $i){
        echo "\tvar newOption" . $value . "=document.createElement('option')" . "\n";
        echo "\tnewOption" . $value . ".value='" . $i . "';" . "\n";
        echo "\tnewOption" . $value . ".innerHTML='" . $i . "';" . "\n\n";
    }
?>

    var newSelect = document.createElement('select');
    newSelect.name = 'advselect[]';

<?php
    foreach($column_names as $value => $i){
        echo "\tnewSelect.appendChild(newOption" . $value . ")" . "\n";
    }
?>

    var SubmitButton = document.forms.myform.searchbutton;

    document.forms.myform.insertBefore(newInput, SubmitButton);
    document.forms.myform.insertBefore(document.createTextNode(" in "), SubmitButton);
    document.forms.myform.insertBefore(newSelect, SubmitButton);

}

答案 1 :(得分:0)

  

您可以为表单使用innerHTML属性。否则使用Ajax功能添加额外的文本框以动态添加。