Develop Reference

Enable submit button only when no error is found

I have a simple application in which I only want to enable the calculate button only when no-errors are found (an error is recorded if the value is not a number, or a value is less than 0). I perform a few conditional checks using && and || operator. However, when only one input has been filled properly, without errors, the button is enabled. But, when an explicit wrong value has been specified the button is disabled again.
Code: https://github.com/KaustubhMaladkar/Tip-Calculator
if (!peopleError && !billError) {
submit.removeAttribute("disabled");
}
if (billError || peopleError) submit.setAttribute("disabled", "")
Live site: https://kaustubhmaladkar.github.io/Tip-Calculator/

I would like to thank that #Nestoro for their comments on my question as most, if not all, of my answer is based their comments.
This code will solve the problem
if (!peopleError && !billError && Number(billElem.value) && Number(peopleElem.value)) submit.removeAttribute("disabled");
else submit.setAttribute("disabled", "");

if condition on radio button check/uncheck

I am very new to javascript and i am trying to insert multiple conditions in an if statement.
below my js.
if (($("#chkIs_3").is(":checked")) && ($(document.getElementById("two").checked == false) && $(document.getElementById("four").checked == false)))
{
alert("Please check one vehicle type.");
}
If and only if the id's(two, four) are unchecked the alert has to be shown, but for me even if one of the radio buttons is checked the alert is shown.
Please help me in rectifying the probelem.
id = chkIs_3 is a checkbox
id = (two & four) are radio buttons.

