如何在数据库中查找失败后，如何替换已插入文本的表单？

Question

I have the code in Participate.php file which has a form:

<form method="post" action="input.php" id="Form">
            <input type="text" class="form-control" name="txtName" maxlength="20" required style="margin-bottom:20px"> 
            <input type="email" class="form-control" name="txtEmail" aria-describedby="emailHelp" required style="margin-bottom:20px">
            <input type="submit" class="btn btn-success" id="btnsubmit" value="Zgłoś się" />
        </form>

After unsucessful submit (I check if inserted mail already exist in database) and if no exist I want to refill value for form. This is the input.php code:

<?php

$name = $_POST['txtName']; 
$mail = $_POST['txtEmail']; 
$description = $_POST['txtDescription'];
$connect = new PDO("mysql:host=4*****3;dbname=3*****b", "3***b", "****");
$connect->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );

$q=$connect->prepare("SELECT mail FROM konkurs WHERE mail LIKE (?)");
$q->bindValue(1, $mail);
$q->execute();
$row_cnt = $q->rowCount();
    if($row_cnt == 0){
        $query = $connect->prepare("insert into konkurs(name,mail,description)
        values(?, ?, ?)");
        $query->bindValue(1, $name);
        $query->bindValue(2, $mail);
        $query->bindValue(3, $description);
        try {
            $query->execute();
            echo ("<script LANGUAGE='JavaScript'>
            window.alert('Sent.');
            window.location.href='index.html';
            </script>");
            exit;
            } catch (PDOException $e) {
            die($e->getMessage());
            } 
    } else {
        echo ("<script LANGUAGE='JavaScript'>
            window.alert('This mail already exist.');
            window.location.href='Participate.php';
            document.getElementById('txtName').value = 'nothing';
            </script>");
        }

?>

The thing is it's redirecting to Participate.php after unsuccesfull sumbition. But it doesn't refill the form.

Answer 1

First of all, you must change your HTML to include the id attribute, for example:

<form method="post" action="input.php" id="Form">
    <input type="text" class="form-control" id="txtName" name="txtName" maxlength="20" required style="margin-bottom:20px"> 
    <input type="email" class="form-control" id="txtEmail" name="txtEmail" aria-describedby="emailHelp" required style="margin-bottom:20px">
    <input type="submit" class="btn btn-success" id="btnsubmit" value="Zgłoś się" />
</form>

Then, you must move your logic to the same file as the form container (here Participate.php), and remove the redirection for failures. Otherwise, you'll get no visible results, as the redirection would prevent further JavaScript code from running.

// Updated to prevent syntax errors with multiline strings
echo "<script>"
     . "window.alert('This mail already exist.');"
     . "document.getElementById('txtName').value = 'nothing';"
     . "</script>";