Javascript to Jquery, add text in input onclick - javascript

How can I change this javascript code to JQuery.
<script type="text/javascript">
function addTextTag(text){
document.getElementById('text_tag_input').value += text;
}
</script>
When a user click the link text automaticaly is added in input.
This is the HTML:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>
Here is the demo: http://jsfiddle.net/Smartik/j8qGT/

<script type="text/javascript">
$(function() {
$('.tags_select a').click(function() {
var value = $(this).text();
var input = $('#text_tag_input');
input.val(input.val() + value + ', ');
return false;
});
});
</script>
and your markup:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>
and here's a live demo.

Without inline javascript, completely jQuery:
http://jsfiddle.net/j8qGT/3/
JavaScript:
$('a').click(function(){
$('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
});
​
HTML:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>​

Some notes on the steps:
select already the input where to set the value so you avoid the need to re-query for it all the time: var $tagsInput = $('#text_tag_input');. The hash tag selector if the ID selector in jQuery, replaces document.getElementById
bind a click event with .click() for links within element with class "tags_select": `$('.tags_select a').click(...);``
To append the value, instead of struggling with jquery methods to get and set the value of the input, get the native DOM element with [0] on $tagsInput and use the += notation of the property value.
Here's the code:
// select already you input element for re-use
var $tagsInput = $('#text_tag_input');
// bind a click event to links within ".tags-select" element
$('.tags_select a').click(function() {
// append link text to the input field value
$tagsInput[0].value += $(this).text();
return false;
});
DEMO
Further reading:
jQuery selectors
Bind a click event with .click()

Related

jQuery: Select child of child of an element

HTML:
<form id=f1>
<div>
<input id=text>
</div>
</form>
<form id=f2>
<div>
<input id=text>
</div>
</form>
jQuery:
$('form').submit(function(){
var id=$(this).attr('id');
var text=$('#'+id+'#text').val();
alert(text);
});
Result:
Undefined
I need to select the input but I dont know how,
This question is Corrected
You need a space between the parts of the selector:
var text = $("#" + id + " #text").val();
But there's no need to use the ID at all:
var text = $(this).find("#text").val();
Also, IDs are supposed to be unique, you can't have id="text" multiple times. You should use class="text", and then it would be:
var text = $(this).find(".text").val();
$('form').submit(function(){
var text=$(this).find(".text").val();
console.log(text);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id=f1>
<div>
<input class=text>
</div>
</form>
<form id=f2>
<div>
<input class=text>
</div>
</form>
First of all you shouldn't use multiple id's! ID should be unique.
In your example, you pass wrong selector to jQuery function, it should be:
var text = $('#' + id + ' #text'); (missing space between selectors)

How can I get the Text value of input?

How can I get the value of the textbox?
<input class="num1" type="text" val=""><br>
<button class="show">Click</button>
this is my Js code:
var value = $('.num1').text();
$('.Click').click(function(){
$('<'p>').text(value);
});
when I clicked the "click" button I want to show in a paragraph the text that I'd input to the textbox.
Use .val() for form elements to retrieve or set its value. Also, care with typo when you set the paragraph text.
var value = $('.num1').val();
$('.show').on('click', function(){
$('p').text(value);
});
In your code there is an error: if you want to catch the click event you should use the class of the button. Another error in your code is about the single quotes you use to insert value into the <p>. And remember, is $('p'), not $('<p>').
The code should look like that:
$('.show').click(function(){
$('p').text(value);
});
You can use this code:
jQuery
$(function(){
$("form").on("submit", function(event){
event.preventDefault();
var text = $(".num1").val();
$("#outputText").text(text);
})
});
Your HTML should be something like that:
HTML
<form>
<input class="num1" type="text" val="">
<button class="show">Click</button>
</form>
<p id="outputText"></p>
Note that in this case is really important to stop the default event behavior using preventDefault().
If you are not using a form the previous code became something like that:
jQuery
$(function(){
$(".show").on("click", function(event){
var text = $(".num1").val();
$("#outputText").text(text);
})
});
HTML
<input class="num1" type="text" val="">
<button class="show">Click</button>
<p id="outputText">
</p>
The outputText div is a div I've created to show the text.
I've prepared jsfiddle1, jsfiddle2 you can use to see the code in action, I hope it helps ;-)
That would be
var value = $('.num1').val();
Use the val() operator on the input to get the value, and then you could use the following code:
Html:
<input class="num1" type="text">
<button class="show">Click</button>
<p class="output"></p>
Javascript:
$('button').click(function(){
$('.output').html($('.num1').val());
});
use .val() not .text()
$(".show").click(function(){
var value= $(".num1").val();
$(".para").text(value)
});
demo
$('.show').click(function () {
var value = $('.num1').val();
$('p').text(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="num1" type="text" val=""></input>
<button class="show">Click</button>
<p></p>
There are type mistakes
var value = $('.num1').val(); should be in click method.
Use val() instead of .text() to get the input value.

get label for for a check input radio

I am having a radio element that I want to get the text:
<div class="fleft multiplecolumns">
<div class="rdbUniteWrapper" style="line-height:20px">
<span class="EasilyRadioWrapper EasilyControlWrapper">
<span class="EasilyRadio EasilyChecked"></span>
<input id="rdbUnite_106" name="rdbUnite" type="radio" value="106" class="formElementHidden" checked="checked" style="opacity: 0;">
</span>
<label for="rdbUnite_106" style="font-weight: bold">kg (kilogramme)</label>
</div>
I tried $('input:radio[name=radio]:checked').next().text(); but it' s not the solution...
What am I doing wrong ?
Cheers
input:radio is not the sibling of label element, its parent span is. thus you need to traverse to parent span, then to next sibling element:
$('input:radio[name=radio]:checked').parent().next().text();
I find out the solution
var labelUnite = $('label[for="' + $("input[name='rdbUnite']:checked").attr("id") + '"]').text();
thanks for your helps
try below code
$('input:radio[name=radio]:checked').parent().next().text();
I am having a radio element that I want to get the text
Since the two are nicely related by id = for, you can use an attribute value selector:
// Assuming `this` is a reference to the radio button element
var label = $('label[for="' + this.id + '"]');
Then if you want the text, use .text():
var test = label.text();
Live example:
$("input[type=radio]").on("click", function() {
alert($('label[for="' + this.id + '"]').text());
});
Click a radio button to see its label text:
<div>
<label for="r1">This is for r1</label>
<input type="radio" id="r1">
</div>
<div>
<label for="r2">This is for r2</label>
<input type="radio" id="r2">
</div>
<div>
<label for="r3">This is for r3</label>
<input type="radio" id="r3">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
More generally, a radio button element and its label are related in one of two ways:
Via id = for, as in your example
Via containment, where the label contains the input[type=radio]
If you want to handle the general case, you can do something like this:
// Assuming `this` is the radio button element
var text;
var label = null;
if (this.id) {
label = $('label[for="' + this.id + '"]');
}
if (!label || !label[0]) {
label = $(this).closest('label');
}
text = label && label.text();
Use This :-
var label = $("label[for='"+$('input:radio[name=radio]:checked').attr('id')+"']")

one textbox value in another textbox

I want to get value of one textbox and put the same in another textbox.
my code is :
<input type="text" value="Keyword" id="one" />
<input type="text" value="Search" id="two" />
button
jquery:
var input = $("#one");
$('#btn').click(function(){
alert('dgdhjdgj');
var oneValue = $('#one').val();
alert("one value "+ oneValue);
var twoVal = $('#two').val($(input).attr('value'));
alert('two Val' + twoVal);
});
demo is here.
Issue : when I change the value of textbox #one, it does not change the value of #two.
thanks in advance.
$(input).attr('value') gets the value of the value attribute, which is the initial value, not the current value.
You had it right two lines earlier. Use val().
Try this
HTML
<input type="text" placeholder="Keyword" id="one" />
<input type="text" placeholder="Search" id="two" />
button
Script
$('#btn').click(function() {
var oneValue = $('#one').val();
$('#two').val(oneValue)
})
Fiddle
write textarea and check it. JSFIDDLE
$("#add").click(function(){
var thenVal = $("#textarea_first").val();
$("#textarea_second").val(thenVal);
});
if all that you want to change the text of second textbox, as soon as you change the text of first textbox, just use jQuery's change event.
just try this then:
$('#one').on("change",function(){
$('#two').val($(this).val());
});

JavaScript click function null value in text box

I need to null the value in text box on click, currently I have written a code as such:
<div class="keyword_non">
<h1>Keywords : <a class="someClass question_off" title="Keywords "></a></h1>
<h2><input type="text" name="kw1" value="one" /></h2>
<h2><input type="text" name="kw2" value="two" /></h2>
<h2><input type="text" name="kw3" value="three" /></h2>
<h2><input type="text" name="kw4" value="four" /></h2>
</div>
<script type="text/javascript" src="/functions/javascript/custom/non_profit_edit.js"></script>
<script type="text/javascript" src="/functions/javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/functions/javascript/custom/jquery-ui-1.8.7.custom.min.js"></script>
Inside non_profit_edit.js i have written as such
$(document).ready(function(){
$(".kw1").click(function() {
$(".kw1").val(" ");
});
$(".kw2").click(function() {
$(".kw2").val(" ");
});
$(".kw3").click(function() {
$(".kw3").val(" ");
});
$(".kw4").click(function() {
$(".kw4").val(" ");
});
});
But write now its not working properly. Is this any browser issues or error in code?
In the selector the '.' indicates a class. For names use
$('[name="kw1"]'). //
Error in code.
Your selector ".kw1" selects an element with kw1 as the class attribute. None of your inputs have a class, they just have names. Add classes to them or replace the selector in your jQuery to this format: $('[name="kw1"]')
You can also simplify your function by doing this:
$('.keyword_non')
.on('click', 'input[type="text"]', function(e) {
this.value = ''; // input that was clicked on
}
This is a syntax error in your code.you does not use dot(.) in click function.Dot(.) will use for class. when kw1 is name in your input

Categories

Resources