Question: **Problem**

I have a form with different stages. **Image below** in which I have multiple buttons(prev, next) and a submit button(to submit the form). I want to take the person directly to 5th stage (summary) with pre-populated data when they comes to this page.

I am using below mentioned **javascript code** but no success. I know the reason why no success and that is because in javascript I'm doing action on **submit button** whereas I want to do it on a normal button, which looks like this.

Can anybody guide my through the syntax of JavaScript in terms of how should I make an action only on the below mentioned button.

**Button**

```
<button type="button" class="next" onclick="loadnext(4,5);"><img src="images/next.jpg" alt="" /> </button>

```

**JavaScript**

```
<script type="text/javascript"> 
   document.forms.login_form.submit();
</script>

```

**Loadnext function**

```
function loadnext(divout,divin){
   console.log(divout + " -- " + divin);
   ch=validateme_form(divout,divin);
   if(!ch){return false}

   //alert(ch);

   jQuery("." + divout).hide();
   jQuery("." + divin).fadeIn("fast");
}

```

Answer: 
The HTML5 data attribute is there simply for the purpose of storing additional information within html elements. I've used it when printing various sets of data programmatic-ly to include information like user account numbers. bits of data that you may want to access with javascript or jquery

**You can see a [great documentation/tutorial here on the HTML5 data attribute by webtutsplus](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/all-you-need-to-know-about-the-html5-data-attribute/)**

The data-attribute is interesting because you can define one as anything you like:

```
     data-[NAME]="[VALUE]"
     data-color="blue"
     data-price="$19.96"

```

The more recent versions of jQuery also have a built in easy to use function to deal specifically with [**getting and setting HTML5 data-attributes - documentation here**](http://api.jquery.com/data/) 

Imagine some hypothetical html:

```
     <span id="fluxCapacitor" data-gigawats="1.21"></span>

```

Calling the .data handler on our flux capacitor jquery element would return "1.21"

```
     $('#fluxCapacitor').data('gigawats'); // "1.21"

```

And you could use two parameter functionality for setting your flux capacitor to over 9000 gigawats.

```
     $('#fluxCapacitor').data('gigawats', "over 9000");

```

Resulting in:

```
     <span id="fluxCapacitor" data-gigawats="over 9000"></span>

```

---

*edit: adjusted my power levels for historical accuracy.*
```
<div class="bg">
    <div style="transition: background 500ms ease; -webkit-transition: background 500ms ease; background-color: rgb(25, 30, 36);"></div>
</div>

```

using library of your choice

This seems to be the way Diesel is performing the color transitions. 

```
var $bodyBg = $('<div />'),
$bg = $('<div />').addClass('bg').append($bodyBg),
$arrow = $('<span />').addClass('arrow');

this.$navs.append($bg).append($arrow);

this.$navs
.on('hide', function() {
    // hide navigation bar
    $(this).addClass('hide');
})
.on('show', function() {
    // show navigation bar
    $(this).removeClass('hide');
})
.on('changeColor', $.proxy(function(e, color) {

    var $elm = $(e.currentTarget),
        $bg = $elm.find('.bg div');

    if (Modernizr.csstransforms && Modernizr.csstransitions) {
        // css3 transition
        $bg.css({
            transition: 'background 500ms ease',
            backgroundColor: this.getColorMod(color, 12)
        });
    } else {
        // no css3 transition support
        $bg.css({
            backgroundColor: this.getColorMod(color, 12)
        });
    }

}, this))
.trigger('hide')
.appendTo(this.$el);

```