mercredi 10 juin 2020

Javascript showing me [object HTMLInputElement] instead of actual values

I am doing a small application on ASP.net and I am using Javascript as part of my project. I have these 5 checkboxes that I have to get the value of.

<div class="data">
    <span>
        <input id="firstNameID" name="first_name" type="checkbox" value="first_name" />
        <label for="employee">Name</label>
    </span>

    <span>
        <input id="lastNameID" name="last_name" type="checkbox" value="last_name" />
        <label for="employee">Surname</label>
    </span>

    <span>
        <input id="birthdayID" name="birthday" type="checkbox" value="birthday" />
    <label for="employee">Birthday</label>
    </span>

    <span>
        <input id="genderID" name="gender" type="checkbox" value="gender" />
        <label for="employee">Gender</label>
    </span>

    <span>
        <input id="emailID" name="email" type="checkbox" value="email" />
        <label for="employee">Email</label>
    </span>

    <input type="button" onclick="buildProfile();" value="Get Values" />
    <ul class="well" id="wellForProfile" style="display:none; background-color:#4267B2;">
    </ul>

</div>

Then, inside my JS file, I check which ones are checked, add the ones checked inside an array, and split each value with a comma.. as shown:

var firstNameProperty = document.getElementById("firstNameID");
    var lastNameProperty = document.getElementById("lastNameID");
    var birthdayProperty = document.getElementById("birthdayID");
    var genderProperty = document.getElementById("genderID");
    var emailProperty = document.getElementById("emailID");

    var profileProperties = [];

    if (firstNameProperty.checked == true) {
        profileProperties.push(firstNameProperty)
    }

    if (lastNameProperty.checked == true) {
       profileProperties.push(lastNameProperty)
    }

    if (birthdayProperty.checked == true) {
        profileProperties.push(birthdayProperty)
    }

    if (genderProperty.checked == true) {
        profileProperties.push(genderProperty)
    }

    if (emailProperty.checked == true) {
        profileProperties.push(emailProperty)
    }
    var valuesWithCommas = profileProperties.join(",");

However, instead of using the values "first_name, last_name...", it uses [object HTMLInputElement]. SO for example, if I check only email and birthday, instead of [email,birthday], I get [[object HTMLInputElement], [object HTMLInputElement]]

What could be the problem please? Thanks




Aucun commentaire:

Enregistrer un commentaire