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

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

Related

How to copy HTML content into a new tab [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 months ago.
Improve this question
I am building a web app and I need to copy an HTML div and everything inside it into a new tab. I am writing this code in JavaScript. So far I have been working on creating a blob and then creating a file to download. This approach copies all the HTML code I need BUT it does not copy the text that has been inputted into any text fields. As I understand, the problem is that the entered text is not part of the HTML code so it cannot be copied. However I cannot find another approach to this, please assist. Thank you
You can use Element.setAttribute() on those elements before serializing your DOM tree. For example:
input.setAttribute("value", input.value)
This will copy the mutable value (not serializable) to the attribute (which is serializable).
Here's a snippet demonstration:
const input = document.querySelector('input');
console.log('initial:', input.outerHTML);
input.value = 'hello world';
console.log('before:', input.outerHTML);
input.setAttribute('value', input.value);
console.log('after:', input.outerHTML);
<input type="text">
(Inspired by comment by #vanowm)
First, copy the html (say inside a DIV)
Then you'll need loop through all input fields and read their value so you can apply them.
So the code is like this (amend to suit your further needs):
<div id=container><html>
<input type=text name=text1 id="text1">
<br><input type=text name=text2 id="text2">
</html></div>
<textarea id=target style="width:100%;height:200px;"></textarea>
<input type=button name=go onclick="trigger();" value="Parse">
<script>
function trigger(){
target0=document.getElementById('container').innerHTML;
text1= document.getElementById("text1").value;
text2= document.getElementById("text2").value;
target0=target0.replace('id="text1"', 'id="text1" value="' + text1 + '"');
target0=target0.replace('id="text2"', 'id="text2" value="' + text2 + '"');
document.getElementById("target").innerHTML=target0;
}
</script>

My jquery isn't getting a value back with val() when the selector is working [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 2 years ago.
Improve this question
I am trying to create a function in my customizer on wordpress to display certain fields but I keep getting back undefined when everything seems to be aligned in my JS file correctly.
function cta() {
//Selector for the entire radio area that "should return" the value (either "one" or "two")
var ctaOptions = $("input[name='_customize-radio-cta-type']");
//The ID selector for option one to check if this field is "checked"
var ctaOne = $('#_customize-input-cta-type-radio-one');
//The ID selector for option Two to check if this field is "checked"
var ctaTwo = $('#_customize-input-cta-type-radio-two');
//This console log always returns undefined, but returns the element without the .val()
console.log(ctaOptions.val());
//This always returns false even when I can see in the inspector this element is checked="checked"
console.log(ctaTwo.is(':checked'));
if(ctaOne.is(':checked')) {
$('#customize-control-button-two-label').addClass('hidden');
}
else if(ctaTwo.is(':checked')) {
$('#customize-control-button-two-label').removeClass('hidden');
}
}
I am using an unscores boilerplate for my wordpress theme, but unsure if that has anything to do with the conflict in the javascript. I have also confirmed that the ID's are correct using the inspector, just for some reason it breaks when trying to get is checked or the values.
Here is the HTML of the area I am referring to
<li id="customize-control-cta-type" class="customize-control customize-control-radio" style="display: list-item;">
<span class="customize-control-title">Call To Action buttons on banner</span>
<div class="customize-control-notifications-container" style="display: none;">
<ul></ul>
</div>
<span id="_customize-description-cta-type" class="description customize-
control-description">How many buttons do you want?
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-one" type="radio" aria-
describedby="_customize-description-cta-type" value="one" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type">
<label for="_customize-input-cta-type-radio-one">one</label>
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-two" type="radio" aria-
describedby="_customize-description-cta-type" value="two" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type" checked="checked">
<label for="_customize-input-cta-type-radio-two">two</label>
</span>
</li>
Try setting up a setTimeout(function() around your current js function, it might be that your js script is loaded before the php actually populate the input.
$( document ).ready( function () {
setTimeout( function () {
//Your function goes here...
}, 1);
} );
EDIT 1: Regarding your last comment. If the input value is intended to be fetch from a user input then you should add an event listener. something like this...
$('#_customize-input-cta-type-radio-two, input[name="_customize-radio-cta-type"], #_customize-input-cta-type-radio-two').change(function(){
});
I have came to the conclusion that my problem wasn't the javascript, it was down to the root of the selector. I still haven't been able to fix it, but my question is unanswerable as it wasn't the problem. Thank you for the feedback.
Edit 1:
PROBLEM FOUND! It wasn't my JS that was the problem at all. It was the way i brought in the previous file. I needed to enqueue a JavaScript file to customize_controls_enqueue_scripts. When I took my script and added it to a new JS file and put the below code into my customize.php
function theme_slug_customizer_controls() {
wp_enqueue_script( 'theme-customizer-controls', get_template_directory_uri() . '/js/customize-controls.js', array( 'jquery' ), '20170412', true );
}
add_action( 'customize_controls_enqueue_scripts', 'theme_customizer_controls' );

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 to check input is more than place holder [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a input field like this
<input type="number" id="return_pro" name="available" placeholder="10 Available">
Here if user enter a value more than 10 (That is available), it should not accept and should show an error. How can I do that? I need to use this with the input tag itself. Because text fields comes inside an foreach loop. So number of text fields may increase.
HTML:
<input type="number" id="return_pro" name="available" placeholder="10 Available" onblur="check(this)">
Javascript:
<script>
function check(obj){
var val=obj.placeholder.split(" ")[0];
if(obj.value > parseInt(val)){
alert('invalid');
obj.value="";
obj.focus();
}
}
</script>
The placeholder is just what it says it is, a place holder and has no validation associated.
what you are looking for is some kind of validation, either by javascript/jquery or server side with PHP.
I suggest using a tutorial to learn how validation works like this one here as learning will be infinitely more valuable for the future, than simply copy and pasting some code that people provide on stack overflow.
<input type="number" id="return_pro" name="available" placeholder="10 Available">
<input type="button" value="ok" id="submit"/>
$(function(){
var placeholder=$("#return_pro").attr("placeholder");
var available=parseInt(placeholder.replace(" available",""));
$('#submit').click(function(){
var val=$("#return_pro").val();
if(val>available)
alert("Sorry");
});
});
I think This is actually you looking for.
DEMO HERE
with jQuery
$("#return_pro").keypress(function(){
var intValue = parseInt($(this).val());
if(intValue > 10) {
//value more more then 10, do something
}
});
$('#return_pro').keyup(function(){
var max = $(this).attr('placeholder').match(/[0-9]+/);
if(parseInt($(this).val())>parseInt(max)){
alert('Only '+max+' available');
}
});
DEMO: http://jsfiddle.net/uQH64/

why doesnt this onclick jquery work? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I have this HTML
<input type="text" id="one" />
<input type="text" id="two" />
<button type="button" id="onebtn" >hide</button>
and js as
$('#onebtn').on('click',function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
but this doesn't seem to work but, if I use <input type="button" /> it works, but I want to use <button ></button>
fiddle http://jsfiddle.net/Fzg7b/
It is because, you are not loading jQuery in your fiddle.
Load the jQuery version from the top left side. Then it would work!
http://jsfiddle.net/afzaal_ahmad_zeeshan/Fzg7b/5/
Try it here! It is working.
And for information as C Fairweather has mentioned to use
$(function(){
/* A shortcut for dom ready */
});
No jQuery code would work if there is no DOM ready function what we see as
$(document).ready(fucntion () {
/* functions here.. */
})
But jsfiddle doesn't need this! So it is not required! But a good point to come up with. :)
did you try to use .click()?
$('#onebtn').click(function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
It may help, but I had no time to test this.
also, you are displaying both the textbox1 and textbox2 elements. Then saying fade the first out and fade the second in but the second textbox is already visible. You cannot fade in an already visible item. Set the second textbox to hidden.
<input type="text" id="two" style="display: none;" />
Once this is done, your code functions as expected. Also, in your jsfiddle...remember to select the jquery version you are using. Currently you load nothing.

Categories

Resources