Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

JavaScript Constraints Empty Numeric Cell

Dear all,

I have a question on a Custom JavaScript Verification:

I have two questions in my survey:

Q1: Was is your max. price?
Grid style: 2 rows, 1 column
Row 1, column 1: Numeric input (max price)
Row 2, column 1: Select/check box/multiple choice (I do not have a max price)

Q2: Was is your min. price?
Grid style: 2 rows, 1 column
Row 1, column 1: Numeric input (min price)
Row 2, column 1: Select/check box/multiple choice (I do not have a min price)

I have already set up the JavaScript error messages for both questions for the two scenarios where either no answer option is selected or both answer options are selected.

Now, I have troubles though setting up my Min Price constraint (in Q2) which is that the Min Price has to be smaller than the Max Price. The problem here is that the Max Price from Q1 will be “empty/null/0” in case the second answer option (I do not have a max price) is selected.

I guess the code I am looking for would solve the following:

1) Create a variable to get the value for the Max Price (e.g. var MaxPrice = [% MaxPrice_r1_c1 %];)

2) Test if the MaxPrice is “empty/null/0”. If this is the case, then the Min Price can take any value within my predefined range (e.g. 0-100, which I define in my row settings) and I can move on to the next question in my survey.

3) If the Max Price is “not empty” or “larger than 0”, then I check if the Min Price is larger than my Max Price.

4) If the Min Price is larger than my Max Price, I display an error message (e.g. "Your minimum price has to be smaller than your maximum price.").

5) If the Min Price is smaller than my Max Price, I can continue and move to the next question.

Could you please help me out with a code like this?

Thank you very much in advance!
asked Mar 30 by SeBo (300 points)
Are these two questions on the same page or different pages?

As a side note, you may be interested in using "Not Applicable: Per Question" for this.  It will allow you to apply a checkbox like this to a numeric question (or other question type) so you don't have to use a grid question like this.  You can download it from here:

https://sawtoothsoftware.com/resources/question-library/not-applicable-per-question
Hi Zachary,

thank you first of all for your quick response! This is much appreciated.

Yes, those two questions are on two separate pages. I would like to keep it this way unless it is not possible otherwise - in that case I could put them on the same page.

Thanks for the information on the "not applicable: Per Question". I will check that as well, but would still highly appreciate a solution for my current way of asking those two questions.

1 Answer

0 votes
Try giving the second grid question this custom JavaScript verification:

var max = Number([% Q1_r1_c1 %]);
var min = SSI_GetValue('Q2_r1_c1');

if (max && min > max) {
    strErrorMessage = 'Minimum cannot exceed maximum.';
}
answered Mar 30 by Zachary Platinum Sawtooth Software, Inc. (171,950 points)
This works perfectly, thank you very much!  May I ask how though and how to interpret the if condition (max && min > max)?
Lines 1 and 2 get us the response to the two questions, of course.  We can use JavaScript (with the SSI_GetValue function baked into Lighthouse Studio) for the latter, but we need to use Sawtooth Script to get the former because it's on another page.  Sawtooth Script returns a blank string when a question is unanswered, so we cannot use

var max = [% Q1_r1_c1 %];


because it would become this invalid JavaScript when Q1 the field is unanswered:

var max = ;


So we instead wrap the Sawtooth Script with JavaScript's Number function.  In the case that the Sawtooth Script returns a regular number, Number won't change it.  But in the case that Sawtooth Script returns an empty string, we end up with this still valid JavaScript (that sets the variable to 0):

var max = Number();


As I'm sure you know, "&&" is JavaScript's logical and operator.  So the body of the conditional will run if both the left and right of the "&&" return true.  The part to the right naturally just checks whether "min" is greater than "max."

The part to the left is a little trickier.  In JavaScript, every possible value is considered either "truthy" or "falsey."  So we can put variables directly into an if statement like this and the conditional will only run if the variable is truthy.  For example, try putting this in your question's footer and see which alerts show up and which don't:

<script>
if (true) {
    alert('true is truthy');
}
if (false) {
    alert('false is truthy');
}
if (5) {
    alert('5 is truthy');
}
if (0) {
    alert('0 is truthy');
}
if ('hello') {
    alert('hello is truthy');
}
if ('') {
    alert('empty string is truthy');
}
</script>


Because we want to know whether Q1 was answered and because 0 is falsey and 1 - 100 are truthy, we can just use "max" by itself in our if statement.
If that's too much, you could just use this instead for readability:

max != 0 && min > max
Great! Thank you very much for your support and the provided explanations.
...