Develop Reference

Return false statement not working for my form

I have a form and i am validating it by checking if there is no empty field left by putting an alert and returning false so that it remains on the same page and doesn't go to the next page. Although i am getting the alert but still it proceeds to next page.
function fnOnSubmit() {
$('#dataTable input,select').each(function() {
var id = $(this).attr('id');
var val = $(this).val();
if (val == '' || val == 'undefined') {
alert('Please fill all the fields');
return false;
}
});
var flag = '';
$('#dataTable input:not([type=button]),#dataTable select').each(function () {
flag = flag + (this.value) + '~';
quicklink = flag;
});
document.frmmain.quicklink.value = quicklink;
SendTxnRequest('02','QWC');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)">
<option value="">Select</option>
<xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
<xsl:sort order="ascending" select="description" />
<option value="#{description}">
<xsl:value-of select="description" />
</option>
</xsl:for-each>
</select>
</div>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="45" value="" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>

How to display out put when doing calculations in Javascript?

I'm trying to calculate two numbers and display them but when I click Calculate Total nothing happens and no numbers are displayed. I've been looking for a solution for hours now and just can't figure out why nothing happens when I click the button. If someone could help me out a little bit I'd be very grateful!
function calcTotal() {
var intValue1 = parseInt(document.GetElementById('Value1').value);
var intValue2 = parseInt(document.GetElementById('Value2').value);
var strOper = document.GetElementById('operators').value;
if (strOper === '+') {
document.GetElementById('Total').value = intValue1 + intValue2;
else if (strOper === '-') {
document.GetElementById('Total').value = intValue1 - intValue2;
} else if (strOper === '*') {
document.GetElementById('Total').value = intValue1 * intValue2;
} else {
document.GetElementById('Total').value = intValue1 / intValue2;
}
}
document.getElementById('submit').onclick = calcTotal();
<table class="table1">
<tr>
<td class="label">
<label id="lblValue1" for="txtValue1">Value 1:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value1" name="txtValue1" required>
</td>
</tr>
<tr>
<td>
<select name="dropdown" id="operators">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label id="lblValue2" for="txtValue2">Value 2:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value2" name="txtValue2" required>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="label">
<label id="lblTotal" for="txtTotal">Total:</label>
</td>
<td class="control">
<input class="textview" type="text" id="Total" name="txtTotal">
</td>
</tr>
</table>
<table>
<tr>
<td class="label">
<input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" onclick="calcTotal();">
</td>
</tr>
</table>
Thanks in advance!!!!

Your logic behind this code is actually working just fine. You just had a few syntax errors.
There was no closing brackets (}) for the if statement.
Also, you had .GetElementById(). You should've had .getElementById() (the g is supposed to be lowercase).
Also, you don't need to have a .onclick event in the javascript, if you already have on in the html. I removed that for you.
It's fixed in the snippet for you.
function calcTotal() {
var intValue1 = parseInt(document.getElementById('Value1').value);
var intValue2 = parseInt(document.getElementById('Value2').value);
var strOper = document.getElementById('operators').value;
if (strOper === '+') {
document.getElementById('Total').value = intValue1 + intValue2;
} else if (strOper === '-') {
document.getElementById('Total').value = intValue1 - intValue2;
} else if (strOper === '*') {
document.getElementById('Total').value = intValue1 * intValue2;
} else {
document.getElementById('Total').value = intValue1 / intValue2;
}
}
<table class="table1">
<tr>
<td class="label">
<label id="lblValue1" for="txtValue1">Value 1:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value1" name="txtValue1" required>
</td>
</tr>
<tr>
<td>
<select name="dropdown" id="operators">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label id="lblValue2" for="txtValue2">Value 2:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value2" name="txtValue2" required>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="label">
<label id="lblTotal" for="txtTotal">Total:</label>
</td>
<td class="control">
<input class="textview" type="text" id="Total" name="txtTotal">
</td>
</tr>
</table>
<table>
<tr>
<td class="label">
<input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" onclick="calcTotal();">
</td>
</tr>
</table>

