Disable submit button on CF Form and CC Connection

I have a connection that lists out records from a table. Each row in the table has a field named "verified" which is set to 1 or 0. On the front end of my site, this connection is displayed using a CF form so that I can include a submit button. The connection displays a user's records from the table, and can contain 1-4 rows.

I would like to disable to the submit button on the CF form until all records displayed for the user have the "verified" field set to 1 (meaning the user has verified each record in the list). I know the JS code to enable/disable the button. What I don't know is how to base it on the "verified" field. I assume I need to execute a query and look for all 1's (or no 0's), but I am lost how to do this.

Does anyone have an idea on this?

Thanks!!!!
Rick

Here's what I have so far:

On the CF form, I am using some custom code to run a query that sums up the total of the "verified" field for the user's records. The code also counts the number of records ion the table for the user. Then, the sum of the "verified" column will equal the number of records for the user once all records have been marked as verified.

I am putting these values (the sum of the verified column and the number of records) into hidden fields on the form. This is working correctly. Then in the "On formshow" event in the form (which is the event being called in the CC connection) I am executing the following JS code:

window.addEvent('domready', function() {
   $('sendit').disabled = true;
   if ( $('number_verified').value == $(trips').value ) {
       $('sendit').disabled = false;
    } else {
       $('sendit').disabled = true;
    }
  });
});

where "sendit" is the ID of the submit button. However, it is not working. The submit button is always enabled. This is where I am stuck...

I did not have the field ID's referenced properly. Now I have this:

window.addEvent('domready', function() {
   $('sendit').disabled = true;
   $('numverified').addEvent('change', function() {
        if ( $('numverified').value == $('numtrips').value ) {
            $('sendit').disabled = false;
            } else {
            $('sendit').disabled = true;
        }
  });
});

Now the submit button starts out disabled, but does not enable even after the records have all been set to verified. I suspect that the addEvent 'change' function may need to be something different, but I don't know what it should be.

Got it working with the following code:

window.addEvent('domready', function() {
   $('sendit').disabled = true;
        if ( $('numverified').value == $('numtrips').value ) {
            $('sendit').disabled = false;
            } else {
            $('sendit').disabled = true;
        }
});

😀 😀 😀

Hi Rick,

You don't say what the 'verified' elements are in the form. I'd expect them either to be checkboxes or radio buttons if you are verifiying a yes/no choice.

The code in your last post will only run when the page is loaded, it isn't triggered when any of the 'verified' elements change. For that you'd need something more like your first version.

If it helps, here's an excerpt from some code I wrote recently to check yes/no values set with radio buttons on a form with an unknown number of sub-forms (on sliders as it happens). Here we are checking to make sure that a value (either 'yes' or 'no' is set).

window.addEvent('domready', function() {
  var radios;
  radios = $$('#chronoform_form_name input[type=radio]');
  radios.each(function(el) {
    el.addEvent('click', checkDisabled);
  });
  checkDisabled();

  function checkDisabled() {
    var submit_disabled, i, submit_value;
    submit_disabled = false;
    for ( i = 0; i < radios.length; i = i + 2 ) {
      if ( !(radios[i].checked || radios[i + 1].checked) ) {
        submit_disabled = true;
        continue;
      }
    }
    if ( submit_disabled ) {
      $('submit_btn').setProperty('disabled', true);
    } else {
      $('submit_btn').setProperty('disabled', false);
    }
  }
});

The var radios is set to be an array of all the inputs with type='radio' - this happened to work for this form, if you have other radio buttons then the selector would need to be tweaked to match.

Bob

PS Looking at it I see that I could replace

    if ( submit_disabled ) {
      $('submit_btn').setProperty('disabled', true);
    } else {
      $('submit_btn').setProperty('disabled', false);
    }

with

$('submit_btn').setProperty('disabled', submit_disabled);

Bob,

Thanks for your answer, and I am sorry that I have been swamped with other stuff and haven't responded!!

The code I had posted was working because the CC list was showing the 'verified' column using the Joomla binary field radio button. Each time that button is pressed it reloads the page, so the Submit button toggles.

However, I am going to try to implement your changes to ensure it functions as I need!!

Rick