Jquery change value of one element to another based on click - javascript

I need to get element value of #answer_comment and show it inside input with id #comment
$(document).ready(function() {
$("body").on("click", "#answer_comment", function(e) {
var answer = document.getElementById('answer_comment').val();
$('#comment').val(answer);
})
what is wrong?
Also if possible, how to create a cookie with the selected value?

Hope this is what you are looking for since it is a span you can get the value using attr('value')
$("body").on("click", "#answer_comment", function(e) {
var answer = $('#answer_comment').attr('value');
$('#comment').val(answer);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id = "answer_comment" value="username">click here</span>
<input id="comment">

you are mixing jQuery with vanilla JS. You should pick a horse and stick to it. Pure JQ would be
$(document).ready(function() {
$("body").on("click", "#answer_comment", function(e) {
var answer = $('#answer_comment').text();
$('#comment').val(answer);
})

Related

Click event on a link with a unique id

On a page I have links, by clicking them, it deletes an element. This is my code:
Delete input
Delete input
and so on. As you can see, the links differs with ids, so there can be hundreds links with unique ids. I need to remove closest li element to them. I do it in a such way:
$(document).ready(function () {
$('#link0').click(function (e) {
e.preventDefault();
$(this).closest('li').remove();
})
});
It works for id="link0"
I tried to put a numerical part of id into a variable i by doing this:
var i = 0;
$('#link0' + i).click(function (e) {
e.preventDefault();
$(this).closest('li').remove();
})
but I can't figure, how to make it work and how should I increment i(where should I put in the code i++). Any help would be appriciate. Thanks!
You can use classes instead of ids...
You can do it like this:
$(document).ready(function() {
$('.remove-existed-field').on('click', function(e) {
$(this).closest('li').remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Delete input</li>
<li>Delete input</li>
Hope this helps!
You could use the starts with selector.
$('[id^=link]').click(
It will target all the elements whose id start with link
If you want to process each link a then you could do it on class instead.
Also you can get id of the clicked link if you really need it.
$(document).ready(function () {
$('a.remove-existed-field').click(function (e) {
e.preventDefault();
// $(this).attr('id');
$(this).closest('li').remove();
});
});

Add an attribute to html element with javascript on page load?

What I've tried:
function addAttribute(){
document.getElementById('myid')...
};
window.onload = addAttribute;
How can I add add the attribute to my element with id="myid" ?
document.getElementById('telheaderid').yourattribute = "your_value";
For instance
document.getElementById('telheaderid').value = "your_value";
Using jQuery:
$('#telheaderid').attr('value', 'your_value');
EDIT:
Focus is the event that fires up when an element get focused or for instance when we click on the textarea it highlights thats the time.
Using jQuery:
$('#telheaderid').focus(function() {
$(this).val('');
// run any code when the textarea get focused
});
Using plain javascript:
document.getElementById('telheaderid').addEventListener('focus', function() {
this.value = "";
});
Use this:
document.getElementById('telheaderid').setAttribute('class','YourAttribute')
The W3C standard way:
function functionAddAttribute(){
document.getElementById('telheaderid').setAttribute('attributeName', 'attributeValue');
};
window.onload = functionAddAttribute;
for IE:
function functionAddAttribute(){
document.getElementById('telheaderid').attributeName = 'attributeValue';
};
window.onload = functionAddAttribute;
Enjoy your code!

Get text value in jquery?

I have my markup like this
<div class="text-input-area">
<input type="text" id="text-input"/> <br />
<input id="button" type="submit" value="Preview" />
</div><!--.text-input-area-->
In the input area I will type only text. Now when I will click on button Preview it should show the text that I had type. For that I have made my jquery like this
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").text();
alert('textvalue');
});
});
</script>
But its not working at all. Can someone tell me how to do this?
demo http://jsfiddle.net/gmeEL/
API:
.val() : http://api.jquery.com/val/
Hope this will fit the cause :)
code
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Use $( "#text-input").val() instead of $( "#text-input").text() and alert(textvalue) instead of alert('textvalue')
Complete Code:
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Fiddle Demo
Two problems
need to use .val() to get the value of an input field
need to use the variable textvalue for the alert not a string literal 'textvalue'
Try
jQuery(function ($) {
$('#button').click(function () {
var textvalue = $("#text-input").val();
alert(textvalue);
});
});
for inputs and select use $(selector).val()
for span use $(selector).text()
It should be a val() i.e. a jquery function that returns a value of the element
var textvalue = $( "#text-input").val();
Please note that
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method. To get the value of a script element, use the .html() method.
http://api.jquery.com/text/

Jquery Show Input Text Based On Input Value

I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});

using html() to get changed content

I have a div that I need to grab the HTML contents of (so naturally I use html())...
However, they are text fields. Whenever I grab the contents of the div (that contains the text fields), it grabs the initial HTML and not any data changed by the end user...
Here is JS bin version..change the input field, run the function and you see that it will only take the initial value of the field...
Any way around this?
http://jsbin.com/oleni3/edit
http://jsbin.com/oleni3/5/edit
Try this out ^
The code:
$(document).ready(function() {
$('div#top input').change(function() {
$(this).attr('value', $(this).val());
});
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});
Your getting the HTML of the div. You want to get the value of the input box:
$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});
No way to do it with html(). You'll have to get the value of each input using val(). You can use
$("input").each(function() {
doSomething($(this).val());
}
if it make life easier.
$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});
The easiest hack would be like this:
$("div#bottom input").val($("div#top input").val());
Get the value of the updated input and set that to the clone.
Updated link:
http://jsbin.com/oleni3/3/edit
$(document).ready(function() {
$('#data').change(function() {
$(this).attr('value', $(this).val());
})
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});
This works.. here's the link http://jsbin.com/oleni3/2/edit
UPDATE: If you have many inputs inside the div, you can use this http://jsbin.com/oleni3/6/edit

Categories