We Keep Coding

jQuery Selector from jQuery objects

How can I listen to the onChange Event of multiple jQuery objects?
var el1= jQuery('input[type="checkbox"][name="x"]');
var el2= jQuery('input[type="checkbox"][name="y"]');
jQuery(el1, el2).change(function (e) {
//....
});
Of course I could just put the 2 element selectors as a string into the
.change function, but this is a simplified example. I would like to work with the jQuery objects, not with string selectors.
This looked like a simple "let me google for you" question to me, but I have not been able to find a solution for the past hour.

You can use add() or merge() method:
Add:
el1.add(el2).change(function (e) {
//....
});
Merge:
$.merge(el1, el2).change(function (e) {
//....
});

Try this
var el1 = jQuery('input[type="checkbox"][name="x"]');
var el2 = jQuery('input[type="checkbox"][name="y"]');
$(document).on('change', [el1, el2], function() {
console.log('multiple')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="el1">Element 1</label>
<input id="el1" type="checkbox" name="x" value="test1" />
<label for="el2">Element 2</label>
<input id="el2" type="checkbox" name="y" value="test2" />
Also it is the first result of google and the main link is this

You can use .add():
el1.add(el2).on('change', function () { /* body */ });

Return Output in an HTML Element onkeyup

I'm working on html editor but this part is giving me a problem is there anyway to archive this? when i type in the text filed it will display an output in the div element.
<script type="javascript/text">
function ColorText(){
T = Rep(document.getElementById("text").value);
document.getElementById("wcode").innerHTML=T;
setTimeout("ColorText()",10);
}
</script>
HERE IS HTML PART
<input type="text" id="text" onkeypress="ColorText()"/>
<div type="text" id="wcode"></div>

A more elegant solution, without setTimeout:
function Rep(value){
//Do your thing...
return value;
}
var wcode = document.getElementById("wcode");
var text = document.getElementById("text");
text.addEventListener("input", function(){
wcode.innerHTML = Rep(this.value);
});
<input type="text" id="text"/>
<div id="wcode"></div>

Codesoft, your code may not be working for 2 things:
<script type="javascript/text">
change it for:
<script>
or
<script type="text/javascript">
And the other possible problem:
T = Rep(document.getElementById("text").value);
Maybe you hadn't defined the function Rep(). You have to define it and return a string value, or just don't use it, like this:
T = document.getElementById("text").value;
Besides of that, Marcos Casagrande gave you a better solution to your problem, please, take a look to that code.

Jquery: Combine multiple user inputs into one text area?

I'm trying to put together multiple user inputs and then combine them into one textarea after button click.
For example:
User1:Hey, I just met you
User2:And this is crazy
User3:But Here's my number so call me maybe
Combined Result:
Hey, I just met you, And this is crazy, But Here's my number so call me maybe
Here's my code the button click is currently not working but when I tried it before it did work so I was thinking I have some problem w/ my Jquery that triggers this unusual result:
HTML and Imports:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input class="combine" id="input1" disabled="true"></input>
<input class="combine" id="input2" disabled="true"></input>
<input class="combine" id="input3" disabled="true"></input>
<input class="combine" id="input4" disabled="true"></input>
<input class="combine" id="input5" disabled="true"></input>
<input class="combine" id="input6" disabled="true"></input>
<input class="combine" id="Voltes5" disabled="true" size="45"></input>
<button id="setVal">Set</button>
Jquery
$(document).ready(function(){
$('#setVal').on('click',function(){
jQuery(function(){
var form = $('.combine');
form.each(function(){
$('.Voltes5').append($(this).text()+ ' ');
});
});
});
});
Update for sir Arun P Johny
User1: If theres a (no comma when combined)
User2: will
User3: there's a way
Combined Result:
If theres a will, there's a way

Try
$(document).ready(function () {
$('#setVal').on('click', function () {
var form = $('.combine').not('#Voltes5');
var vals = form.map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
$('#Voltes5').val(vals.join(', '))
});
});
Demo: Fiddle

Here's a one-liner for non-readability ;)
$('#setVal').click(function(){$('#Voltes5').val($('.combine').not('#Voltes5').map(function(){return $(this).val();}).get().join(''))});
Expanded:
$('#setVal').click(function(){
$('#Voltes5').val(
$('.combine')
.not('#Voltes5')
.map(
function(){
return $(this).val();
})
.get()
.join('')
);
});
Get fiddly with it: http://jsfiddle.net/ArtBIT/u57Zp/

Here is one way to do this:
$('#setVal').on('click', function () {
$(".combine[id^=input]").each(function () {
if(this.value) {
$("#Voltes5")[0].value += ' ' + this.value;
}
});
});

There are several different ways to do this..
I'd do it this way using an array:
$(document).ready(function () {
$('#setVal').on('click', function () {
//create an array for the values
var inpAry = [];
$('.combine').each(function () {
//add each value to the array
inpAry.push($(this).val+' ');
});
//set the final input val
$('#Voltes5').val(inpAry);
});
});
but you would need to remove the combine class from #setVal because that would be included in the .each.
This way it would also be possible to have the final box updated on keyup as I'm not just appending the values, the combined values are set each time.

$(document).ready(function(){
$('#setVal').on('click',function(){
var val='';
$('.combine').not('#Voltes5').each(function(){
val+=$(this).val();
});
$('#Voltes5').val(val);
});
});
.text() will give text of the element ,for input val u have to use .val()

So there's immediate big problem in the code, which is that you're referring to your Voltes5 element as a class, not an ID. The jQuery selector you want is:
#Voltes5
instead of:
.Voltes5
There are a few other things to think about too, though, for the sake of functionality and best practices. Firstly, the Voltes5 element also has class combine, meaning that the $('.combine').each() call will include this element. The outcome of this is that it will also append its current text to itself when the code is run (or, when the code is run with the above correction).
When grabbing the current entered text of an input element, a jQuery .val() call is what you want, not .text() - see this answer for some more discussion.
Another thing that could be noted is that you should really explicitly specify what sort of input these elements are; <input type="text"> is hugely preferable to <input>.
Finally, input is a void element (reading), meaning it shouldn't have any content between opening and closing tags. Ideally, you wouldn't even give a closing tag; either have just the opening tag, or self-close it:
<input>
<input />
HTH

replace $('.Voltes5').append($(this).text()+ ' ');
with
$('#Voltes5').append($(this).text()+ ' ');

Generating search links using text input in javascript

Im trying to make a website which makes searches easy for me.
I want to be able to write any text in a text box, and make a java script generate the appropriate links.
Ive been trying this:
function prepare_link() {
var url_param = document.getElementById('url_param');
var target_link = document.getElementById('target_link');
if ( ! url_param.value ) {
return false;
}
target_link.href = target_link.href + escape(url_param.value);
}
<input type="text" name="url_param" id="url_param" onkeypress='prepare_link()' onKeyUp='prepare_link()' />
<input type="button" onclick="prepare_link();" value="Generate" /><br>
Google<br>
Bing
For some reason the search string is repeated, but i would like it to update links for each keypress and not just when i hit the generate button.
Moreover the second links isn't being updated :(
Any ideas? :)

Please have a look of the following code snippet, hope this will help to resolve your Issue.
In the following snippet you will not get the repeated values. Also, it will work with 'keyup' and 'click' event :
var google = "https://www.google.dk/search?q=";
function prepare_link() {
var target_link = document.getElementById('target_link');
target_link.href = google + escape(url_param.value);
alert(target_link.href);
}
void function () {
document.addEventListener("keyup", function(e) {
prepare_link();
e.preventDefault();
});
var click = document.getElementById("target_link");
click.addEventListener("click", function() {
document.dispatchEvent(keyEvent);
});
}();
<input type="text" name="url_param" id="url_param" value=""/>
<input type="button" value="Generate" onclick="prepare_link();" /><br>
Google<br>
Thanks :)