There are some error in your code:
Missing {} for if block
Uppercase GetElementById method, note that all function with uppercase are difference, also with css and Id and class.
Redundant //document.getElementById('submit').onclick = calcTotal();
If you want keep last line you can edit to
document.getElementById('submit').addEventListener("click", calcTotal);
and remove onclick="calcTotal();" on button
function calcTotal() {
var intValue1 = parseInt(document.getElementById('Value1').value);
var intValue2 = parseInt(document.getElementById('Value2').value);
var strOper = document.getElementById('operators').value;
if (strOper === '+') {
document.getElementById('Total').value = intValue1 + intValue2;
}
else if (strOper === '-') {
document.getElementById('Total').value = intValue1 - intValue2;
} else if (strOper === '*') {
document.getElementById('Total').value = intValue1 * intValue2;
} else {
document.getElementById('Total').value = intValue1 / intValue2;
}
}
document.getElementById('submit').addEventListener("click", calcTotal);
<table class="table1">
<tr>
<td class="label">
<label id="lblValue1" for="txtValue1">Value 1:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value1" name="txtValue1" required>
</td>
</tr>
<tr>
<td>
<select name="dropdown" id="operators">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label id="lblValue2" for="txtValue2">Value 2:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value2" name="txtValue2" required>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="label">
<label id="lblTotal" for="txtTotal">Total:</label>
</td>
<td class="control">
<input class="textview" type="text" id="Total" name="txtTotal">
</td>
</tr>
</table>
<table>
<tr>
<td class="label">
<input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" >
</td>
</tr>
</table>

Javascript validation for my report page

I have a table where I generate reports. I need to write javascript validation for this one report. Unfortunately, my javascript is very weak. I have the server side validation in place, but I also need to have javascript validation. My page is as follows...
<tr>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1' onSubmit="ValidateForm(this.form);">
<td nowrap="nowrap">
Medicaid Residents
</td>
<td style="width: 5%;">
<table style="width: 5%;">
<tr>
<td style="width: 5%;"><br><br>
<input type="radio" name="choice" value='1' onClick="check_radio()";>All<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='3' onClick="check_radio()";>Communities
</td>
<td style="width: 5%;">
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.State_Code#">#Medicaid_States.State_Code#</option>
</cfloop>
</select>
</td>
<td style="width: 10%;">
<select name="houseprompt1" multiple="multiple" size="10" id="T2">
<cfloop query="Medicaid_Houses">
<option value="#Medicaid_Houses.iHouse_ID#">#Medicaid_Houses.Community# </option>
</cfloop>
</select>
</td>
</tr>
</table>
</td>
<td>
<table style="width: 5%;">
<tr>
<td>
From
</td>
</tr>
<tr>
<td>
<input type="text" id="txtFromDate" name="dateprompt1">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
To
</td>
</tr>
<tr>
<td>
<input type="text" id="txtToDate" name="dateprompt2">
</td>
</tr>
</table>
</td>
<td>
<input type="Submit" name="Go" value="GO" style="font-size: 12; color: navy; height: 20px; width: 60px;">
</td>
</form>
</tr>
The javascript I wrote is...
<script LANGUAGE="JavaScript">
function ValidateForm(form){
if ( ( form.choice[0].checked == false ) && ( form.choice[1].checked == false ) && ( form.choice[2].checked == false ) )
{
alert ( "Please first select a radiobutton" );
return false;
}
elseif ( ( form.choice[1].checked == True ) && ( document.getElementById("T1").value==""))
{
alert ( "Please select a State" );
return false;
}
elseif ( ( form.choice[2].checked == True ) && ( document.getElementById("T2").value==""))
{
alert ( "Please select a House" );
return false;
}
elseif ( ( document.dateprompt1.value =="") && ( document.dateprompt2.value==""))
{
alert ( "please select 'From' and 'To' dates" );
return false;
}
}
</script>
...but it doesn't work. I know the javascript is poorly writen. I would appreciate any help in getting it to work!

