I'm trying to make a button onClick add its value to a text form. I don't really understand the "this" keyword but I tried using this:
function typing(){
document.getElementById('searchbar').value+=this.value
}
For the onClick, nothing happens and there are no errors in console either. Any help would be appreciated.
You can simply bind to click event of the button and add it's value to your text box using this:
$('#button1').click(function(){
$('#searchbar').val($(this).val());
});
Or if you just want to use plain js, you can pass the value inside the click handler like this:
<input type="button" value="A" onclick="doAction(this.value)">
And then:
function doAction(value) {
var searchbar = document.getElementById('searchbar');
searchbar.value = value;
}
Here is a plunkr:
https://plnkr.co/edit/AGR29w1g4TzW4udfazMv?p=preview
Related
I tried to write a program to communicate between JavaFx and JavaScript/JQuery. I want my program to work like following,
A character(e.g. 'a') is passed to JavaFx by user input, then this character 'a' is passed to JavaScript. In JavaScript/JQuery, there five buttons, whose labels have one different characters. For example, button A has label 'a'; button B has label 'b', etc. Then JavaScript/JQuery finds that 'a' are matched, then button A is clicked.
I am stuck on
1. how do I pass variable from JavaFx to JavaScript. I know how to pass variable from JavaScript to JavaFx.
2 how do make the button triggered when there is a match. Normally, user clicked the button to trigger the action. In the code, there will be something like click(this).
Any suggestion will be appreciated.
You need to use trigger Event Trigger
$(document).ready(function(){
$('#input').on('keyup',function(){
var textInput = $(this).val().trim().toLowerCase();
if(textInput=="a"){
$('#a').trigger('click');
}
if(textInput=="b"){
$('#b').trigger('click');
}
if(textInput=="c"){
$('#c').trigger('click');
}
if(textInput=="d"){
$('#d').trigger('click');
}
if(textInput=="e"){
$('#e').trigger('click');
}
})
$('#a').on('click',function(){
alert("a");
});
$('#b').on('click',function(){
alert("b");
})
$('#c').on('click',function(){
alert("c");
})
$('#d').on('click',function(){
alert("d");
})
$('#e').on('click',function(){
alert("e");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input"><br><br>
<button id="a">A</button><button id="b">B</button><button id="c">C</button><button id="d">D</button><button id="e">E</button>
If you want to click a button by code then just do this:
$("#myButtonId").click();
This code will click your button with id myButtonId
I have an input text and I want to run my function after the default event handler
<input type="text" onkeypress="myfunction()"></input>
the function
function myfunction(){alert($("input")[0].value)}
because myfunction() is using the input value and this property will be changed after the default handler runs and change it.
Example: if the text field has value "1234" , and I pressed the key "5", the function will alert "1234" not "12345"
So, I want the default function runs first to change the value property , then I can use it in myfunction()
can I do something like this ?!
onkeypress="default();myfunction()"
I did a work around by putting myfunction() in the onkeyup event, but I don't want that.
Thanks, and please consider I'm very newbie.
TRIVIAL SOLUTION:
You should use oninput instead of onkeypress. Like so:
<input type="text" oninput="myfunction(event)" />
The keypress event is emitted when a key gets pressed, i.e., before the DOM is modified with the pressed key's value. This is why you never got the value of the last key pressed.
The input event is emitted when data is entered into the input element. So we can access the data by reading the value of the element.
USING EVENT-BINDING:
HTML
<input id="input_field" type="text" />
jQuery
$(document).ready(function() {
$("#input_field").on("input", function() {
console.log($(this).val());
});
});
Pure JS
var input_field = document.getElementById("input_field");
input_field.addEventListener("input", function(event) {
console.log(event.target.value);
});
NOTE: Add this in a script tag after the HTML or use window.onload to simulate the behaviour of $(document).ready.
See this SO answer for more information about how event-binding works.
I have this coding on a check box:
<input type="checkbox" name="ECVValve" id="ECVValve" onChange="setEcvcheck();">
The check box can also be checked by another function (activated under certain conditions) that looks like this.
function setEcvcheck() {
if (document.getElementById("ECVValve").checked) {
document.getElementById("ECVValve").checked = false;
} else {
document.getElementById("ECVValve").checked = true;
}
}
It appears that if the checkbox is "checked" by the function setEcvcheck, the onChange event is not fired. Is that how it works or am I missing something else?
I think there is a loop of checking and un-checking in the code.. because each time you change it to true, it will call the onChange, then it will come back to function and set it to false.
Are you trying to check and un-check the same checkbox? (ECVValve)?
Actually, the event is firing. When you click, you check it, your javascript code unchecks it. And you'll never get to check the checkbox. You don't need to write javascript code to check or uncheck. To be sure it's firing, try this:
function setEcvcheck() {
alert('Ok!');
}
you can programatically fire the onchange event of check box.
in the following code, when button clicked toggle the check box and force to fire the onChange event of it.
function test() {
console.log("test");
}
function btnclick() {
var x = document.getElementById("1");
x.checked = !x.checked;
document.getElementById("1").onchange()
}
<input type="checkbox" onChange="test()" id="1">hi
<button onClick="btnclick()">btn</button>
I am using Jquery, for selecting value of drop-down.
I need do do some action on OnChange event (.change in jQuery) , but if there is only one option in drop-down I am not able to capture it in onChange event.
My drop-down is formed dynamically, so don't know how many options I'll get how many options, but I am facing problem if there is just one option.
Is there any way to capture OnChange event for <select> with only one <option>?
You don't need to have an onchange event. Just have a function that gets called from onchange, and if there is only one item, just go ahead and call that function.
function populate() {
//do work to populate #selector
if($("#selector option").length == 1) {
$("#selector").hide();
workerFunction();
} else {
$("#selector").show();
}
$("#selector").change(workerFunction);
//the following line of code will work like a default:
workerFunction();
}
function workerFunction() {
//put whatever used to be in your onChange function here
}
onchange event occurs when the internal state of the element is changed. Since you have a dropdown with a unique value, its state is never changed so the event is not fired.
<label for="checkboxThatUsedToBeASelect">
<input type="checkbox" id="checkboxThatUsedToBeASelect" name="checkboxThatUsedToBeASelect" value="something" />
</label>
$('#checkboxThatUsedToBeASelect').change( function(){
});
Now you have a more user-friendly input, and it'll trigger the change when it is checked or unchecked. :D
How about a conditional event binder? Something like:
var changeHandler = function (method) {
alert(method);
};
if ($('select option').length > 1) {
$('select').change(function() {
changeHandler('change');
});
} else {
$('select').click(function() {
changeHandler('click');
});
}
It sounds like you have a HTML error in your options tags.
In addition to that, in order to target something created dinamically with jQuery, you have to use delegators.
$('selector').change( function(e){...}); // without delegator
$('body').on('change','selector', function(e){...}); // with delegator, it detects even an element added dinamically
This said, you should be abble to detect on change for new and old elements
.change looks for another inmate to switch places. in your case sadly, there is a home alone case and hence the event is not firing.
I have a html- input type="text", and I want to add this tag an event handler that will work when the text is changes. The problem is that this input is getting his value from antoher javascript function and then the event handler isn't working.
For example
This is the event:
$("#inputid").change(function(){
alert('bla bla')
}
And this what need to raise the event
function inputvalue(){
$("#inputid").val="bla"
}
Unfortunately when the value of the input is changing (from the function inputvalue),it doesn't raise the event. If I put the value of the input manually the event is working
Any idea why the javascript doesn't reconize the text change from a script?
You can trigger the change event yourself in the inputvalue function:
function inputvalue(){
$("#inputid").val("bla").change();
}
Also notice the correction of your syntax... in jQuery, val is a function that takes a string as a parameter. You can't assign to it as you are doing.
Here is an example fiddle showing the above in action.
Your function has an error. Try this:
function inputvalue(){
$("#inputid").val()="bla"
}
EDIT
My function is also wrong as pointed in comments.
The correct is:
Using pure javascript
function inputvalue(){
document.getElementById("inputid").value ="bla";
}
Using jQuery
function inputvalue(){
$("#inputid").val("bla");
}