I have an onclick method like this:
onClick: function() {
xx.setValue('i want this to be a button but triggered on keyup');
}
And a keyup method like this:
var that=this;
this.something().on( 'keyup', function() {
xx.setValue('hello'+that.something().getvalue());
} );
this is a preview mode. So i want the text from the onclick button to behave like the text i write with the keyboard
Is this the sort of thing you are wanting to achieve here?
$('#button').click(function() {
$('#output').val('You wanted to type:\n' + $('#textBox').val());
});
$('#textBox').on('keyup', function() {
$('#output').val($('#textBox').val());
});
Check out my fiddle to get a better idea of what I'm suggesting http://jsfiddle.net/ozrevulsion/jssL1xwq/
If this isn't what you wanted then please can you provide your own fiddle of your code failing to do what you want it to do so we can get some more context on what you are asking.
Cheers
Zac
[Edit]
I don't know why I didn't notice you were using native JS for your solution earlier. If you wanted to stick with your native JS and not have to use jQuery here is a solution that does the same as what I did above but in native JS.
function changeTextArea(newValue) {
document.getElementById('output').value = newValue;
}
function printToTextArea() {
changeTextArea('You wanted to type:\n' + document.getElementById('textBox').value);
}
And I guess the HTML is relevant for this native JS solution too so here it is
<input id="textBox" type="text" value="Type Here" onkeyup="changeTextArea(this.value)" />
<br />
<input id="button" type="button" value="Tell me what I typed" onclick="printToTextArea()"/>
<br />
<textArea id="output"></textArea>
And here is the updated fiddle http://jsfiddle.net/ozrevulsion/jssL1xwq/1/
wouldn't this work ?
Html:
<input type=button id=btn value='Submit' onclick=otherFunction(); />
<input type=button id=button value='Submit' onclick=myFunction(); />
<div id="other">
Trigger the handler
</div>
and this:
function myFunction(){
$(#btn).click();
}
function otherFunction(){
alert('this');
}
Note that with jquery you have the keup event :
https://api.jquery.com/keyup/
in this case you could have :
$( "#other" ).click(function() {
$(#btn).click();
});
Related
Id like to know if anyone has a suggestion for forcing a user to select a text box with Javascript/Jquery?
Example: user clicks X object on web page. User is forced into a text box in which they should enter information first.
Thanks in advance :)
Yes, what you are looking for is called focus.
Here the examples using jquery and plain js:
function setFocusjquery() {
$('#text-1').focus();
}
function setFocus() {
document.querySelector('#text-2').focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="setFocusjquery()">FOCUS jquery</button>
<input type="text" id="text-1" />
<br />
<button onclick="setFocus()">FOCUS JS</button>
<input type="text" id="text-2" />
Use JavaScript focus() method.
HTML:
<button type="button" onclick="focusField()">Click me</button>
...
<input type="text" id="myInput">
JavaScript:
function focusField() {
document.getElementById('myInput').focus();
}
You need to add an event listener to your event trigger object with,
Native JavaScript
let myXObject = document.getElementById('#xObject');
let myTextbox = document.getElementById('#myTextbox');
myXObject.addEventListener('click', function() {
myTextbox.Focus();
});
JQuery
let myXObject = $('#xObject');
let myTextbox = $('#myTextbox');
myXObject.click(function() {
myTextbox.focus();
});
I have an html document with the following element
<input type="text" style="width: 40px;" name="rate" id="rate" value="1" />
Now I want to use jQuery to run a function once this textfield is changed. But I seem not to understand how the selectors work. Because this example works:
<script>
// works
$(document).on('input', function() {
alert();
});
</script>
But of course it fires on all inputs that are interacted. So I only want a certain id to response:
<script>
// doesn't work
$(document).on('#rate', function() {
alert();
});
</script>
But it doesn't work. Neither does it with class or attributes ("input[name='rate']") nor with 'input#rate' instead of document.
$('input#rate').on(function() {
Why is that?
jQuery included in head is:
<script src="/assets/jquery-1.12.3.min.js"></script>
on() accepts the event name as the first argument.
As there is no event called #rate, the following will not work.
$(document).on('#rate', function() {
Use
$(document).on('keyup', '#rate', function() {
^^^^^^^ : Event name here
on should take event then selector like .on('keydown', '#rate'
Format like:
.on( events [, selector ] [, data ], handler )
so it would be
$(document).on('click', '#rate', function() {
^^^^^
alert();
});
More on Here
input in $(document).on('input', function() { is not a selector.
document is the selector, 'input' is the event type.
If you want to listen for the input event on a specific element, you can pass a selector as the second parameter to .on():
$(document).on('input', '#rate', function() {
// ^^^^^^^
...
});
or you can just select the specific element before binding the callback:
$('#rate').on('input', function () {
...
});
What you have now:
$(document).on('input', function() { } );
means
on every "input" event for any element do something
And if you want to do something only on particular element - pass this element as a selector:
$(document).on('input', "#rate", function() { } );
Here input is an event and #rate is an element selector.
Correct way to make this work is :
//on click
$(document).ready(function(){
$("#rate").click( function () {
alert('Awesome');
})});
for input box
<input type="text" style="width: 40px;" name="rate" id="rate" value="1" />
if you want to target class:
<input type="text" style="width: 40px;" name="rate" value="1" class="rate">
script will be
//on click
$(".rate").click( function () {
alert('Awesome');
})
for further info read :-
jQuery Selectors
I find that when I am confused why a jQuery function isn't properly working the way I expect to consult the API Documentation for jQuery for usage and examples. Specifically for .on() I would reference the documentation page for that function:
http://api.jquery.com/on/
Each event is going to give a different desired outcome. You are wanting to fire off some code when the input is changed. The events used are based on vanilla JavaScript events so in this case your options would include on change, keyup, or keydown.
To decide which event to use for this, to me, it usually comes down to one thing: Does my code need to check the input before it shows in the text field?
You can see in this code how to use each event that I mentioned.
// Using on-change
// You'll notice that this only 'fires off' when your cursor LEAVES the input field
$("#rate1").on("change",function() { $(this).next().html("<= Changed"); });
// Using on-keyup
// You'll notice that this only 'fires off' when the key you pressed is released, not when it is pressed
$("#rate2").on("keyup",function() { $(this).next().html("<= Changed"); });
// Using on-keydown
// You'll notice that this only 'fires off' when a key is pressed
$("#rate3").on("keydown",function() { $(this).next().html("<= Changed"); });
.label { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input type="text" style="width: 40px;" class="change" name="rate" id="rate1" value="1" />
<span class="label"></span><br />
<input type="text" style="width: 40px;" class="keyup" name="rate" id="rate2" value="1" />
<span class="label"></span><br />
<input type="text" style="width: 40px;" class="keydown" name="rate" id="rate3" value="1" />
<span class="label"></span><br />
Something like keydown is best used when you're trying to see what key they entered before it goes into the input. I usually use this to see if the enter key was pressed.
Hope this helps!
I have a complicated case here, but below is an example just to make it simple.
I have two buttons, each with their own onClick function. I want to call the onClick function of button A when I click on button B.
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
Note that the event can be onClick() or onMouseUp()
p.s. I have to do it using only javascript. (NO jQuery). Thanks
<input type="button" onclick="fnc()"/>
<input type="button" id="message" onclick="alert('ok')" />
<script type="text/javascript">
function fnc()
{
document.getElementById("message").click();
}
</script>
are you looking for this?
<html>
<head>//I guess something like setTimeout(function,timeInMilliseconds)
<script language = "javascript">
function sayHiA(){
var v = document.getElementById('buttonB').getAttribute("onClick");
setTimeout(v,0);
}
function sayHiB(){
document.getElementById('para').innerHTML = 'wrote';
}
</script>
</head>
<body>
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
<p id = "para">
Write Here
</p>
</body>
</html>
function sayHiB() {
sayHiA();
}
Did you tried this with an external js ? This is quite the most basic thing you can do in javascript.
I made you a jsfiddle : http://jsfiddle.net/pjDVP/4/
The html :
<input id='bta' type='button' value='button a'></input>
<input id='btb' type='button' value='button b'></input>
The js (with jquery laoded) :
$(function(){
$('#bta').click(function(){aORbClick();});
$('#btb').click(function(){aORbClick();});
})
function aORbClick(){alert('I clicked a or b');}
just call function sayHiA from sayHiB or call it after.
Call from sayHiB
function sayHiB()
{
sayHiA();
}
or after
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB(); sayHiA();"></input>
or easier way is to use jQuery, so you can do this
function sayHiB(){
if($('#id-of-a').attr('onclick'))
$('#id-of-a').click();
else if ($('#id-of-a').attr('onmouseup'))
$('#id-of-a').mouseUp();
}
function sayHiB(){
$('#buttonA').click();
}
Raw JS:
function sayHiB(){
var buttonA = document.getElementById('buttonA');
buttonA.onclick.apply(buttonA); // in onclick function you can get buttonA as 'this'
}
I'd probably make a generic function that switches on the button's name/id to figure out what to do - this would also make your code work independent of the event attribute used to call the function.
HTML:
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="myFunc(this)"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="myFunc(this)"></input>
JavaScript:
function myFunc(elem){
switch(elem.id){
case 'buttonA':
sayHiA();
break;
case 'buttonB':
sayHiB();
sayHiA();
break;
}
}
This would also help with any DOM manipulation you might need as the button which was clicked is passed to the generic function myFunc, allowing you to quickly access other attributes or nearby elements.
I am using a simple Javascript toggle function with the following code.
<script>
function add_more(){
if (document.form.more[0].checked==true)
{
document.getElementById('moreTxt').style.display="block";
}
else if (document.form.more[1].checked==true)
{
document.getElementById('moreTxt').style.display="none";
}
}
</script>
do want to enter something more ?
<form name="form">
<input type="radio" value="yes" name="more" onclick="add_more()" /> Yes
<input type="radio" value="No" name="more" onclick="add_more()" /> No
<div id="moreTxt" style="display:none">
hi you can enter more here
<textarea rows="3" cols="4">
</textarea>
</div>
</form>
The Problem is if I click on 'yes', and for some reason I refresh the page, then the 'yes' radio button remains checked but moreTxt div hides (i.e. its default visiblity mode).
How should I tackle this problem?
Check the value of the control on document ready and adjust the div visibility accordingly.
This will reset all your input on load:
<script>
function resetChkBox() {
var e=document.getElementsByTagName('input');
var i=0;
while(i<e.length) {
if(e[i++].type=='radio') {
e[i].checked=false;
}
}
}
</script>
<body onload="resetChkBox()">
you should perform you add_more function onDucomentReady
Assuming you're using jquery:
$(document).ready(function() {
add_more();
}
)
or use plain javascript equivalent of document.ready()
If this is to be performed without jquery which should be the case since including jquery for such small thing will be overkill :
document.attachEvent("onDOMContentLoaded", function(){
ready()
});
In ready function check the value of the radio button.
I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>