Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.50

Use customized buttons and images

External navigation:
Go to page directly without validation:


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

function doOnCurrentPageChanged(survey) {
    var prev = document.getElementById('surveyPrev');
    if(prev) {
        prev.style.display = !survey.isFirstPage ? "" : "none";
    }
    var next = document.getElementById('surveyNext');
    if(next) {
        next.style.display = !survey.isLastPage ? "" : "none";
    }
    var complete = document.getElementById('surveyComplete');
    if(complete) {
        complete.style.display = survey.isLastPage ? "" : "none";
    }
}
function setupPageSelector(survey) {
  var selector = document.getElementById('pageSelector');
  for(var i = 0; i < survey.visiblePages.length; i ++) {
    var option = document.createElement("option");
    option.value = i;
    option.text = "Page " + (i + 1);
    selector.add(option);
  }
}

                
                    var json = {
  "title": "Software developer survey.",
  "showNavigationButtons": "none",
  "pages": [
    {
      "title": "What operating system do you use?",
      "elements": [
        {
          "type": "checkbox",
          "name": "opSystem",
          "title": "OS",
          "hasOther": true,
          "isRequired": true,
          "choices": [ "Windows", "Linux", "Macintosh OSX" ]
        }
      ]
    },
    {
      "title": "What language(s) are you currently using?",
      "elements": [
        {
          "type": "checkbox",
          "name": "langs",
          "title": "Please select from the list",
          "colCount": 4,
          "isRequired": true,
          "choices": [
            "Javascript",
            "Java",
            "Python",
            "CSS",
            "PHP",
            "Ruby",
            "C++",
            "C",
            "Shell",
            "C#",
            "Objective-C",
            "R",
            "VimL",
            "Go",
            "Perl",
            "CoffeeScript",
            "TeX",
            "Swift",
            "Scala",
            "Emacs Lisp",
            "Haskell",
            "Lua",
            "Clojure",
            "Matlab",
            "Arduino",
            "Makefile",
            "Groovy",
            "Puppet",
            "Rust",
            "PowerShell"
          ]
        }
      ]
    },
    {
      "title": "Please enter your name and e-mail",
      "elements": [
        {
          "type": "text",
          "name": "name",
          "title": "Name:"
        },
        {
          "type": "text",
          "name": "email",
          "title": "Your e-mail"
        }
      ]
    }
  ]
};

                    window.survey = new SurveyKnockout.Survey(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
survey.showTitle = false;
survey.onCurrentPageChanged.add(doOnCurrentPageChanged);
            
                survey.render("surveyElement");
            
setupPageSelector(survey);
doOnCurrentPageChanged(survey);
survey.showTitle = false;

survey.onComplete.add(function(sender) {
    document.getElementsByClassName("navigation-bar")[0].style.display = "none";
});
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Use customized buttons and images, Knockoutjs Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
External navigation:
<div style="margin-top:20px">
    <a id="surveyPrev" href="#" onclick="survey.prevPage();"></a>
    <a id="surveyNext" href="#" onclick="survey.nextPage();"></a>
    <a id="surveyComplete" href="#" onclick="survey.completeLastPage();">Complete</a>
</div>
<div style="margin-top:20px">
    Go to page directly without validation:
    <select id="pageSelector" onchange="survey.currentPageNo = this.value"></select>
</div>
<hr />

            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

#surveyPrev, #surveyNext, #surveyComplete {
    color: #1ab394;
    cursor: pointer;
}

#surveyPrev {
    background-image: url(https://surveyjs.io/Content/Examples/prev.png);
    display: inline-block;
    width: 80px;
    height: 90px;
}

#surveyNext {
    background-image: url(https://surveyjs.io/Content/Examples/next.png);
    display: inline-block;
    width: 80px;
    height: 90px;
}

#surveyComplete {
    vertical-align: bottom;
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 50%;
    background-color: lightgray;
}

.navigation-bar {
    padding: 1em;
}

#pageSelector {
    width: 90px;
    box-sizing: border-box;
    border-radius: 2px;
    height: 34px;
    line-height: 34px;
    background: #fff;
    outline: 1px solid #d4d4d4;
    text-align: left;
    border: none;
    padding: 0 5px;
}
#pageSelector:focus {
    outline: 1px solid #1ab394;
}

Use onCurrentPageChanged event to update it after the current page is changed.

If you use knockout, please use onRedered event to initialized your custom navigation elements.

survey.onCurrentPageChanged.add(function (sender, options) {
    var survey = sender;
    var oldCurrentPage = options.oldCurrentPage;
    var newCurrentPage = options.newCurrentPage;
    //Your code
});
//Requires for knockout platoform only
survey.onRendered.add(function (sender) {
    var survey = sender;
    //Your code
});