JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<div class="container" data-theme="a" data-role="header" data-position="fixed">
    <svg height="20" width="20">
        <circle cx="10" cy="10" r="8" width="1" fill="gray" />
    </svg>
</div>
<form action="preview.php" method="post" data-ajax="false">
    <div class="form" data-role="page" id="page1">
        <legend>Fill personal info:</legend>
        <input name="name" type="textbox" placeholder="Name" />
        <br />
        <input name="age" type="textbox" placeholder="Age" /> <a href="#page2" data-role="button" data-transition="slide">Begin</a>

    </div>
    <div class="form" data-role="page" id="page2">
        <legend>What's your gender?</legend>
        <fieldset class="radiogroup">
            <input type="radio" name="gender" id="choice1" value="male" />
            <label for="choice1">Male</label>
            <input type="radio" name="gender" id="choice2" value="female" />
            <label for="choice2">Female</label>
            <input type="radio" name="gender" id="choice3" value="other" />
            <label for="choice3">Other</label>
        </fieldset> <a href="#page3" class="next" data-role="button" data-transition="slide">Next</a>

    </div>
    <div class="form" data-role="page" id="page3">
        <legend>What's your education?</legend>
        <fieldset class="radiogroup">
            <input type="radio" name="education" id="choice1" value="collage" />
            <label for="choice1">Collage</label>
            <input type="radio" name="education" id="choice2" value="graduate" />
            <label for="choice2">Graduate</label>
            <input type="radio" name="education" id="choice3" value="phd" />
            <label for="choice3">Phd</label>
        </fieldset> <a href="#page4" class="next" data-role="button" data-transition="slide">Next</a>

    </div>
    <div class="form submit" data-role="page" id="page4">
        <input type="submit" value="Preview Form" />
    </div>
</form>

CSS

.container {
    text-align: center
}
.next {
    visibility:hidden
}

JavaScript

$(function () {
    $(".container").toolbar()
})

$(":radio").change(function () {
    addcircle()
    $(this).closest('.form').find('.next').css({
        "visibility": "visible"
    })
    $(this).closest('fieldset').find(':radio').unbind("change")
})

$('.form').on('pageshow', function () {
    svgswitch($('.container svg:nth-child(' + $.mobile.activePage.attr("id").substring(4, this.length) + ')'))
    if ($.mobile.activePage.hasClass('submit')) addcircle(),
    $.mobile.activePage.removeClass('submit');
})

$('svg').click(function () {
    svgclick($(this))
})

function svgswitch(b) {
    $('circle').attr("fill", "lightgray")
    b.children('circle').attr("fill", "gray")
}

function addcircle() {
    $('circle').attr("fill", "lightgray")
    $('<svg style="margin-right: 5px;display:none" height="20" width="20"><circle cx="10" cy="10" r="8" fill="gray" /></svg>').appendTo('.container').fadeIn('slow')
    $('svg').last().bind('click', function () {
        svgclick($(this))
    })
}

function svgclick(a) {
    $.mobile.changePage("#page" + (a.index() + 1))
}