We Keep Coding

ASP.NET UserControl javascript is not loading HTML to its variable

I have created UserControl that I wish to use on multiple pages. This control contains classic javascript but for some reason it will not load element to a variable. Client IDs look ok.
This is button that activates javascript:
<input type="submit" name="ctl00$ContentPlaceHolder1$ContactList$btn_NewContact" value="Potvrdit" onclick="javascript:return CheckContactName();" id="ContentPlaceHolder1_ContactList_btn_NewContact" class="MyButton" style="color:white;" />
This is the textbox:
<input name="ctl00$ContentPlaceHolder1$ContactList$con_fullname" type="text" id="ContentPlaceHolder1_ContactList_con_fullname" class="MyTextBox" />
This is Javascript function:
function CheckContactName() {
name = document.getElementById("ContentPlaceHolder1_ContactList_con_fullname");
if (name.value == '' | name.value == null) {
return false;
}
UploadContact();
return true;
}
Now, when I debug this in a console the name.value is undefined. The name variable itself is just "[object HTMLInputElement]".
So no matter what is in that textbox, this function is always false. I also checked all IDs inside final client page and there are no duplicates. Can you tell why this is? Thanks.

I supose you set the input's value in code behind right?
Anyways, you might try using document.querySelector, and it seems that your logical operator is wrong, you are using | instead of ||.
function CheckContactName() {
let name = document.querySelector(
'#ContentPlaceHolder1_ContactList_con_fullname'
);
if ((name.value == '') || (name.value == null) || (name == undefined)) {
return false;
}
UploadContact();
return true;
}

Changed name to cname.
It seems that when you use control on a page that already contains some JavaScript function and that function declares variable with the same name as the one in usercontrol - this happends.

How to handle alphanumeric and null in JavaScript?

We are facing an issue on handling null, because if the value is null, it is not reaching the server. Below is the code snippet:
<input ... onchange="return checkEmpty(this);" />
And the JavaScript:
function checkEmpty(value) {
alert("Empty Check() "+value);
if (myTrim(value.length == 0)) {
alert("please Enter Value!"+ value +" value");
return false;
}
return true;
}
We are trying to display one popup for null value and the request should go to the server, but some exception is occurring we are unable to identify it and the request is not coming to server.

You can do this:
if (variable == null) {
// do something
}
--which is 100% equivalent to the more explicit but less concise:
if (variable === undefined || variable === null) {
// do something
}

While there are ways to solve this specific problem (and the other answer(s) manage to answer that), I'll try to address a more general one.
What you essentially want is the form control to not be empty. Well, you don't need JavaScript for that at all
<input ..... required>
That will prevent the form from submitting unless the required field was filled.
<form>
Try to submit me empty! <input required>
<button>I dare you!</button>
</form>

AngularJS How to dynamically get the ng-model value of inputs in a form or whatever

I have a form containing inputs with a ng-model defined for each of them :
<form>
<input type="date" ng-model="dateFilterInput" id="dateFilter" class="...">
<select class="..." id="authorFilter" ng-model="authorFilterInput">
...
</select>
<input type="text" class="..." id="categoryFilter" ng-model="categoryFilterInput">
</form>
As my form could get dynamically further inputs (using ng-repeat), I want to check in each input if the value is empty using ng-model dynamically
I'm doing a foreach loop for each inputs in the form, and calling this function with the ng-modal name (string) as parameter :
$scope.isEmpty = function(ngModelInput) {
if(modelInput == "" || typeof modelInput == 'undefined') {
//do something if field is empty...
}
};
or
$scope.isEmpty = function(ngModelInput) {
if($scope.modelInput == "" || typeof $scope.modelInput == 'undefined') {
//do something if field is empty...
}
};
But this doesn't work because ngModelInput is a string.
For example :
Imagine ngModelInput = "dateFilterInput"
How to translate this :
$scope.ngModelInput (How to write it ?)
to make this :
$scope.dateFilterInput
Hope you see what I mean ^^
Thanks for your help !

