6

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?

Improve this question
3
  • 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 jsfiddle.net/5L52o0Le Commented May 17, 2015 at 2:26
  • Note: There is no element with id of disp_player in your markup. Commented May 17, 2015 at 2:31
  • @vohuman Sorry if it's unclear! but I do have a <p id= 'disp_player'></p> tag in another div under the form! Commented May 17, 2015 at 2:32

3 Answers 3

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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 - Did you put the <script> tag below the <form> element?
oh my god. you're a genius!
@user3277633 - "genius" ... nah just years of making mistakes and then figuring out how to make fewer. Keep it up. Coding is glorious!
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;
Improve this answer

2 Comments

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

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"

Improve this answer

1 Comment

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: stackoverflow.com/questions/9618504/… 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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.