Add JavaScript onclick() to HTML form submit

Question

I have the following script:

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

And a simple HTML form:

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

The idea is that when I click on the Submit Player button, it will trigger the displayPlayer() function and add the position name and player ID to the <p id= 'disp_player'></p> tag.

What am I doing wrong, since nothing is showing up?

The form element has an onsubmit event. You will also have to return false and prevent the default action. Here is a jsfiddle for another answer, but covers that http://jsfiddle.net/5L52o0Le/ — Robert, May 17 '15 at 02:26
Note: There is no element with id of `disp_player` in your markup. — Ram, May 17 '15 at 02:31
@vohuman Sorry if it's unclear! but I do have a
tag in another div under the form! — user3277633, May 17 '15 at 02:32

score 4 · Answer 1 · edited Jul 08 '20 at 18:00

4

Use the onsubmit event.

You can add the onsubmit event to the form:

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

And remove the onclick from the submit button:

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

There is an error with the JavaScript code as well. Change:

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

to:

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

edited Jul 08 '20 at 18:00

Peter Mortensen

30,738
21
105
131

answered May 17 '15 at 02:27

Thanks for the suggestion! Unfortunately it still does not work. Is there something wrong with my javascript? I'll update the question to showcase where I'm putting the p tag disp_player also – user3277633 May 17 '15 at 02:34
One weird thing i noticed is that if I don't append the .value, it'll return [object HTMLInputElement][object HTMLInputElement, but if I do, it'll return p1p2. What's going on here? – user3277633 May 17 '15 at 02:49

score 4 · Accepted Answer · edited Jul 19 '20 at 21:10

You can avoid submitting altogether by using the <button type="button">, and then you can bind on the onclick event of the button. You can simplify things by avoiding the input list instead using 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>

Then using querySelector and 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;
}

See the fiddle here.

thanks! your solution is exactly what I'm looking for in the fiddle, but for some reason it's not working on my machine. I even tried copy-pasting, but nothing is showing up under the disp_player div. Any obscure reason that you can think of that might be causing this? — user3277633, May 17 '15 at 03:08
@user3277633 - "genius" ... nah just years of making mistakes and then figuring out how to make fewer. Keep it up. Coding is glorious! — Victory, May 17 '15 at 03:22

score 2 · Answer 3 · edited Jul 19 '20 at 21:26

You have to stop the form's default action, which is to submit the form. Since you didn't declare the method in the form, like:

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

the form will default to the GET method, as you can see when you submit the form. Your URL will change to "yourDomain.com/page.html?position=p4&player_id=1"

To prevent the default action of the form, add this after your function:

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

This will continue to run your function, while stopping the default function of the form element. Notice you will no longer see the URL with "?position=p4&player_id=1" added to the end, assuming you reloaded your page with just "yourDomain.com/page.html"

I just noticed that you will have to write a more complex piece of code to determine which radio button is checked. See this solution: http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript As you can see, it is much easier with jQuery. Regardless, only one radio button will get submitted, and you have to find which one that is and get its value. The text input is simpler: var player_id = document.getElementsByName('player_id'); — Joel, May 17 '15 at 02:51

Add JavaScript onclick() to HTML form submit

3 Answers3