Question

Javascript: Hide submit button

Forms

Updated May 13, 2022

asked on May 13, 2022 • Show version history

Hello,

I have a field with Class dep & I want that when the field is empty, the Submit button should be hidden,

I have this code, but it's not working.

the field is Single Line & is Read only populated via Lookup.

Can someone please help?

$(document).ready(function() {

 $('.Submit').hide();

  $('.dep input').change(function(){

    if(($('.dep input').val() != "")   {

      $('.Submit').show();

      }

    else   {

      $('.Submit').hide();

      }
});
  
 

});

Many Thanks!

0 0

Answer

SELECTED ANSWER

replied on May 13, 2022

What is the field type of the field you are working with? The first example below works with an input field the second works with a radio button field.

//Use with Input field
var $submit = $('.Submit');
$submit.hide();
$("#Field146").on("change", function () {
	if ($(this).val() != "") {
		$submit.show();
	} else {
		$submit.hide();
	}
});

//Use with radio button
var $submit = $('.Submit');
    //$submit.hide();
   $("#Field107").on("change", function () {
	    if ($('#q107 input[value="No"]:checked').length > 0) {
		            $submit.hide();
	} else {
		            $submit.show();   
	}
});
});

Change the Field146 or Field107 values as needed.

0 0

Replies

replied on May 13, 2022 • Show version history

I haven't tested your code, but it looks liked you have too many opening ( on line 7.

If you open the browser console when your form is running, it will indicate that kind of error.

1 0

replied on May 13, 2022

Thanks Blake,

It's single line & in table that's why I used class.

What would be the syntax for .dep class?

0 0

View 1 previous reply

replied on May 13, 2022

Sonia,

The table is probably what's complicating things.

If you have more than one row, you'll need to change your code to iterate through each one to check for "any" blank values.

Also, when you have a table that gets rows from a lookup or added by a user, you have to do event handlers differently because $(document).ready fires when the form finishes loading, but those fields don't exist yet so the handlers won't be assigned to them.

See this post for more info on how to deal with that particular issue

Table and Collection JavaScript Event Handlers - Laserfiche Answers

0 0

replied on May 13, 2022

100% what he said.

0 0

replied on May 13, 2022

It has only one row, fixed

0 0

replied on May 13, 2022 • Show version history

If it is one fixed row, then the code sample Blake provided for a Single Line field should do what you want.

Just replace "#Field146" with ".dep input" like so

$(document).ready(function(){
  var $submit = $('.Submit');
  $submit.hide();
  
  $('.dep input').on('change', function(){
	if ($(this).val() != '') {
		$submit.show();
	} else {
		$submit.hide();
	}
  });
});

If you're less concerned with readability and want something compact, you could also do the following:

$(document).ready(function(){
  $('.Submit').hide();
  
  $('.dep input').on('change', function(){
    $('.Submit').toggle($(this).val() != '');
  });
});

(If either of these work, you should mark Blake's as the answer).

3 0

replied on May 13, 2022

Thanks Blake & Thanks Jason!!!

0 0

replied on May 13, 2022

The Smith's are always here to help

1 0

replied on May 13, 2022

& we are always here to ask!

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript: Hide submit button

Answer

Replies

Sign in to reply to this post.