vendredi 18 juin 2021

Javascript radio button checked condition

I am trying to run a condition in Javascript where if the user selected one out of 4 radio button ids, it'll change the form submit button from disabled to enabled. I have the following code and I am not sure what went wrong:

<form>
    <fieldset>
        <legend>Background Details</legend>
            <label for="age">Age:</label>
            <input type="text" id="age" name="age" placeholder="Enter your age"><br />
            <label for="age">Occupation:</label>
            <input type="text" id="occupation" name="occupation">
    </fieldset><br /><br />
    <h2>Select the best option:</h2>
    <label for="bars">To what extent did you enjoy the project?</label><br />
    <label for="bars">1 (Not at all)</label>
        <input type="radio" value="1" id="1">
        <input type="radio" value="2" id="2">
        <input type="radio" value="3" id="3">
        <input type="radio" value="4" id="4">
        <input type="radio" value="5" id="5">
    <label for="bars">5 (Very much)</label>
    <br /><br />
    <input type="button" value="Validate" onclick="validation()"><br />
    <input type="submit" value="Submit" id="btSubmit" disabled>
</form>
<p id="error"></p>


    <script>
function validation(e) {
    var bt = document.getElementById('btSubmit');
    if (document.getElementById('1').checked && document.getElementById('1').checked && document.getElementById('2').checked && document.getElementById('4').checked && document.getElementById('5').checked) {
        bt.disabled = false;
    }
    else if (document.getElementById('3').checked) {
        document.getElementById("error").innerHTML = "Are you sure you do have not opinion?";
        document.getElementById("error").style.color = "green";
        document.getElementById("error").style.fontSize = "22px";
        document.getElementById("error").style.borderStyle = "solid";
    }
    else {
        e.preventDefault();
        document.getElementById("error").innerHTML = "You should fill this question";
        document.getElementById("error").style.color = "red";
        document.getElementById("error").style.fontSize = "30px";
        document.getElementById("error").style.borderStyle = "solid";
    }
}
</script>

Thank you very much for the help. Your assistance always helping me learn and improve.

Aucun commentaire:

Enregistrer un commentaire