Question

这是我目前的代码，如何更改当前代码所以我能够在提交后从表单输入数据然后添加到下面的表中，我知道我必须用JS做更多的事情来实现这个目的，但无法在网上找到任何可以帮助我完成我想做的事情

编辑：我想要完成哪些我似乎无法找到帮助我的在线资源，确切地说，当我提交电影名称和日期时，提交值后应该放在表格下面的表格中

<html>
<head>      
<title>Movie Details</title>
<script type="text/javascript">
function movieName(){
    var name = document.getElementById("movie").value;

    if (true)
    {
        alert(name);
    }
}

function date(){
    var released = document.getElementById("dateRelease").value;

    if (true)
    {
        alert(released);
    }
}
</script>

</head>
<body>

<div id="add">

    <form name="movieAdd" method="GET">

        <fieldset>

            <legend>Movie Details</legend>

            <p>
                <label for="movie">Movie Name:</label>
                <input type="text" required placeholder="Movie Name"             name="movie" id="movie"/>
            </p>

            <p>
                <label for="date">Date Released:</label>
                <input type="date" required name="date" id="date"/>
            </p>

        </fieldset>

        <p>
            <input type="submit" name="submitButton" value="Submit">
        </p>
    </form>
</div>

<table id="movieTable" width="350px" border="1">
<tr>
    <th>Number</th>
    <th>Movie Name</th>
    <th>Date Released</th>
</tr>
</table>
</body>
</html>

Answer 1

我建议使用jQuery（http://jquery.com/）。您可以使用它轻松地从表单中选择元素，例如：

var movie = $('#movie').val();

然后，您可以轻松地附加包含必要数据的表格行，例如：

var $td = $('<td>').text(movie);
$('#movieTable').append($td);

我希望这能指出你正确的方向。

Answer 2

如果您使用的是php，那么您可以使用post方法来实现此目的。表单发布后，您可以填充表格。

if(isset($_POST['submitButton'])){
     echo '<table id="movieTable" width="350px" border="1">';
      echo '<tr>';
      echo  '<th>'.$_POST['moviename'].'</th>';
      echo '</tr>';
      echo '</table>';
}

如何在提交表单后动态添加到表

2 个答案: