No, using attr() is fine in this case. His code actually works if you try it out on a form.

The problem is that he's missing the closing brackets. It should be:

$(document).ready(function() {
    $('.Submit').attr("disabled", "disabled");
});

Good catch Ege! Didn't see that.

Awesome! This worked! Would you be able to help with something else now? I need the submit button to be re-enabled if something else happens.

My original code was as follows:

$(document).ready(function () {

  $('.JobNumber, .confirm').on('change input', function () {
        
        if ($('.JobNumber input').val() != $('.confirm input').val()) {
            $('.Submit').attr("disabled", "disabled");                   
        }
        else            
        $('.Submit').removeAttr('disabled');
 
    })
})

This makes the submit button disabled if the JobNumber was incorrect, and did not match with the "confirm" field. This would only disable if the user entered something in the field, otherwise they could submit by just leaving it blank. I've decided to make the submit button default to disabled when the webpage loads, unless these two values match. How would I go about altering the above code to make this work?

Thanks again for your help!

Try this:

$(document).ready(function () {

  //disable the submit button when page loads
  $('.Submit').attr('disabled', 'disabled');

  //validate inputs every time they change, and enable submit if validation passes
  $('.JobNumber, .confirm').on('change', 'input', function () {
        if ($('.JobNumber input').val() == $('.confirm input').val()) {
           $('.Submit').removeAttr('disabled');                  
        } else {
           $('.Submit').attr('disabled', 'disabled');
        }
    });
});

So I actually tried this, but it doesn't seem to be working for me. Not sure why.

Try changing line 7 to:

$('.JobNumber input, .confirm input').on('change', function () {

This is assuming you have JobNumber and confirm classes added to the fields in the form designer.

The submit button is not disabled when the webpage opens.

Running into a meeting now, but let me test it this afternoon and get back to you.

Sounds great.

So I figured something out I think... I changed "change" to "blur" and changed line 7 back to how it was:

$(document).ready(function () {
 
    //disable the submit button when page loads
      $('.Submit').attr('disabled', 'disabled');
 
      //validate inputs every time they change, and enable submit if validation passes
    $('.JobNumber, .confirm').on('blur', 'input', function () {
        if ($('.JobNumber').val() == $('.confirm').val()) {
              $('.Submit').removeAttr('disabled');
        }
    });
});

This disables the submit button when the webpage loads. The problem is that the submit button is enabled whenever any value is entered into the JobNumber... So it's not checking to see if it matches .confirm.

Can you show us the code you have in the "Javascript" section under the "CSS and Javascript" tab?

$(document).ready(function () {
 
	//disable the submit button when page loads
  	$('.Submit').attr('disabled', 'disabled');
 
  	//validate inputs every time they change, and enable submit if validation passes
	$('.JobNumber, .confirm').on('blur', 'input', function () {
		if ($('.JobNumber').val() == $('.confirm').val()) {
      		$('.Submit').removeAttr('disabled');
    	}
	});
});

I've tried the code above, and the code below:

$(document).ready(function () {
 
  //disable the submit button when page loads
  $('.Submit').attr('disabled', 'disabled');
 
  //validate inputs every time they change, and enable submit if validation passes
  $('.JobNumber, .confirm').on('change', 'input', function () {
        if ($('.JobNumber input').val() == $('.confirm input').val()) {
           $('.Submit').removeAttr('disabled');                  
        } 
    });
});

Changing "change" to "blur" on line 7 disabled the submit button when the page loaded, but then re-enabled it as soon as anything was entered into JobNumber.

Ah, sorry. I see the issue now. I wasn't thinking straight.

This worked for me:

$(document).ready(function() {
  $('.Submit').attr("disabled", "disabled");
  
  $('.JobNumber').on('change', 'input', function() {
    if ($(this).val() == $('.confirm input').val()) {
      $('.Submit').removeAttr('disabled');
    } else {
      $('.Submit').attr("disabled", "disabled");
    }
  });
  
  $('.confirm').on('change', 'input', function() {
    if ($(this).val() == $('.JobNumber input').val()) {
      $('.Submit').removeAttr('disabled');
    } else {
      $('.Submit').attr("disabled", "disabled");
    }
  });
});