We Keep Coding

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

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

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>

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

How stop function and display error message if one value is missing in JavaScript?

I'm designing a website and I need the below function to stop when one Input value is missing and display the error message.
My HTML code for the form:
<form action="http://localhost/qurantest/" method="get" target="_blank" id="my-form">
<input type="text" name="reference-number" id="reference-number" value="" class="6u 12u$(xsmall)" placeholder="enter chapter"/>
<input type="text" name="reference-number" id="reference-number2" value="" placeholder="enter verse"/>
<br>
<input type="submit" value="GO" class="button big special" />
</form>
The JavaScript function is;
<script type="text/javascript">
var form = document.querySelector('#my-form'),
text_field = document.querySelector('#reference-number');
text_field2 = document.querySelector('#reference-number2');
function submitHandler(){
// build the new url and open a new window
var url = form.action + text_field.value + '/' + text_field2.value;
window.open(url);
// prevent the form from being submitted because we already
// called the request in a new window
return false;
}
// attach custom submit handler
form.onsubmit = submitHandler;
</script>
What I want is: To stop the function and display an error message when 1 of the two "inputs" (text_fields) is empty. Also, I want to assign maximum values for each input. (In my case I want the 1st input field to contain only numbers between 1-114 and the 2nd input field to contain only numbers from 2-286), and this specific function opens in a new window as the above code suggests, I want the function to open in the current window itself. How can I do this is JavaScript?
I'm new to JS so any help would be appreciated. Thanks in Advance!!

Check this one.
<script type="text/javascript">
var form = document.querySelector('#my-form');
var text_field = document.querySelector('#reference-number');
var text_field2 = document.querySelector('#reference-number2');
function submitHandler(){
if(!text_field.value || !text_field2.value) {
console.log("error message here");
return;
}
var url = `${form.action}${text_field.value}/${text_field2.value}`;
window.open(url);
return;
}
form.onsubmit = submitHandler;
</script>

Try this
<script type="text/javascript">
var form = document.querySelector('#my-form'),
text_field = document.querySelector('#reference-number');
text_field2 = document.querySelector('#reference-number2');
function submitHandler(){
// checks values
if(text_field.value == "" || text_field2.value == "") {
alert("Message");
return false;
}
// build the new url and open a new window
var url = form.action + text_field.value + '/' + text_field2.value;
window.open(url);
// prevent the form from being submitted because we already
// called the request in a new window
return false;
}
// attach custom submit handler
form.onsubmit = submitHandler;
</script>

HTML Form - successfully post form but do not leave the page (NO-JQUERY)

I have a simple form inside a Pop up window. In my form I have only one checkbox with a label for the checkbox. What I have done is when the user clicks on the label or checkbox, the submit button to appear and the user will be able to submit the form. Moreover, I would like when the user press the submit button to collect the information in my database and then to close the pop up window and continue on the website normally without leaving. I am not sure how to achieve that but this is what I have done until now. Please I need some help to achieve this.
1) I want to submit the form successfully and collect the information to my database.
2) I want to close the PopUp Window.
3) I do not want to leave the page.
Thanks.
HTML:
<div id="popUp">
<form id="myform" method="post" action="somepage.php" onsubmit="return closeWindow">
<input type="checkbox" id="checkbox" name="checkbox"><label for="checkbox">Click to show Submit</label><br>
<input type="submit" id="submit-button" value="Submit" style="display:none">
</form>
</div>
CSS:
#popUp {
height:400px;
border:1px solid #000;
background:#e2e2e2;
}
JS:
var checkBox = document.getElementById("checkbox");
var submitButton = document.getElementById("submit-button");
var PopUpWindow = document.getElementById("popUp");
function checboxFunc() {
if (checkBox.checked) {
submitButton.style.display = "block";
} else {
submitButton.style.display = "none";
}
}
checkBox.addEventListener("click", checboxFunc);
function closeWindow() {
PopUpWindow.style.display = "none";
return false;
}
submitButton.addEventListener("click", closeWindow);

Although you could use AJAX, a simpler approach would be to put the form in another HTML file and load it into an iframe and set the form's target="name_of_iframe".
You will also have to get rid of the onsubmit attribute and instead add an event listener. Like so.
yourpage.html
<iframe id="popUp" name="popup" src="path/to/form.html"></iframe>
form.html
<form id="myform" method="post" action="somepage.php" target="popup">
<input type="checkbox" id="checkbox" name="checkbox"><label for="checkbox">Click to show Submit</label><br>
<input type="submit" id="submit-button" value="Submit" style="display:none">
</form>
yourpage.js
var checkBox = document.getElementById("checkbox");
var submitButton = document.getElementById("submit-button");
var PopUpWindow = document.getElementById("popUp");
var form = document.getElementById("myform");
function checboxFunc() {
if (checkBox.checked) {
submitButton.style.display = "block";
} else {
submitButton.style.display = "none";
}
}
checkBox.addEventListener("click", checboxFunc);
function closeWindow() {
PopUpWindow.style.display = "none";
return false;
}
form.addEventListener("submit", closeWindow);
When this is submitted, the somepage.php will load, but only inside the popup, wich will be hidden anyway. So you will have the desired effect.