Rather than have a series of else statements just have the if statements because they will stop it with the return false, and the green/passed path/action is at the bottom.
function ValidateForm(){
var a = document.forms["MedicaidResidents"]["choice"].value;
var b = document.forms["MedicaidResidents"]["stateprompt1"].value;
var c = document.forms["MedicaidResidents"]["houseprompt1"].value;
var d = document.forms["MedicaidResidents"]["dateprompt1"].value;
var e = document.forms["MedicaidResidents"]["dateprompt2"].value;
if (a == null || a == "") {
alert("Please first select a radiobutton");
return false;
}
if (b == null || b == "") {
alert("Please select a State");
return false;
}
if (c == null || c == "") {
alert("Please select a House");
return false;
}
if (d == null || d == "" && e == null || e == "") {
alert("please select 'From' and 'To' dates");
return false;
}
return true;
}
<tr>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1' onSubmit="return ValidateForm();">
<td nowrap="nowrap">
Medicaid Residents
</td>
<td style="width: 5%;">
<table style="width: 5%;">
<tr>
<td style="width: 5%;"><br><br>
<input type="radio" name="choice" value='1' onClick="check_radio()">All<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()">States<br><br>
<input type="radio" name="choice" value='3' onClick="check_radio()">Communities
</td>
<td style="width: 5%;">
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.State_Code#">#Medicaid_States.State_Code#</option>
</cfloop>
</select>
</td>
<td style="width: 10%;">
<select name="houseprompt1" multiple="multiple" size="10" id="T2">
<cfloop query="Medicaid_Houses">
<option value="#Medicaid_Houses.iHouse_ID#">#Medicaid_Houses.Community# </option>
</cfloop>
</select>
</td>
</tr>
</table>
</td>
<td>
<table style="width: 5%;">
<tr>
<td>
From
</td>
</tr>
<tr>
<td>
<input type="text" id="txtFromDate" name="dateprompt1">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
To
</td>
</tr>
<tr>
<td>
<input type="text" id="txtToDate" name="dateprompt2">
</td>
</tr>
</table>
</td>
<td>
<input type="Submit" name="Go" value="GO" style="font-size: 12; color: navy; height: 20px; width: 60px;">
</td>
</form>
</tr>
https://jsbin.com/kawewerisu/1/edit?html,js,output

AngularJs : Show Hide Fields According Select Value

I want to show hide form fields on the basis of Select Value. e.g my form has 5 text fields and 1 select option field In those fields 4 fields are depended on select value. if i select cloth then cloth type and cloth value remains, lether type and lether value hide. but when i select Bags lether type and lether value remain else hide. i am trying some condition and ng-class="{'hideCheck': isHideCheck}" model but it behaving abnormally.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>

use ng-hide to hide the element. ng-class is used to alter css.
I changed your code, it will hide element valus and type when option checking is selected, just an example for you, not implement your feather. you would like to read https://docs.angularjs.org/api/ng/directive/ngHide.
by the way , ng-repeat is a good way to do table things.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>

Using jQuery to find the selected value between the td and the div

The function below is used to find the reference number then compare it, then if the corresponding value is found the cell values are modified according to the input boxes. This works great, however, how do I go about modifying the existing function below to capture the value between the
<td><div>this value here</div></td>
Here is the Javascript in question:
function changeit() {
var valueToFind = $('#number').val();
$('#data > tbody> tr').each(function(index) {
console.log(index);
var firstTd = $(this).find('td:first');
if ($(firstTd).text() == valueToFind) {
console.log("found: " + index + ":" + valueToFind);
$(this).find('td:eq(1)').text($('#item').val());
$(this).find('td:eq(2)').text($('#color').val());
}
})
}
Here is the HTML Markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
</head>
<body>
Number:*
<input type="text" id="number">
<br> Items:
<input type="text" id="item">
<br> Color:
<input type="text" id="color">
<br>
<br>
<input type="button" onclick="changeit()" value="save">
<br>
<table id="data" style="width: 100%" cellspacing="1" class="style1">
<tr>
<td>
<div><b>Number*</b></div>
</td>
<td>
<div><b>items</b></div>
</td>
<td>
<div><b>Colors</b></div>
</td>
</tr>
<tbody>
<tr>
<td>
<div>
<div>123</div>
</div>
</td>
<td>
<div>Boats</div>
</td>
<td>
<div>red</div>
</td>
</tr>
<tr>
<td>
<div>456</div>
</td>
<td>
<div>Vehicles</div>
</td>
<td>
<div>blue</div>
</td>
</tr>
<tr>
<td>
<div>789</div>
</td>
<td>
<div>Motorcycles</div>
</td>
<td>
<div>green</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

change
var firstTd = $(this).find('td:first');
to
var firstTd = $(this).find('td:first div');