Question

What I want to do is create a questionnaire that has three yes or no questions. If all three questions have 'Yes' selected, then I want one alert. If any of the questions have 'No' selected, then I want an alert specific to that question. I thought I had it, but I have missed something, somewhere. Can you please help?


<script type="text/javascript">
    $(document).ready(function() {
    $('#getAnswersButton').click(function(Submit) {
        var groceryList = document.getElementsByName('groceryList');
        var equipTimeline= document.getElementsByName('equipTimeline');
        var whatTime= document.getElementsByName('whatTime');

    if (groceryList[0].checked && equipTimeline[0].checked && whatTime[0].checked) {
        alert("Great!  You’re all set! Let’s start cooking!  Just click the 'Next' button to continue.");

    } else if (groceryList[1].checked) {
        alert("Please select the 'Grocery List' link above and review the list to see what you may have missed.");

    } else if (equipTimeline[1].checked) {
        alert("Please select the 'Equip/Timeline' link above and make sure you have all of your tools.");                               

    } else if (whatTime[1].checked) {
        alert("Please select the 'Equip/Timeline' link above and make sure you have all of your tools.");                               
        }        
    }
});
</script>



<div>
    <form>
        <ol>
            <li><label for="ingredients">Do you have all of the ingredients listed on the grocery list?</label></li>                
            <p>
                <input type="radio" id="ingredients" name="groceryList" value="Yes" /> Yes
                <input type="radio" id="ingredients" name="groceryList" value="No" /> No
            </p><br>

            <li><label for="equip">Did you gather up all of the utensils, appliances, and tools that you will need to use?</label></li>             
            <p>
                <input type="radio" id="equip" name="equipTimeline" value="Yes" /> Yes
                <input type="radio" id="equip" name="equipTimeline" value="No" /> No
            </p><br>

            li><label for="timeToEat">What time are you preparing to serve dinner?  You need to subtract a <b>minimum</b> of 3 hours from that time.  Keep an eye on the clock! <i>(For example: if you are serving dinner at 7pm, then you should start preparing everything at 4pm.)</i></label></li>             
            <p>
                <input type="radio" id="timeToEat" name="whatTime" value="Yes" /> Yes
                <input type="radio" id="timeToEat" name="whatTime" value="No" /> No
            </p><br>
        </ol>
    </form>
</div>
Was it helpful?

Solution

You almost got it! You're just missing a parenthesis to close the click function. Your last javascript lines should be:

    ... } else if (whatTime[1].checked) {
    alert("Please select the 'Equip/Timeline' link above and make sure you have all of your tools.");                               
    }        
  }); //This parenthesis was missing!
});
</script>

Demo code

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top