Not dsiplaying submit button until required inputs are filled out it survey-html-form

[jackransomlovell]

Hi everyone, me again!

I am wondering if someone has written code to solve the current problem I am facing, or has any advice as to solve this problem.

I currently have a huge list of questions as part of a survey-html-form plugin. Code below:

type: "survey-html-form", preamble: '<strong>In relation to the previous clip, how do you feel? </strong>', html:'<div><label>Sad</label>'+ '<input id="slider1" type="range" min="0" max="100" step="1" required/></div>'+ '<div><label>Afraid</label>'+ '<input id="slider2" type="range" min="0" max="100" step="1" required/></div>'+ '<div><label>Disgusted</label>'

and then am writing the data as follows:

on_load: function(){ document.getElementById("slider1").oninput = function(){ var val = document.getElementById("slider1").value jsPsych.data.write({sad:val}) } document.getElementById("slider2").oninput = function(){ var val = document.getElementById("slider2").value jsPsych.data.write({afraid:val}) }

I am wondering if anyone knows how to not display the submit button, or display an alert when it is pressed if each input has not been filled out. They are all required.

I am also wondering if I am writing these data to the database in an inefficient way.

Cheers!

[becky-gilbert]

Hi!

The slider responses should save automatically if you give each input element a name attribute, like this:

html: '<div><label>Sad</label>'+ 
  '<input id="slider1" type="range" min="0" max="100" step="1" name="sad" required/></div>'+ 
  '<div><label>Afraid</label>'+ 
  '<input id="slider2" type="range" min="0" max="100" step="1" name="afraid" required/></div>',

Requiring a slider response is a bit trickier. Adding the required attribute works for most input elements, but sliders have a starting value, so they're not empty when the form is submitted, which means that they're treated as though they've been responded to. What you could do is disable the 'next' button when the trial first loads, and then check to see if all of the sliders have been responded to, and if they have then enable the 'next' button.

The way that you do this depends on what you think should qualify as a response. Here's how to do it so that the participant can continue after they've clicked on each slider:

on_load: function() {
  document.getElementById('jspsych-survey-html-form-next').disabled = true;
  var slider1_resp = false;
  var slider2_resp = false;
  function check_responses() {
    if (slider1_resp & slider2_resp) {
      document.getElementById('jspsych-survey-html-form-next').disabled = false;
    }
  }
  document.getElementById('slider1').addEventListener('click', function() {
    slider1_resp = true; // record the fact that this slider has been clicked
    check_responses(); // each time a slider is clicked, check to see if they've all been clicked
  });
  document.getElementById('slider2').addEventListener('click', function() {
    slider2_resp = true;
    check_responses();
  });
}

Or if you don't think clicking on the slider should count as a response, you could try setting up these event listeners for the slider's change or input events instead.

[jackransomlovell]

Thank you so much for your response! I will try to implement this now and then get back to you!