How do we add decimal values of characters to attributes using jQuery - javascript

I am trying to add the Degree Celsius ℉ value to an attribute using jQuery.
$("#degree-toggle").attr("value", ℉);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="degree-toggle" checked="checked">

$("#degree-toggle").attr("value", $("<div />").html('&').text());
Working pen:
https://codepen.io/todorutandrei/pen/OzGgmM

Try this simple and raw implementation and starts from here:
$("#degree-toggle").keyup(function(){
var newval = this.value.replace('°F','');
this.value = newval + '°F';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='degree-toggle' />

You need to decode the HTML entity first. It doesn't work in attributes:
$("#degree-toggle").attr("value", decodeHtml("℉"));
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="degree-toggle" checked="checked">
The decodeHtml() function works by creating a hidden textarea. Then the data which needs to be decoded is injected into that textarea and once that happened it gets read out by grabbing the "rendered" value of it.

There's several issues here. Firstly, you're missing quotes around the value you're setting. Secondly you're using attr('value') instead of val().
However the bigger issue is that val() will not decode the entity you're setting. In order to achieve that you will need to use a <button> element then set its html(), like this:
$("#degree-toggle").html('℉');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="degree-toggle"></button>
Also note that neither <button> nor <input type="button"> elements have a checked attribute.

Related

Select the custom tag from button attribute

I have created a button element structure like below
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>
Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.
The snippets I have used to find is as below
jQuery("mycustomtag").each(function(){
//process here
});
PS this works fine in the following case:
<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>
your code
jQuery("mycustomtag")
will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?
try following
//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);
//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
id="btnCustom"
>
You couldn't find them since the value of an attribute is considered just like a string.
To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop(), like :
$('input').each(function() {
$(this).val();
$(this).prop('title');
});
PS this works fine in the following case
That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.
$('input').each(function() {
console.log($(this).val());
console.log($(this).prop('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">
In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.
To select an element based on its value, use the following syntax:
$("input[value='<mycustomtag data-id=15>'")
To select an element based on its title works similarly.
If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span.
So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.
jQuery("input").attr("title");
jQuery("input").val();
Demo:
console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>

How to put a degree symbol in an html input field through javascript

I have a text box as
HTML
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
which works fine as it displays the degree sign perfectly, but when I try to set the value through jquery like
Jquery
$("#lat").val("9°")
Its displaying the entire text instead of the degree symbol.
You can target the value attribute:
$("#lat").attr('value',"101"+String.fromCharCode(176))
it is also better to use .text() to set the text because .val() is used to retrieve the value of an element
You can use HEXCode,
e.g
<a href id="my">Here</a>
<script>
$('#my').click(function()
{
alert('9\xB0');
});
</script>
Also go through this link
$("#test").click(function(){
$("#lat").val("29" + ascii(176))
});
function ascii (a) { return String.fromCharCode(a); }
Updated JSFiddle for further help: http://jsfiddle.net/zkh2of12/1/
Use the special tag besides the input field, it will be clear for the user:
<input type="text" id="lat" placeholder="Latitude °" value=""> °
What about just setting the symbol directly in JavaScript instead of the HTML code?
$(function(){
$("#set").click(function(){
$("#lat").val("°");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
<button id="set">set</button>
If you want to improve those just make a hidden <span> with the html code you like inside and then just pick the html with JavaScript. This will work even for symbols you cannot post in JS
Try this:
$("#lat").attr("val","9"+ascii(176));

Setting variable value as button value with jquery

I want to dynamically change the value of a button with jquery
I am able to set a constant string dynamically with this
$(".showdeal").html('New Users');
But when I store a value in a variable and set the button value to the variable value it doesnot work. I have tried these
var x=data.dealCount;
$(".showdeal").html(x);
$(".showdeal").html('x');
These two doesnot work. How can I set the value of the button to a variable value?
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<input type='button' value='' id='button'/>
<script>
var x='clickme';//you can assign any dynamic value here
$('#button').val(x)
</script>
</body>
</html>
Actually your code works good. But incase you may made a mistake in parsing your JSON, try using .parseJSON()
HTML:
<button class="showdeal"></button> <!-- As you mentioned in comments -->
JS:
var data = {dealCount: '4'}
var x = data.dealCount;
$('.showdeal').html(x);
Check this JSFiddle
did you parse data?
var data = JSON.parse(result);
$(".showdeal").html(data.dealCount);
try this
If your "showdeal" class is applied to a button then why dont you use the val() on button for setting its value.
I would write it as
var x=data.dealCount;
$(".showdeal").val(x);
try if this works ?
as of i know html() returns/sets the contents between the tag so...
sry for pre code ..
try this ..
data = jQuery.parseJSON(data);
var x=data.dealCount;
$(".showdeal").html(x);
Use "val" instead of "html"
$(".showdeal").val(x);
And this should work.
<input type='button' value='Submit' id='btn1'>
$("#btn1").attr('value', 'JSON VAL'); //versions older than 1.6
<input type='button' value='Add' id='btnAddProfile'>
$("#btn1").prop('value', 'JSON VAL'); //versions newer than 1.6
$("#btn1").html('JSON VAL'); // for different buttons
I have set up a fiddle please jsFiddle, play along with the version and see what works with the version you are using.

Setting HTML textbox value using javascript function?

I'm using this code to set the HTML textbox value using Javascript function. But it seems to be not working. Can anyone point out, what is wrong with this code?
Whats your Name?
<input id="name" value="" />
<script type="text/javascript">
function setValue(value){
var myValue=value;
document.getElementsById("name").value = myValue;
}
</script>
the "value" is came from my android java class using this codes
String value = "Isiah";
WebView web = (WebView) findViewById(R.id.web1);
web.getSettings().setJavaScriptEnabled(true);
web.loadUrl("file:///android_asset/www/webpage");
web.loadUrl("javascript:setValue("+ value +")");
function setValue(value) {
var myValue=value; //unnecessary
document.getElementById("name").value= myValue;
}
But then as pointed out in the comments, you need to call setValue(value) somewhere in your code. Right now you just defined the function is never called.
You could either access the element’s value by its name:
document.getElementsByName("textbox1"); // returns a list of elements with name="textbox1"
document.getElementsByName("textbox1")[0] // returns the first element in DOM with name="textbox1"
So:
input name="buttonExecute" onclick="execute(document.getElementsByName('textbox1')[0].value)" type="button" value="Execute" />
Or you assign an ID to the element that then identifies it and you can access it with getElementById:
<input name="textbox1" id="textbox1" type="text" />
<input name="buttonExecute" onclick="execute(document.getElementById('textbox1').value)" type="button" value="Execute" />
You are using document.getElementsById("name") it should be document.getElementById("name")
not Elements it is Element
You are not linking the function to anything. For example, a click:
<input id="name" value="" onclick="javascript:this.value=12;"/>
Replace the onclick attribute for your desired function, whatever it does (you need to be more specific)
Also, there is no language attribute (at least not anymore) use type="text/javascript" instead
Here is a fiddle: http://jsfiddle.net/4juEp/
Click the input to see it working.
Look at this second fiddle. http://jsfiddle.net/4juEp/1/
which loads whatever is defined in the hid input to the name input.
Firstly, you have a typo in your javascript function i.e. you have used getElementsById as compared to getElementById
To set the value of the textbox on page load, I suggest you use an alternative
<body onload="setValue('yourValueToSet');">
<!-- Your usual html code in the html file -->
</body>
I think you are missing the quotes,
try,
web.loadUrl("javascript:setValue('"+ value +"')");
also consider about the typo.
Check this out:
<body onload="setvalue($value);">
Whats your Name?<input id="name" name="name" value=""/>
<script type="text/javascript">
function setValue(value){
document.{formname}.name.value = value;}</script>
It's not Elements
It's Element
You should use document.getElementById('object-id');

Get escaped html from td and put it into input as value

I have html
<table>
<tr><td id="cell"><a href="">Google.com</a></td></tr>
</table>
<div id="to"></div>
And I have javascript
$(document).ready(function() {
var html = '<input type="text" value="'+$("#cell").html()+'" />'
$("#to").append(html);
});
I don't know why, but when executing this code I'm getting only <a href= in input. In firebug's inspector input html appears as <input type="text" a>="" >google.com<="" value="<a href=" > As you can see, $quot; are replaced with " - this is the problem.
I've tried using .text() instead of .html() - almost the same situation.
What is my mistake?
Thank you.
You need to encode the value (set via .val() in this case), not use it directly in a string, like this:
$(document).ready(function() {
var html = $('<input type="text" />').val($("#cell").html());
$("#to").append(html);
});
You can see it in a demo here. The problem is the &quote; gets decoded to " which is making your HTML look like this:
<input type="text" value="<a href="">Google.com</a>" />
You can see how that makes the browser a little crazy :)
Try this:
$(document).ready(function() {
$('<input type="text">').val($("#cell").html()).appendTo("#to");
});
Avoid building HTML from strings and variables, use the functions jQuery and the DOM give to you to assign values to attributes or change an element's text. It's safer this way, and IMHO it's more readable as well.
Try to write customize function to unescape the string
function unescape(html) {
return html.
replace(/&/gmi, '&').
replace(/"/gmi, '"').
replace(/>/gmi, '>').
replace(/</gmi, '<')
}

Categories

Resources