How to clear a text field?

I want to place a cross button next to a text field, which, on clicking it, clears the value entered by the user. In other words, it empties the field. Please help..
And I also want to focus the field, but after some 2 or 3 seconds..

Like this:
$('#myButton').click( function () {
$('#myField').val('');
});
Or without jQuery
document.getElementById('myButton').onclick = function () {
document.getElementById('myField').value = '';
});

Try this,
$('#button').click(function(){
$('#inputBox').val('');
});

Have you tried anything at all? But this should do (edit after misread, see below):
$('#your_button').click(function() { $('#your_textbox').val(''); });

In Javascript:
document.getElementById('textField1').value = "";

Well, learn to break your tasks into smaller one and everything will become much easier. Here, for example, you have 2 tasks:
1) Place a "X" button near input. This is achieved by CSS and HTML. You HTML might look like:
Then you should align your image with you input
2) Actual erasing. In jQuery:
$("#x_button").click( function() {
$("#input_id").val( "" );
});
But this is real basics of web development, so you should really consider to read some kind of book on it.

You can do it with html5 value.
<input type="text" placeholder="Your text here">

Assuming your text field looks like this one :
<input type="text" id="myText"></input>
and your button looks like this one :
<input type="button" id="myButton"></input>
You just have to do this in javascript :
<script type="text/javascript">
var myButton = document.getElementById('myButton');
myButton.addEventListener("click", function () {
document.getElementById('myText').value = '';
}, false);
</script>
If you're using jQuery it's even easier :
<script type="text/javascript">
$('#myButton').click(function() {
$('#myText').val('');
});
</script>

here is a sample:
Html:
<input type="text" id="txtText" value="test value" />
<input type="button" id="btnClear" value="Clear" />
javascript:
$(document).ready(function () {
$("#btnClear").click(ClearText);
});
function ClearText() {
$("#txtText").val("");
}