How can jquery steps pagination button's position change in modal

Question

I have a modal and i use jquery steps inside it. I want to change steps's buttons prev next and submit position to inside modals footer. I tried to solve it appending button's div to inside modal footer but buttons didn't work. How can i solve it ?

 <div class="modal-body">
  <form class="wizard-form steps-basic" action="#" data-fouc>
      <h6>Personal data</h6>
      <fieldset>
          <div class="row">
              <!-- form1 -->
          </div>
      </fieldset>

      <h6>Your education</h6>
      <fieldset>
          <div class="row">
              <!-- form2 -->
          </div>
      </fieldset>

      <h6>Your experience</h6>
      <fieldset>
          <div class="row">
              <!-- form3 -->
          </div>
      </fieldset>
  </form>
</div>

<div class="modal-footer">
    <!-- Steps buttons should be placed here -->
</div>



<script type="text/javascript">
    $(document).ready(function () {

           $('.steps-basic').steps({
            headerTag: 'h6',
            bodyTag: 'fieldset',
            transitionEffect: 'fade',
            titleTemplate: '<span class="number">#index#</span> #title#',
            labels: {
                previous: '<i class="icon-arrow-left13 mr-2" /> Previous',
                next: 'Next <i class="icon-arrow-right14 ml-2" />',
                finish: 'Submit form <i class="icon-arrow-right14 ml-2" />'
            },
            onFinished: function (event, currentIndex) {
                alert('Form submitted.');
            }
           });
        //var stepButtonsDiv = document.getElementsByClassName('actions clearfix');
        //$('.modal-footer').append(stepButtonsDiv);

    });
</script>

Are you using a library for the modal? If you do, which? If you could create a [runnable snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/), it will be the best. — Mosh Feu, Mar 12 '20 at 09:26
As far as I can tell, limitless uses bootstrap which looks pretty good with steps: https://jsbin.com/zejifin/1/edit?html,js,output — Mosh Feu, Mar 12 '20 at 14:29

Adina · Answer 1 · 2020-03-12T12:15:58.840

The buttons could be placed in the modal footer

<div class="modal-footer">
    <span class="PrevButton"><i class="icon-arrow-left13 mr-2" /> Previous</span>
    <span class="NextButton">Next <i class="icon-arrow-right14 ml-2" /></span>
    <span class="SubmitButton">finish: 'Submit form <i class="icon-arrow-right14 ml-2" /> </span>
</div>

Hide them initially in the document.ready and show on click when you need them

<script type="text/javascript">
    $(document).ready(function () {
        //when you need to hide
       $(".PrevButton").hide();
       $(".NextButton").hide();
       $(".SubmitButton").hide();
    });
    //then show on click by:

       $(".PrevButton").show();
       $(".NextButton").show();
       $(".SubmitButton").show();
</script>

How can jquery steps pagination button's position change in modal

1 Answers1