Ajax was invented to solve this. Jquery wraps it nicely like:
checkout $.post
Two suggestions, if you are doing this type of request, dont complicate matters and use the FORM tag, just use the inputs.
Secondly send JSON instead of form data, can be messy trying to get in the correct format.
So your client side would look something like this:
var req_obj = {
"id":"ENTER_DATA",
"params":{
"param_name1":"param_val1",
"param_name2":"param_val2"
}
};
$.post(
APP.ActionUrl,
JSON.stringify(req_obj),
function(data){ //this is the callback,do your confirmation msg },
"json");
SERVER:
$req_obj = json_decode(get_post_data());
$param1 = $req_obj->params->param_name1;
function get_post_data(){
$buf = '';
if(($h_post = fopen('php://input','r'))){
while(!feof($h_post))
$buf .= fread($h_post,1024);
fclose($h_post);
return $buf;
}
else
return false;
}

How to get validation of input field and button to play nice?

I have the following input field:
<input id="filename" type="text" name="filename" onchange="checkfilename()"></input>
A button:
<button onclick="openSave()">Save</button>
I have the following functions:
function openSave()
{
var filename = document.getElementById('filename').value;
if(!filename || filename.trim()==="")
{
return;
}
else
{
//Do some work to save file
mySaveFunction();
}
}
function checkfilename()
{
var input = document.getElementById('filename');
input.value = input.value.trim();
var vals = input.value;
if(!vals || vals==="")
{
clearerrormessage();
var statusMessageDiv = document.getElementById("errormessage");
var errorTextNode = document.createTextNode("You forgot to specify a filename.");
statusMessageDiv.appendChild(errorTextNode);
}
else
{
clearerrormessage();
}
}
When I input nothing in the input field, and leave, or click on the button, it works as expected and the error message is displayed and mySaveFunction() is not called.
Immediately after this, if I go back to the text field, enter some text, and then IMMEDIATELY click on the button, the error message is cleared, but mySaveFunction() is not called! I have to click on the button one more time to get mySaveFunction() to execute! Why does this happen and how can I fix it? The bug repros every time.

It works for me look at this FIDDLE and look at the javascript console
<input id="filename" type="text" name="filename" onchange="checkfilename()"></input>
<button onclick="openSave()">Save</button>
<div id="errormessage"></div>
function openSave(){
var filename = document.getElementById('filename').value;
if(!filename || filename.trim()==="") {
return;
}else{
//Do some work to save file
console.log("save");
}
}
function checkfilename(){
var input = document.getElementById('filename');
input.value = input.value.trim();
var vals = input.value;
if(!vals || vals===""){
console.log("clear message")
document.getElementById("errormessage").innerHTML = "";
var statusMessageDiv = document.getElementById("errormessage");
var errorTextNode = document.createTextNode("You forgot to specify a filename.");
statusMessageDiv.appendChild(errorTextNode);
}else{
document.getElementById("errormessage").innerHTML = "";
}
}

I figured out the problem:
As I was updating the dom while I was clicking on the button, the button moves away from the pointer just enough so that the "click" didn't complete.
The second time I was clicking on the button, the dom wasn't changing, so the click could complete.
I fixed it, by ensuring my button was not moving when I clicked on it.

JavaScript userinput URL without holding my domain

I'm having a little trouble with JavaScript. My problem is that I have a user input box (where a user would enter a URL) - and a button (when clicked, it will open the URL that the user has typed in the input box).
Here is my code:
<input type="text" id="userurlbox"/>
<button type="button" onClick="myFunction()">Open URL</button>
<script>
function myFunction()
{
var x = document.getElementById('userurlbox').value;
if (x == "")
{
alert('Please enter a URL');
}
else
{
window.open(x ,'_blank');
}
</script>
The problem is that the URL opens like this:
http://mywebsite.com/USERURL
I want it to open like this:
http://USERURL

This code only adds the 'http://' if it is not already included:
function myFunction() {
var x = document.getElementById('userurlbox').value;
if (x == "") {
alert('Please enter a URL');
}
else {
if (x.substr(0,4).toLowerCase() === 'http') { // only test first 4 characters as we want to allow both http:// and https://
window.open(x ,'_blank');
}
else {
window.open('http://'+x);
}
}
}

I just tested, you need to include the 'http://' in the window.open
<input type="text" id="userurlbox"/>
<button type="button" onClick="myFunction()">Open URL</button>
<script>
function myFunction(){
var x = document.getElementById('userurlbox').value;
x = x.replace('http://'.''); // remove http:// just in-case it is there
if (x == "")
{
alert('Please enter a URL');
}
else
{
window.open('http://' + x ,'_blank');
}
}
</script>

I'm not sure if you can override the relative/absolute url behavior just using the window.open function, so a viable solution would be to check if the url begins with https?:// and prepend '//' if it does not. A url starting with // will always be treated as absolute.