I am a total beginner of HTML and JavaScript, anyway I am trying to update a meter in my code with a value coming from a arduino.
It works in the original code with updating numbers (first row of the code) but I want to have the value presented in a meter. This code works but I want to change the static value "100" in the meter as it is here to get the value of "P1" instead, I have tried a lot of things but nothing works (this is probably easy but I'm a beginner), would appreciate help.
<li>State of POT: <span id="P1" class="highlight">...</span>. To update this value, rotate the knob of POT.</li>
<script>
swduino_stream("P","P1","onoff_led");
function onoff_led(value)
{
document.getElementById("myMeter").setAttribute("value","100");
}
</script>
<p>Panna: <meter id="myMeter" min="0" low="245" high="250" max="280" value="0"></meter></p>
Your onoff_led function have you checked what is being set to it ?
If it is being sent the current value, then you can just change your update for myMeter to update the value with your value parameter sent to the function.
function onoff_led(value)
{
document.getElementById("myMeter").setAttribute("value", value);
}
If you can not check what the onoff_led function is receiving i.e. debug because it is inline javascript then create a seperate javascript file which contains the function and load that at top of the page. You can then set a break point to find out what is being set to the function.
Related
I am trying to do what seems to be simple but am unable to accomplish
I am trying to set the value of a column after a row focus change in a grid to a hidden value in java script.
My imbedded javascript code:
function OnGridFocusedRowChanged() {
grdA.GetRowValues(grdA.GetFocusedRowIndex(), 'ClientID', OnGetRowValues);
}
function OnGetRowValues(values) {
//Set hidden value
document.getElementById('<%=hdnClientID.ClientID%>').value = values[0];
//Fire button click
btnPopulateGrids_Click();
}
where hdnClientID is the name of my hidden field
In GridA I have the setting as such that OnGridFocusedRowChanged gets executed each time a row focus change takes place.
To this point, it works fine, the values[0] in OnGetRowValues() contains the correct value from the corresponding row in GridA.
But in the corresponding code behind, I cannot access the value from hidden field hdnClientID. Always comes up null when accessing
Current_Client_ID = CInt(hdnClientID.Value);
cannot access or convert any value from
hdnClientID.ClientID.
either.
I'm missing something simple.
I had to complete a similar task recently and I too was unable to access the value from codebehind. I researched and found out that it is not that simple and that you can't do it with javascript. What I would recommend is to check if you have jQuery installed and if you do, change your function to this:
function OnGetRowValues(values) {
//Set hidden value
$('#<%=hdnClientID.ClientID%>').val(values[0]);
//Fire button click
btnPopulateGrids_Click();
//If you change your HiddenField to have OnValueChange event, you can trigger it with this
//__doPostBack('<%= CompanyCode.ClientID %>', '');
}
Also, I guess you are firing some function from code behind with btnPopulateGrids_Click();.
I would recommend adding OnValueChanged="hdnClientID_OnValueChanged"/> to your <asp:HiddenField/> and using my supplied function triggering method.
I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog
To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;
Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox
use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working
I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.
try this
document.getElementById("d_amount").value=m;
you don't need innerHTML
I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});
I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.
I'm a newbie to JS so I was just wondering.
I'm currently trying to get a list of different characters in a game going and what I have done with them etc.
For that particular reason I need to get the value of some checkboxes. I googled a lot and am now desperately looking for help.
<input type='checkbox' id='valor_1' value='0' onclick='javascript:toggle();'>
The function toggle() looks like this:
function toggle()
{
(this.value==1)?this.value=0:this.value=1;
alert(this.value);
}
For testing reasons I alerted the current value. If I now click the checkbox, it value changes and I get the correct return value in my alert windows.
BUT!
If I use this button right here:
<input type='button'' value='Valor_1 Value' onclick='javascript:alert(document.getElementById("valor_1").value);'>
I will always get the return value 0. Why is that? What can I do about it?
You get value 0 on click of button in alert because you are passing the value set of the checkbox i.e. 0. To get the value you want try something like this:
<input type='button'' value='Valor_1 Value' onclick='javascript:toggle(document.getElementById("valor_1"));'>
function toggle(cb)
{
(cb.value==1)?cb.value=0:cb.value=1;
alert(cb.value);
}
I have a select element in a form with id of "qlt".
And if I change the value of that selection, other SELECT(#names) element changes its option(s).
However, it seems the change function takes effect at the moment I tick the dropdown, not after the value has changed.
So my jquery code condition below has an opposite effect. If the value of qlt is 14-1, then the selection will have "Hello (90x55mm)" as its option insted of Business Card (90x55mm.
var qlt = (jQuery("#qlt").val()).split(":")[0];
jQuery('#qlt').change(function(){
if(qlt=="14-1"){
ChangeOptions(["Business Card (90x55mm)"],"#names",[1]);
}
else if(qlt=="14-2"){
ChangeOptions(["Hello (90x55mm)"],"#names",[2]);
}
});
jQuery('#names').change(function(){
quantities=[50,100,250,500,1000,2000,5000];
ChangeOptions(quantities,"#qlnt",quantities);
});
If my question is not clear, you can visit the actual site here:
http://210.48.94.218/~printabl/products/labels-stickers/
The two select elements I am referring to are the Quality and Size dropdowns. The form is in the middle.
The actual problem looks like the order of callback execution
The qlt variable is set using the method calculate which is registered using jQuery("select").change(calculate); at line 701.
But the change options callback is registered at line 528 which will get executed before the calculate method is called that is why the value of qlt is not updated until next select.
One solution is to move jQuery("select").change(calculate); before line 528 another one is below
It might be a problem of some script execution, I assume qlt is supposed to be the current selected value in the #qlt input then you can declare a local variable and assign the current value using $(this).val()
jQuery('#qlt').change(function(){
var qlt = $(this).val().split(":")[0];
if(qlt=="14-1"){
ChangeOptions(["Business Card (90x55mm)"],"#names",[1]);
}
else if(qlt=="14-2"){
ChangeOptions(["Hello (90x55mm)"],"#names",[2]);
}
});
You can see in the paper form attached what I need to convert into a web form. I want it to show the check boxes and disable the input fields unless the user checks the box next to it. I've seen ways of doing this with one or two elements, but I want to do it with about 20-30 check/input pairs, and don't want to repeat the same code that many times. I'm just not experienced enough to figure this out on my own. Anyone know anywhere that explains how to do this? Thanks!
P.S. Eventually this data is all going to be sent through an email with PHP.
I don't think this is a good idea at all.
Think of the users. First they have to click to enter a value. So they always need to change their hand from mouse to keyboard. This is not very usable.
Why not just give the text-fields? When sending with email you could just leave out the empty values.
in your HTML :
//this will be the structure of each checkbox and input element.
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>
in your CSS:
.hidden{
display:none;
}
.shown{
display:block;
}
in your jQuery:
$('input[type=checkbox]').on('click', function () {
// our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false
var inputDisplay = this.checked ? 'shown' : 'hidden';
//from here, we just need to find our next input in the DOM.
// it will always be the next element based on our HTML structure
//change the 'display' by using our inputDisplay variable as defined above
$(this).next('input').attr('class', inputDisplay );
});
Have fun.
Since your stated goal is to reduce typing repetitive code, the real answer to this thread is to get an IDE and the zen-coding plug in:
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
http://vimeo.com/7405114