How to Enable/Disable Table Add Button ?

Post any questions you have about using the Verj.io Studio, including client and server-side programming with Javascript or FPL, and integration with databases, web services etc.

Moderators: Jon, Steve, Ian, Dave

juned_seskoad
Ebase User
Posts: 35
Joined: Mon Jul 14, 2014 11:55 pm

How to Enable/Disable Table Add Button ?

#1

Postby juned_seskoad » Sun Aug 31, 2014 8:22 pm

Dear All,

I want to add behavior of table Add button, if all requirement fields <> null then table Add button will enable and if all field empty (null) then table add button will disable

How to Enable/Disable Table Add Button ?

Regards

Juned
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

#2

Postby Jon » Mon Sep 01, 2014 8:40 am

Juned,

You can do this using jQuery, something like this:

1. Use Html Element Properties to apply a class to all the input fields (Editor Input tab!) that you want to check, ("check1" in the following code).

2. Similarly apply an id to the button you want to enable/disable ("mybutton" in the following code).

3. Then add this code to the ready event of one of the controls higher on the page - in my example I added this to the Panel Control which contains the fields and the button:

Code: Select all

// Disable button initially
$&#40;"#mybutton"&#41;.prop&#40; "disabled", true &#41;;

// Bind the validateInput function to key presses of our input fields
$&#40; ".check1" &#41;.bind&#40; "keyup", function&#40;&#41; 
&#123;
  validateInput&#40;&#41;;
&#125;&#41;;

function validateInput&#40;&#41;
&#123;
	var allOk = true;
	$&#40; ".check1" &#41;.each&#40;function&#40;&#41; 
	&#123;
	  var v = $&#40;this&#41;.val&#40;&#41;;
	  if &#40;v == null || v.length == 0&#41;
	  &#123;
	  	allOk = false;
	  &#125;
	&#125;&#41;;
	$&#40;"#mybutton"&#41;.prop&#40; "disabled", !allOk &#41;;
&#125;
This example is based on simple input fields with a button. You might have to amend this a bit if you are using tables.

Regards
Jon
0 x

juned_seskoad
Ebase User
Posts: 35
Joined: Mon Jul 14, 2014 11:55 pm

#3

Postby juned_seskoad » Mon Sep 01, 2014 8:18 pm

Dear Jon,

Thanks for your reply, But I cannot add an "id" on "Table Add button", cause "Add button" is part of table control.

please advice me

Regards

Juned
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

#4

Postby Jon » Tue Sep 02, 2014 6:51 am

You can add an id to the add row button by selecting the table, then right click and select Html Element Properties, then select the Add Row Button tab. Alternatively don't use the Ebase add row button, just add your own button above or below the table. I think you will find the task difficult with a table as the CSS class will be applied to all rows and therefore you will be checking all rows for null values - this might be what you want.

The alternative of course is just to make all the table columns mandatory then Ebase will issue a message if a required value is missing.

Regards
Jon
0 x

juned_seskoad
Ebase User
Posts: 35
Joined: Mon Jul 14, 2014 11:55 pm

#5

Postby juned_seskoad » Tue Sep 02, 2014 8:52 am

Hi Jon,

Thanks for your reply and I will try for it

Regards,

Juned
0 x


Who is online

Users browsing this forum: No registered users and 22 guests