Disabled or remove onClick attributes of the button if a certain field is empty in SuiteCRM

Question

Good Day!

I am planning to add a javascript where it will remove the onclick attribute if a certain field is empty. BTW I modify my code because I use different approach on this:

First I added a after_ui_frame logic hook and call the javascript using the custom logic hook.

        $randomNumber = rand();
        echo '<script type = "text/javascript">
        var script  = document.createElement("script");
        script.type = "text/javascript";
        script.src  = "custom/include/CustomLogicHook/clearFields.js?v=' . $randomNumber . '";
        document.body.appendChild(script);
        </script>';

And my custom JS

$("#btn_custom_city_c").attr("disabled", true);
$("#btn_custom_barangay_c").attr("disabled", true);
$('#dvt2_province_id_c').keyup(function() {
    if ($(this).val().length !=0)
        $("#btn_custom_city_c").attr("disabled", false);
    else
        $("#btn_custom_city_c").attr("disabled", true);
});

The disabled/enabled button works but it won`t work on relate field. This codes only works on a normal field

use `$('#custom_province_c').on('keypress', function()...` instead of `$('#custom_province_c').on('input change', function()...` — maddy23285, Nov 04 '22 at 04:04
I think this code is generated by a builder or something. right? what a mess. I will try to add an answer with a simple code for what you asked. — Mad7Dragon, Nov 04 '22 at 08:07
@ethry, I want the certain button to be disabled if one of the required field is empty. — Clinton Canarias, Nov 06 '22 at 04:09

Mad7Dragon · Answer 1 · 2022-11-07T00:55:57.600

3

I think this code is generated by a builder or something. right? what a mess!

Anyway, you can check if the input value length is == 0. without any jquery. but be aware that:

1- function triggers after you leave the input after the change.

2- white space means that the input value length is more than 0

let changeListener = document.getElementById("input").addEventListener("change", function() {

    let input = document.getElementById("input");

    if (input.value.length == 0) {
        document.getElementById("btn").disabled = true;
    } else {
        document.getElementById("btn").disabled = false;
    }
})

<input type="text" id="input">
<button type="button" id="btn">button</button>

Edit: regarding your comment:

yes, you can start the button disabled. just disabled it on load out of the function.

document.getElementById("btn").disabled = true;

let changeListener = document.getElementById("input").addEventListener("change", function() {

  let input = document.getElementById("input");

  if (input.value.length == 0) {
    document.getElementById("btn").disabled = true;
  } else {
    document.getElementById("btn").disabled = false;
  }
});

<input type="text" id="input">
<button type="button" id="btn">button</button>

edited Nov 07 '22 at 00:55

answered Nov 04 '22 at 08:35

Mad7Dragon

1,237
1
10
21

hello it is possible the button will be automatically disabled once the page is load and the function will trigger everytime their is changes on the input field? – Clinton Canarias Nov 07 '22 at 00:28
@ClintonCanarias you mean you want the button to start disabled? Yes, you can. check the update in the answer. – Mad7Dragon Nov 07 '22 at 00:56
Can I ask you something. Since I am not familiar with javascript I would like to ask why you use let instead of var? btw I will update my codes. Since this modification can be add on SuiteCRM. I was able to disabled the button upon loading the screen. Now my problem is how I am going to enabled it. – Clinton Canarias Nov 07 '22 at 02:30
@ClintonCanarias In this simple code, it doesn't matter what to use, let or var. but if the code requires some scoping specifications, then you will use `let` or `var` according to the scope requirement. to learn more about the difference between them you can read [here](https://stackoverflow.com/a/11444416/6467902). --- what do you mean by how to enable it? in the second snippet, it will start disabled then when the user changes the input, if the input is empty it will stay disabled but if there is a value in the input, then it will be enabled. please try the code and see how it works. – Mad7Dragon Nov 07 '22 at 04:00
@Mad7Dragaon, Its a little bit complicated because I am going to implement this one on a SuiteCRM. The field that I am looking for was a hidden field. The codes will only works for the regular field but if it is hidden its not working. – Clinton Canarias Nov 07 '22 at 06:11
@ClintonCanarias I don't know what you mean by hidden field!!!???. and I'm not familiar with SuiteCRM. and you didn't mention SuiteCRM in your question, but I hope my answer will help you solve the problem. good luck. – Mad7Dragon Nov 07 '22 at 07:02
I use your logic. Its a little bit complicated since your are not familiar with suitecrm, I forgot to add suitecrm on my title page. – Clinton Canarias Nov 07 '22 at 07:57

score 0 · Accepted Answer · answered Dec 09 '22 at 03:36

just incase you are working with Suite CRM I was able to implement the behavior I want on my buttons.

I added this code below:

if($('#province_c').val() == " "){
    $("#btn_custom_city_c").attr('disabled', true);
}else{
    $("#btn_custom_city_c").attr('disabled', false);
}
var inputName = "input[name='province_c']";
YAHOO.util.Event.addListener(YAHOO.util.Selector.query(inputName), 'change', 
function(){
    $("#btn_custom_city_c").attr('disabled', false);
});

for more information you can check at Suite CRM community click Here

Disabled or remove onClick attributes of the button if a certain field is empty in SuiteCRM

2 Answers2