javascript - 动态添加输入元素以形成并将值存储在数据库中

Question

我必须创建一个表单来创建一个按钮，单击该按钮会出现一个动态文本字段。

我的 JavaScript 是:

function add() {

    //Create an input type dynamically.
    var element = document.createElement("input");
    element.style.borderRadius ="5px";
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "ip2");
    element.setAttribute("name", "ip2");
    element.setAttribute("placeholder", "ip2"); 
    element.setAttribute("required", "true");
    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);

}

我正在为按钮和所需的容器使用以下代码:

<form method="post" action="insert.php">
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

<span id="fooBar"></span>
</form>

输入字段没问题。我只想知道如何从动态输入字段中获取值并将其存储在数据库中。

提前致谢

Answer 1

PHP:

if(isset($_POST['foo'])) {

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$item = $_POST['foo']

$sql = "INSERT INTO thetable (item)
VALUES ('$item')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

}
?>

HTML:

<form action="" method="post">
    <input type="text" name="foo" value="foo">
    <input type="submit" value="Submit">
</form>

此外，如果您的目标是外部文件，则应将表单上的 action 属性更新为文件的 url，例如action="target.php"