CODEWITHSUNDEEP
javascriptphpjqueryhtmlnode.js
David Paul Anthony
David Paul Anthony

Reputation: 41

HTML form which gives feedback immediately

I have been asked to produce a 'workbook' in the form of a website. At the end of the workbook the user will be asked set of specific questions where he/she will answer yes/no - this will be in the form of radio buttons.

example: "Did you understand section 1?" ..... YES/NO

When the user has finished answering these questions a lightbox page should appear to tell them to go back to specific points in the website.

I have looked around and can't find any examples so it's quite hard to explain. does anybody know how this can be done? I appreciate any advice

Upvotes: 3

Views: 247

Answers (1)

Laurens
Laurens

Reputation: 2607

To check if all questions are answered:

HTML:

<div class="question">
    <input type="radio" name="q1" value="yes" />
    <input type="radio" name="q1" value="no" />
</div>
<div class="question">
    <input type="radio" name="q2" value="yes" />
    <input type="radio" name="q2" value="no" />
</div>
<div class="question">
    <input type="radio" name="q3" value="yes" />
    <input type="radio" name="q3" value="no" />
</div>

jQuery:

$(":radio").change(function() {
    if (!$('.question:not(:has(:radio:checked))').length) {
        alert("all questions are filled in, add code to show colorbox/lightbox/bootstrap modal here")
    }
})

See this jsfiddle. I would suggest to use colorbox to create the overlay popup. Another nice one is to use bootstrap modals.

EDIT: updates jsfiddle now working with bootstrap modal!

Upvotes: 1

Related Questions