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

我有以下脚本:

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

这个想法是，当我点击 Submit Player 按钮时，它会触发 displayPlayer() 函数并将位置名称和玩家 ID 添加到<p id= 'disp_player'></p> 标签。
我做错了什么，因为什么都没有出现？

最佳答案

您可以通过使用 <button type="button"> 完全避免提交，然后您可以绑定(bind) onclick 的 button 事件。您可以通过避免输入列表而不是使用 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;
}

见 fiddle here 。

关于javascript - 将 JavaScript onclick() 添加到 HTML 表单提交，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30282714/