CODEWITHSUNDEEP
phpjavascriptxhtml
Jose Vega
Jose Vega

Reputation: 10258

Dynamically create form elements with php

This short program is suppose find the column names of a table X, and create a form with at least one text field and one select element that contains all the names of the columns of the table. With that information, the user can perform a search on this table and further specify on which column he would like to do the search. I would like it for the user to be able to add more text fields with matching select elements, just in case he wants to refine his search.

How can I dynamically add those extra fields when ever the user press a button?

<?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>

Upvotes: 1

Views: 3514

Answers (2)

Jose Vega
Jose Vega

Reputation: 10258

This function adds an input element and a select element, every time the user presses the button.

 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);

}

Upvotes: 1

Pavunkumar
Pavunkumar

Reputation: 5345

You can use innerHTML properties for your form . Otherwise use Ajax Functionality to add the extra text box to add dynamically.

Upvotes: 0

Related Questions