Develop Reference

Call function when input is changed on text box? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to create a button that changes color when username and password fields have both been entered with some sort of input (IE; neither username or password text boxes are empty)
Is there a way I can get a function to trigger when input of a text box is changed in NativeScript? I've asked at the NativeScript slack, among other sites but I don't seem to get a reply ever.
I thought this was a relatively simple request, especially when I'm using vanilla JS. Surely it must be simpler than using a framework such as Angular or Vue?
I do not want to use a framework, I am looking for a way to do this with plain JS. What have I tried? I've tried onChange="", textChange="", change="" but none seem to work.

If you are using plain JavaScript / TypeScript without any framework, then you must add your textChange listener after loaded event.
XML
<TextField loaded="onTextFieldLoaded"></TextField>
JS
function onTextFieldLoaded(args) {
const textField = args.object;
textField.off("loaded");
textField.on("textChange", onTextChange);
}
function onTextChange(args) {
console.log("Changed: " + args.value);
}
Here is a Playground Sample.

You can use onkeyup event to trigger the validation for the form.
See the Snippet below:
document.addEventListener("load", function(){
});
function validate(event){
if(document.getElementById("username").value.trim()!="" && document.getElementById("password").value.trim()!=""){
document.getElementById("btn").removeAttribute("disabled");
}else{
document.getElementById("btn").setAttribute("disabled", "disabled");
}
}
.enable{
}
<div>
<label for="username"><input type="text" id="username" name="username" onkeyup="validate(event)"/></label>
<label for="password"><input type="password" id="password" name="password" onkeyup="validate(event)"/></label>
<button id="btn" value="Submit" disabled>Submit</button>
</div>

Edited my whole answer because I initially gave you a whole demo in Javascript lol. Maybe someone with a lot of reputation points should make a Nativescript tag.
Anyway, have you tried it like this?
<TextField hint="Enter text" text="" (textChange)="myFunction($event)"></TextField>
OR
var el = page.getViewById("myEl");
el.on("textChange", myFunction);
function myFunction() {
console.log('woo');
}
And here's some relevant-looking documentation: https://docs.nativescript.org/angular/ui/ng-ui-widgets/text-field#text-field-binding

Why I can't get this element identified by an id attribute? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.

You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.

You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.

I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>

You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">

How do I force lowercase on an input field? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have an input field the client wants to be lowercase only. So the output also generates the input as lowercase.
This is what I currently have and it isn't working.
<script>
function toLowerCase(email) {
strInput.value=strInput.value.toLowerCase();
}
</script>

You can enforce text-transform: lowercase; as style for the input
<input type="text" style="text-transform: lowercase">

Use oninput:
var input = document.getElementsByTagName("input")[0] // just your input element
input.oninput = function() {
input.value = input.value.toLowerCase()
}
<input type="text" />

Use CSS3 property instead.
text-transform: lowercase;
https://jsfiddle.net/ho8zcw68/

Use patterns:
<input pattern="[a-z0-9]+" title="Only lowercase / numbers allowed" />

What is wrong with my code for a basic calculator? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to program a calculator, but I can't find the bug in my code. Here's my code:
<html>
<head>
<title>*</title>
</head>
<body>
<form>
<input type="number" placeholder="Enter a number" id="val1"><br>
times<br>
<input type="number" placeholder="Enter a number" id="val2"><br>
<input type="button" value="Calulate" onClick="myFunction()">
<script>
function myFunction(){
var val1 = document.getElementById(val1)value;
var val2 = document.getElementById(val2)value;
var result = val1*val2;
alert("The result " + result);
}
</script>
</form>
</body>
</html>
If you know how, and want to, can you help me to make it a calculator for +,-,:,* etc all in one? Thank you very much!

You are missing a dot(.), and the selector is wrong use "#id" for ids and ".class" for classes.
var val1 = document.getElementById("#val1").value;

Javascript Multiply 3 integers [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
My Javascript is off. I am a beginner.
I enter three numbers into three form fields. The addition works, but not the multiply. Also would love an average function. Here's the code.
<!DOCTYPE html>
<html>
<body>
<pre>
<form>
NUMBER1:
<input type="text" id="firstNumber" maxlength="100" size="20">
<br>
NUMBER2:
<input type="text" id="secondNumber" maxlength="100" size="20">
<br>
NUMBER3:
<input type="text" id="thirdNumber" maxlength="100" size="20">
<br><br>
<input name="Calculate Total" type="button" onclick="calculateText();" value="Add Total">
<input type="text" id="Total" maxlength="100" size="20">
<input name="Multiply Total" type="button" onclick="calculateText();" value="Multiply Total">
<input type="text" id="multiplyresult" maxlength="100" size="20">
</form>
</body>
</html>
function calculateText(){
var number1=document.getElementById('firstNumber');
var number2=document.getElementById('secondNumber');
var number3=document.getElementById('thirdNumber');
var result=document.getElementById('Total');
var multiplyresult=document.getElementById('multipyTotal');
var multiplyresult= number1 * number2 * number3;
if(number1.value=="" || number1.value!=parseFloat(number1.value)) number1.value=0;
if(number2.value=="" || number2.value!=parseFloat(number2.value)) number2.value=0;
if(number3.value=="" || number3.value!=parseFloat(number3.value)) number3.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(number1.value)+parseInt(number2.value)+parseInt(number3.value);
}
And in a jsFiddle: http://jsfiddle.net/kamull61/2shG3/

My comment alluded to some problems with your code; I suspect coming from poor choice of variable names, and you've just confused yourself (we've all been there!). Here is an expanded comment to get you on the right track...
Start by creating better names for your variables:
//these are the input elements, not their values!
var number1Element = document.getElementById('firstNumber');
var number2Element = document.getElementById('secondNumber');
var number3Element = document.getElementById('thirdNumber');
Having done this, it should be obvious that you cannot do something like:
var multiplyresult = number1Element * number2Element * number3Element;
Since those variables represent the input elements and not their values.
Another thing to watch out for: you're declaring a variable multiplyresult as the input element for the multiply result, but then re-declaring that variable as the result of your (albeit erroneous) multiplication:
var multiplyresult = document.getElementById('multipyTotal');
var multiplyresult = number1 * number2 * number3;
Try to make variable names that are descriptive of what the variable represents, this is generally a good practice in programming. It becomes easier for you to spot issues with your code, and more importantly, makes the code easier to read and maintain by someone else in the future (including you, in the future!)
These are things you learn with time and practice - so keep at it!

this was harder because of jsfiddle. onclick events couldn't connect with js below. Making it hard to do it that way. There are two more ways to attach events.
However, i got this take a look http://jsfiddle.net/techsin/2shG3/2/
shortcut for text to number is do some math operation with it instead of parsefloat and int. Works in some situations.
var result=getId('Total'),
multiplyresult=getId('multiplyresult'),
n1,n2,n3;
function getValues(){
n1=getId('firstNumber').value,
n2=getId('secondNumber').value,
n3=getId('thirdNumber').value;
}
console.log((n1)*(n2)*(n3));
window.addIt= function(){ getValues(); result.innerText=(+n1)+(+n2)+(+n3);};
window.multiply= function(){ getValues(); multiplyresult.innerText=(n1)*(n2)*(n3); };
function getId(x){ return document.getElementById(x);}