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.
Related
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.
I want to get the default value of an input textbox when the page was loaded. As I searched around I saw that the DefaultValue() is a method to get a value from a textbox when is loaded . But what is the jQuery one?
<input id=text > </input>
<script>
$(#text).DefaultValue(); // This is wrong I need the Jquery function of this
</script>
Any Idea?
You can read the defaultValue DOM property like this:
$('#text').prop('defaultValue')
Heres a working example
$('#value').click(function(){
alert($('#text').val())
});
$('#def').click(function(){
alert($('#text').prop("defaultValue"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text" value="This is the default value">
<button id="value">Click to see the current value</button>
<button id="def">Click to see the default value</button>
If you want to call a Javascript DOM function on a jQuery object, you can simple extract the corresponding DOM object with .get(0) or [0]:
$("#text").get(0).defaultValue;
$("#text")[0].defaultValue;
Note also that you were calling the basic JS wrong. First, it's defaultValue, not DefaultValue. Second, it's a property, not a method, so there's no parentheses after it.
Try this,
$(function(){
console.log($('#text')[0].defaultValue);
// or try
console.log($('#text').prop( 'defaultValue' ));
});
Read https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
I have this following code, I am trying to set value of hidden field with java script.
<script type="text/javascript" language="javascript">
var currentTime = new Date();
var tday=currentTime.getDate();
var tmonth=currentTime.getMonth();
var tyear=currentTime.getFullYear();
$("input[name='tday'").val(tday);
$('#tmonth').val(tmonth);
$('#tyear').val(tyear);
document.getElementById('tday').value='213';
</script>
<div id="edit_bs" class="edit_bs_st">
<form id='edir_pers' class='edit_pers_css' name='edit_pers' action='edit_pers.php' method='post'>
<input id='tyear' name='tyear'/>
<input id='tmonth' type='hidden' name='tmonth' />
<input id='tday' type='hidden' name='tday' />
<button type="submit">Submit</button></from>
The problem is that the value are not being passed to the 'edit_pers.php' they are blank. I have even tried document.getlementid.value to set the value but nothing works. I dont know what is wrong with my code.
hidden doesn't have anything to do with it. It's your call to the element that is bad.
THIS IS YOURS: BROKEN
$("input[name='tday'").val(tday);
THIS IS FIXED
$('input[name=tday]').val(tday);
Here's the result.
$(document).ready(function () {
var currentTime = new Date();
var tday=currentTime.getDate();
$('input[name=tday]').val(tday);
}):
As a side note, you don't need the redundant identifiers in your code. I'd personally go with this since you are probably required to have the name attribute.
HTML
<input type='hidden' name='tday' />
Javascript
$('input[name=tday]').val(tday);
http://jsfiddle.net/Uh7yn/
A part of your problem is that your code runs before the elements exists in the DOM.
Since you are using jQuery, the best way to circumvent this issue would be to use the document.ready handler. However, you will have to make sure that jQuery is loaded on the page.
$(function () {
//since your inputs have ids, you do not have to use any attribute selectors
$('#tday').val(213);
});
Also, you have a typo in the closing form tag.
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');
I have a form element that I want to address via javascript, but it doesn't like the syntax.
<form name="mycache">
<input type="hidden" name="cache[m][2]">
<!-- ... -->
</form>
I want to be able to say:
document.mycache.cache[m][2]
but obviously I need to indicate that cache[m][2] is the whole name, and not an array reference to cache. Can it be done?
UPDATE: Actually, I was wrong, you can use [ or ] characters as part of a form elements id and/or name attribute.
Here's some code that proves it:
<html>
<body>
<form id="form1">
<input type='test' id='field[m][2]' name='field[m][2]' value='Chris'/>
<input type='button' value='Test' onclick='showtest();'/>
<script type="text/javascript">
function showtest() {
var value = document.getElementById("field[m][2]").value;
alert(value);
}
</script>
</form>
</body>
</html>
Update: You can also use the following to get the value from the form element:
var value = document.forms.form1["field[m][2]"].value;
Use document.getElementsByName("input_name") instead. Cross platform too. Win.
Is it possible to add an id reference to the form element and use document.getElementById?
-- and in the old days (in HTML3.2/4.01 transitional/XHTML1.0 transitional DOM-binding) you could use:
form.elements["cache[m][2]"]
-- but the elements-stuff is, as Chris Pietschmann showed, not necessary as these binding-schemes also allow direct access (though I personally would prefer the extra readability !-)