You are mixing native Javascript with jQuery, for a start. You're also doing
$(document.getElementById("two").checked == false)
...which is just weird and not valid. The dollar sign $ is just a normal variable name. In this case jQuery is using it as its main function name.
This is what you need instead (in case you're not aware, the exclamation mark ! means "not" and inverts the result of the $("#two").is(":checked")):
if ($("#chkIs_3").is(":checked") && (!$("#two").is(":checked") && !$("#four").is(":checked")))
{
alert("Please check one vehicle type.");
}

How To Check For Empty Fields In HTML Form With JavaScript

I'm checking a website registration form with JavaScript code and onchange listeners.
Empty fields/spaces need to be checked for first before checking for illegal characters, too long strings, etc.
I've read this.
But for a null string,
if (field.value ==="")
alert("Empty field!");
this will not generate the desired alert.
People at the end of the above thread suggested that recent browser versions might not accept such a statement.
So, how do I sort out empty/blank/ignored fields ?
EDIT 1
I've already tried
if (!field.value)
but it only provides an alert if the user has already typed some characters in the field and immediately deleted them before entering a blank field. It will not provide an alert just by clicking the mouse on it and then tabbing on to the next field. It looks like I may need to assign a null value to these form fields at the outset . . I am using implicit adding of the changeEvent listener, i.e. on seeing a value explicitly assigned to the onchange attribute of an element, it is activated without any addEventListener(..) statement.
Also,
if (field.value.length == 0)
does not seem to produce any alert.
EDIT 2
Sorted, I think.
I was using the JavaScript null field check as part of a field-by-field validation check on a web form.
I was using onchange as the event handler. This was wrong. What was needed here was onblur since in the case of a completely null field (i.e. a field on which nothing had been entered before tabbing away from it), no change has been effected -- and therefore no onchange event occurs that would trigger a JavaScript alert.
Thanks for your efforts.
I was stuck on this one across a couple of weeks and only sorted it with the help of some experimental programming by a more experienced guy at work here.

In this script you can see an alert of your variable value ( a console.log would be lees noisy :)
The use of === is for type check but in your example does not make sense as you are using an empty string
<script>
var field= {};
checkEquality(field);
field.value = "";
checkEquality(field);
function checkEquality(object){
alert(object.value);
if (object.value === "")
{
alert("===");
}
if(object.value == ""){
alert("==");
}
}

You can use bellow code for check all four(4) condition for validation like not null, not blank, not undefined and not zero only use this code (!(!(variable))) in javascript and jquery.
function myFunction() {
var data; //The Values can be like as null, blank, undefined, zero you can test
if(!(!(data)))
{
alert("data "+data);
}
else
{
alert("data is "+data);
}
}

Issues with Alert Boxes javascript

I have two functions i want on my on change event of a combo box, as below:
onchange="border_shaped();borderchk();"
I have two functions that check for a value and display a message box alert if matched.
The code works fine, apart from, whichever function is second in the onchange event, the alert box dissapears after being displayed.
So as above, the borderchk(); function displays the alert message box for all of half a second then the form reloads. See below functions:
function borderchk()
{
var bordercolour = document.designer.border_id.value;
if (bordercolour == 145)
{
alert("Border Colour 145");
}
else if (bordercolour == 10100)
{
alert("Bordercolour 10100");
}
}
function border_shaped()
{
var sizerear1 = document.designer.size_back.value;
var bordercolour1 = document.designer.border_id.value;
if (sizerear1 == 10049 & bordercolour1 == 144)
{
alert("Border shaped");
function borderchk();
}
}

Ok, not sure why your form reloads without seeing the form HTML. I"m guessing it may be submitting but not sure.
Aside from that you have 3 errors in your javascript you posted:
This line if (sizerear1 == 10049 & bordercolour1 == 144)
should be changed to this if (sizerear1 == 10049 && bordercolour1 == 144)
This line function borderchk();
should be changed to this borderchk();
This is not really an error, but I would put all the numbers in double quotes since you are comparing them to STRINGS not NUMBERS. The values you get from form elements are STRINGS not NUMBERS, although == still seems to be working it might be safer to compare STRINGS to STRINGS

Struts2 page not returning correct value from checkbox

I have a form with various pieces of phone information for two phones, including two checkboxes that correspond to a boolean value in my action class. The below javascript is setting the second check box automatically if the user enters two identical phone numbers.
if(phone1 != '' && phone1==phone2)
{
document.getElementById("phone2Type").value = document.getElementById("phone1Type").value;
document.getElementById("phone2Text").value = document.getElementById("phone1Text").value;
document.getElementById("phone2Text").checked = document.getElementById("phone1Text").checked;
if( phone2Type=='CELL' && document.getElementById('phone2Text') != null)
{
document.getElementById('phone2Text').disabled=true;
}
document.getElementById("phone2Type").disabled=true;
}
And the jspx code to go along with it:
<s:checkbox id="phone1Text"
onclick="javascript:enableTextingBox()" cssClass="phoneText"
name="phoneInfo.phone1.textOptionSelected" fieldValue="true"
value="phoneInfo.phone1.textOptionSelected"
disabled="%{!phoneInfo.phone1.textOptionEnabled || inputFieldDisabled}" />
<s:checkbox id="phone2Text"
onclick="javascript:enableTextingBox()" cssClass="phoneText"
name="phoneInfo.phone2.textOptionSelected" fieldValue="true"
value="phoneInfo.phone2.textOptionSelected"
disabled="%{!phoneInfo.phone2.textOptionEnabled || inputFieldDisabled}" />
The problem I'm seeing is that when I use javascript to set phone2Text equal to phone1Text the corresponding boolean (phoneInfo.phone2.textOptionSelected) is not getting set. I'm confused because the above jspx works correctly when I forget the javascript and check the box manually.
Looking at the parameters being sent in the post method, instead I see this:
_checkbox_phoneInfo.phone2.textOptionSelected: "true"
What I would expect to see is:
phoneInfo.phone2.textOptionSelected: "true"
I'm not sure if this is a Struts2 issue or some javascript peculiarity that I'm not familiar with.

Aleksandr M was exactly right.
This is the line that was causing my issues:
document.getElementById('phone2Text').disabled=true;
Disabling a text box causes its value not to be sent in a POST operation.