将 JavaScript onclick() 添加到 HTML 表单提交

Question

我有以下脚本：

<script type= 'text/javascript'>
    function displayPlayer() {
        var input = document.getElementById("player_stuff").elements;
        var position = input[0];
        var player_id = input[1];

        document.getElementById('disp_player').innerHTML = position + player_id
    }
</script>

还有一个简单的 HTML 表单：

<form id = 'player_stuff' onsubmit = 'displayPlayer()'>

    Player's Position:<br>
        <input type="radio" name="position" value="p1" checked>Position One
        <input type="radio" name="position" value="p2" checked>Position Two
        <input type="radio" name="position" value="p3" checked>Position Three
        <input type="radio" name="position" value="p4" checked>Positin Four
    <br/>
    Add by Player ID:<br>
        <input type='text' name='player_id'>
        <input type="submit" value="Submit Player" id='smit' >
</form>

<div id = 'roster'>
    <h3>Current Roster</h3>
    <p id= 'disp_player'></p>
</div>

这个想法是当我点击提交播放器按钮时，它会触发displayPlayer()函数并将位置名称和播放器 ID 添加到<p id= 'disp_player'></p>标签。

我做错了什么，因为什么都没有出现？

Answer 1

使用onsubmit事件。

您可以将onsubmit事件添加到form ：

<form id = 'player_stuff' onsubmit="displayPlayer()">

并从提交按钮中删除onclick ：

<input type="submit" value="Submit Player" id='smit'>

JavaScript 代码也有错误。 改变：

document.getElementById('disp_player').innerHTML = position + player_id

到：

document.getElementById('disp_player').innerHTML = position.value + player_id.value;

Answer 2

您可以通过使用<button type="button">完全避免提交，然后您可以绑定button的onclick事件。 您可以通过避免输入列表而不是使用querySelector来简化事情：

<form id = 'player_stuff'>
    Player's Position:<br>
    <input type="radio" name="position" value="p1" checked>Position One
    <input type="radio" name="position" value="p2">Position Two
    <input type="radio" name="position" value="p3">Position Three
    <input type="radio" name="position" value="p4">Positin Four
    <br/>
    Add by Player ID:<br>
    <input type='text' name='player_id'>
    <input type="button" value="Submit Player" id='smit' >
</form>
<div id="disp_player"></div>

然后使用querySelector和querySelectorAll

document.getElementById('smit').onclick = function () {
    var checkedPosition =
        document.querySelectorAll("#player_stuff [name='position']:checked");
    var playerId =
        document.querySelector("#player_stuff [name='player_id']");
    var position = checkedPosition[0].value;
    var player_id = playerId.value;

    document.getElementById('disp_player').innerHTML =
        position + " " + player_id;
}

请参阅此处的小提琴。

Answer 3

您必须停止表单的默认操作，即提交表单。 由于您没有在表单中声明方法，例如：

<form id = 'player_stuff' action="#" method="get">

表单将默认为GET方法，正如您在提交表单时所看到的。 您的网址将更改为“yourDomain.com/page.html?position=p4&player_id=1”

要防止表单的默认操作，请在您的函数后添加以下内容：

document.getElementById("player_stuff").addEventListener("click", function(event) {
    event.preventDefault();
});

这将继续运行您的函数，同时停止表单元素的默认函数。 请注意，假设您仅使用“yourDomain.com/page.html”重新加载页面，您将不再看到末尾添加了“?position=p4&player_id=1”的 URL