-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Run Expression Trigger
Survey.StylesManager.applyTheme("defaultV2");
function setOfficialCountryName(params) {
if (params.length < 2)
return;
var country = params[0];
var officialName = params[1];
var survey = this.survey;
if (!country || !country.length) {
survey.clearValue(officialName);
return;
}
survey.setVariable("request_processing", true);
survey.setVariable("request_error", null);
country = country
.charAt(0)
.toUpperCase() + country
.slice(1)
.toLowerCase();
$.ajax({
url: "https://surveyjs.io/api/CountriesExample?name=" + country,
type: "GET",
success: function (data) {
if (!!data && data.length > 0) {
var countryValue = data[0];
survey.setValue(officialName, countryValue.officialName);
survey.setVariable("hasError", false);
} else {
survey.setVariable("hasError", true);
survey.setVariable("request_error", "The country is not found.");
survey.clearValue(officialName);
}
survey.setVariable("request_processing", false);
},
error: function (xhr, ajaxOptions, thrownError) {
survey.setVariable("hasError", true);
survey.setVariable("request_error", "The country is not found.");
survey.clearValue(officialName);
}
});
}
Survey.FunctionFactory.Instance.register("setOfficialCountryName", setOfficialCountryName);
var json = {
"elements": [
{
"type": "text",
"name": "country",
"title": "Please enter the country"
},
{
"type": "html",
"name": "requesting",
"html": "The data is requesting",
"visibleIf": "{request_processing} = true"
},
{
"type": "text",
"name": "name_official",
"title": "Official name is:",
"readOnly": true,
"visibleIf": "{name_official} notempty"
},
{
"type": "html",
"name": "error",
"html": "The following error has happened: <b>{request_error}</b>",
"visibleIf": "{hasError} = true"
}
],
"triggers": [
{
"type": "runexpression",
"expression": "{country} notempty or {country} empty",
"runExpression": "setOfficialCountryName({country}, 'name_official')"
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Run Expression Trigger, Reactjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.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-react-ui/survey-react-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">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage