show progress status

HTML & CSS
#1

Hello,

Sorry my english is bad

show progress status using css and div
Note: no border

How to make is this such?

Thank you in advance

#2

Adem,

Here’s an example of a progress bar using CSS and JQUERY that’s similar to the one you’re looking for.

http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

Here’s some other tutorials…

http://whereamiat.com/how.html
http://ciuffodemo.altervista.org/progressbar/documentation/documentation.html

#3

Thank you very much,
A perfect working

#4

Hello again,

I will use this: http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

There is no problem.

    <input type="button" name="previous" class="previous action-button" value="Previous" />
		<input type="button" name="next" class="next action-button" value="Next" />

But when I use div, it doesn’t run. How can we solve this problem?

<div>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
		<input type="button" name="next" class="next action-button" value="Next" />
</div>

Thank you

#5

The code is written to the html, if you change the html order it will make the jquery and css invalid.

By adding in the

tags you are doing that.

The code looks for not

You’ll need to modify a lot to get it to work with the div.

#6
#7

Hello,
I have a question.
When I fill a multistep form… (My form has 8 steps.)
If there is a required field and it isn’t filled, it must give an alert on this step (not on the last step -submit)
In my form, it gives alert on the last step (after click submit). I want to give alert on related step. How can I do this?
Can you help me, please?

This is my code. It gives the alert on last step.

<script type="text/javascript">
$(document).ready( function() {
    $("#msform").submit(function() {
        if ($("#email").val()=='') {
            alert("Email rquired");
            return false;
        }
    });
});
</script>

Thanks

#8

Add a handler to clicking the button moving from the step you want to validate, prevent default behaviour, do validation and show error if something is wrong.

#9

Thank you for your answer,
Not validate… Required fields shouldn’t left empty.

#10

Checking that theyre not empty is also validation

#11

I’m sorry, I know little english,
Sample:
Section 1


setion 2


section 3


section 4


setion 5


section 6


Only empty? Entries?

#12

Thank you, I’ve solved the problem,
Here: http://forum.ceviz.net/javascript-dhtml-ajax/129217-jquery-form-kontrolu-hakkinda-sorum-var.html
7th message

Sponsor our Newsletter | Privacy Policy | Terms of Service