Modify the isEmpty function as below and that should solve your problem.
Do not use ng as prefix to any variable as ng is a angular reserved keyword and it may confuse other developers.
$scope.isEmpty = function(modelInput) {
if($scope[modelInput] == "" || typeof $scope[modelInput] == 'undefined') {
//do something if field is empty...
}
};
The above code takes whatever the parameter(string) you pass to the isEmpty function and checks for that particular name in the $scope object and gives you the value based on it.

Javascript form validation, what is missing?

I can't get a form to validate no matter what I try, so I have dumbed it down alot to see if I could get ANYTHING to work, and still when I submit the form the javascript does not validate, and simply sends me to the next page no matter what. You guys see anything wrong??
HTML
<form id="myform" action="/" method="post" onsubmit="return Validate()">
<input id="form_name" type="text" name="name" placeholder="Name" />
<div id="error">Name too short</div>
<input type="submit" id="submit" name="submit" value="Enter" />
JAVASCRIPT IN HEAD
<script language="JavaScript" type="text/javascript">
function Validate() {
if (form.name.value == "") {
$('#error').show();
return false ;
}
return true ;
}
</script>
And in the CSS I have the display for the #error div set to none.
Ultimately I want to check that the user entered at least 4 characters in the text input field, if they didnt then I don't want the form submitted but rather show the error message. But for now I'm just checking to see if its empty to see if I can get anything to work. Any ideas?

First of all remove language from the script tag, it's deprecated.
Then you should not load your script in the head section. Instead put it where body ends to ensure that the HTML has loaded.
Also in your validate function you don't seem to actually target the correct ID's.
Use this:
function Validate() {
if ($('#form_name').val() === '') {
$('#error').show();
return false ;
}
return true ;
}

Replace your javascript for this
function Validate() {
// Use form_name instead of form.name
if (form_name.value == "") {
// This line will break if you do not have jquery.
$('#error').show();
return false ;
}
return true ;
}

Define IDs for tags and use jQuery to get those tags and check their values. For example, if the name tag had id="form_name" you could do something like this:
if ($("#form_name").val() == ""))
$('#error').show();
On the other hand, I recommend you to check jQuery Validate plug-in which is great for validating forms:
http://jqueryvalidation.org/

Instead of
if (form.name.value == "") {
use:
var nameField=document.getElementById("form_name");
if (nameField.value == "") {
Let me know if this works.

Javascript can't locate HTML form ID

I'm creating a basic HTML form, and a Javascript form validator that looks for any input value in the "first name" field. The problem I'm having is that nothing seems to be working to return the first name form value to check it in JS.
Relevant HTML:
<form id="form1" name="formName">
First name:<br>
<input type="text" id="fn" >
<br>
Last name:<br>
<input type="text" name="ln" >
<br>
Email address: <span style="color:red">(required)</span><br>
<input type="text" name="email" >
<br><br>
<button onclick="validate()">Submit</button>
</form>
My JS:
var validate = function (){
var x = document.getElementById("fn").value;
if (x == null || "" || "undefined"){
alert("Please fill out your first name");
return false;
}
kickoff();
}
var kickoff = function () {
var visitor = document.forms["form1"].fn.value;
alert("Thanks for filling out, " + visitor +"\n");
return visitor;
};
Here's a JSFiddle.
My X variable is never reached, it seems, and keeps returning "undefined" when I submit the page. I've been fiddling with it for quite a while and can't seem to figure out what I'm doing wrong. Any help?

This doesn't mean what you think:
if (x == null || "" || "undefined") {
Can also be written as:
if ((x == null) || // might be false
"" || // will be false
"undefined" // will be true
) {
so the if will always be true.
You really just need:
if (! x) {

Besides the syntax issues, that method is also out-of-scope. You're not even going to be able to debug the issue with your conditional until you fix that.
You can either in-line the script higher up in the DOM or define validate directly on the window object:
window.validate = function () {
http://jsfiddle.net/frg37t3u/5/
Neither case is ideal, you should know. Globals are bad, but that's another discussion.