We Keep Coding

The use of JavaScript onchange("<function>(this.id)") on c# CheckBox vs other c# Controls

I have a web document that has its fields populated dynamically from c# (.aspx.cs).
Many of these fields are TextBox or HtmlTextArea elements, but some are Checkbox elements.
For each of these I have the ID attribute populated on creation of the field, as well as using .Attributes.Add("onchange","markChanged(this.id)")
This works great on all the fields except Checkbox. So I created a markCheckChange as I discovered that the Checkbox won't accept style="backgroundColor:red" or .style.backgroundColor = "red" type arguments.
I also added an alert and found that the Checkbox is not actually passing the this.id into the parameter for markCheckChange(param) function.
As a result I am getting errors of the type:
unable to set property of undefined or null reference
Why and what is the difference between these controls, and is there a better way to handle this?
I just reviewed the inspect element again, and discovered that the Checkbox control is creating more than an input field of the type checkbox, it is also wrapping it in a span tag, and the onchange function is being applied to the span tag (which has no id) and not to the input tag that has the checkbox id. Whereas for TextBox and HtmlTextArea the input tag is put directly within the cell/td tag, no some arbitrary span tag.
So now the question becomes how to get the onchange function to apply to the input tag for the checkbox rather than the span tag encapsulating it?
Per request:
function markChange(param) {
if (userStatus == "readonly") {
document.getElementById("PrintRecButton").style.display = "none";
document.getElementById("PrintPDFButton").style.display = "none";
alert("Please login to make changes.\n\nIf you do not have access and need it,\n contact the administrator");
exit();
}
else {
document.getElementById(param).style.backgroundColor = "teal";
saved = false;
var page = document.getElementById("varCurrentPage").value;
markSaveStatus(page, false);
}
}
So far the markCheckChange is about the same, until I get it to pass the id correctly, I won't be able to figure out the right way to highlight the changed checkboxes.

I found an alternative.
As I mentioned in the edit to the question, the inspect element feature revealed that the CheckBox type control was creating a set of nested elements as follows:
<span onchange="markChange(this.id)">
<input type="checkbox" id="<someValue>">
<label for="<someValue>">
</span>
Thus when the onchange event occurred it happened at the span which has no id and thus no id was benig passed for the document.getElementById() to work.
While searching for why I discovered:
From there I found the following for applying labels to the checkboxes:
https://stackoverflow.com/a/28675013/11035837
So instead of using CheckBox I shall use HtmlInputCheckBox. And I have confirmed that this correctly passes the element ID to the JavaScript function.

Setting Default value of input textbox in Jquery EasyUI dialog

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.

Getting and passing parent info to hidden form

In a WordPress plugin (called postRatings) when a user presses a nested image he adds a "like" to the page. I want to pass that info to a hidden form.
So when user clicks the img (that's what triggers the plugin functionality), I want to get the serial number that is in the parent span of that image, and pass it as a value to my hidden form input.
Thing is the serial number is displayed at the end part of the parent span id name. I wrote it in the HTML code below as “XXXX”.
I am trying to get that number (only) and pass it to the value of my hidden input. I started writing the JavaScript code but don't know how to continue.
HTML:
<span id="post-ratings-XXXX" class="post-ratings">
<img class="post-ratings-image" src="1_on.gif">
</span>
<form>
<input type="hidden" id="supportedCheck" name="supportedCheck" value="#"
maxlength="19"/>
</form>
JavaScript
$('.post-ratings-image').click(function(){
$('#supportedCheck').val ......?
});

You can use the following
$('.post-ratings-image').click(function(){
$('#supportedCheck').val($(this).parent('span')[0].id.split('-')[2]);
});
Fiddle Demo

You could use following snippet:
$('.post-ratings-image').click(function () {
$('#supportedCheck').val($(this).closest('span[id]')[0].id.split('-').pop());
});

Instead of adding the serial number to the id tag, consider to add it as a data tag. This is JQuery's way of working with data through HTML tags (see docs). You can set it this way:
<span data-serial-number="XXXX" class="post-ratings">
And access it this way:
$('.post-ratings-image').click(function(){
var span = $(this).parent();
var serial = span.data('serial-number');
span.find('input:hidden').val(serial);
});

.val() and .text() don't work?

I want to email div contents via php and form tag. I have 2 divs with these classes:
.simpleCart_items
.simpleCart_total
I want to fetch contents from these divs and insert their contents in inputs or textareas, then submit the form to my php file.
I wrote this JQuery code:
$('#shopform').submit(function(){
var items = $('.simpleCart_items').text();
var tprice = $('.simpleCart_total').text();
$('#itemsinfo').val(items);
$('#totalprice').val(tprice);
});
and these are my inputs:
<textarea id="itemsinfo" style="width:320px; height:160px"></textarea>
<input type="text" id="totalprice"/>
but it doesn't work. The contents didn't move to the input tags.

It must be something else in your HTML or script that you are showing us because when I set up a simple test using your code, it works fine here: http://jsfiddle.net/jfriend00/7q6DP/.
This works perfectly fine for me (in Chrome, Firefox, Safari and IE):
HTML:
<button id="submitForm">Submit</button>
<div class="simpleCart_items">simpleCart items text</div>
<div class="simpleCart_total">simpleCart total</div>
<textarea id="itemsinfo" style="width:320px height:160px"></textarea><br>
<input type="text" id="totalprice"/>
Javascript (after page is loaded):
$('#submitForm').click(function(){
var items = $('.simpleCart_items').text();
var tprice = $('.simpleCart_total').text();
$('#itemsinfo').val(items);
$('#totalprice').val(tprice);
});
Please show the rest of your code and HTML.
The things to check are:
Are there any javascript errors showing in the error console or in the debugger console?
Are you initializing your event handlers after the page has loaded?
Do any javascript errors show in the debug console when you press the submit button?
Is your submitForm event handler getting called? If you set a breakpoint or put an alert in their, does it get hit?
Can you set a breakpoint in your submit handler and see what's happening with the values of items or tprice?
Make sure your class names don't have the leading period on them when you put them in your HTML. It should be class="simpleCart_items", not class=".simpleCart_items".

Your code works just fine when I put it in a page:
http://jsfiddle.net/Guffa/krYQh/
When you click the submit button, the fields are populated with the data. (I added a return false in the submit event handler just to keep the form from posting.)
Some possible errors in your code:
You have used class=".simpleCart_items" instead of class="simpleCart_items".
The form doesn't have id="shopform".
You have use the ids shopform, itemsinfo or totalprice on any other elements.

I guess you should use ".html()" instead of ".text" something like below.
$('#shopform').submit(function(){
var items = $('.simpleCart_items').html();
var tprice = $('.simpleCart_total').html();
$('#itemsinfo').html(items);
$('#totalprice').val(tprice);
});

I suppose you should use .innerHTML instead of .text()

You should be able to use the .val() to get the value for the text areas instead of using .text().
Try using alert(items); before you set the div's contents just to make sure you are actually getting data.

Dojo: dojo onblur events

I have a form setup with dojo 1.5. I am using a dijit.form.ComboBox and a dijit.form.TextBox
The Combobox has values like "car","bike","motorcycle" and the textbox is meant to be an adjective to the Combobox.
So it doesn't matter what is in the Combobox but if the ComboBox does have a value then something MUST be filled in the TextBox. Optionally, if nothing is in the ComboBox, then nothing can be in the TextBox and that is just fine. In fact if something isn't in the Combobox then nothing MUST be in the text box.
In regular coding I would just use an onBlur event on the text box to go to a function that checks to see if the ComboBox has a value. I see in dojo that this doesn't work... Code example is below...
Vehicle:
<input dojoType="dijit.form.ComboBox"
store="xvarStore"
value=""
searchAttr="name"
name="vehicle_1"
id="vehicle_1"
/>
Descriptor:
<input type="text"
dojoType="dijit.form.TextBox"
value=""
class=lighttext
style="width:350px;height:19px"
id="filter_value_1"
name="filter_value_1"
/>
My initial attempt was to add an onBlur within the Descriptor's <input> tag but discovered that that doesn't work.
How does Dojo handle this? Is it via a dojo.connect parameter? Even though in the example above the combobox has an id of "vehicle_1" and the text box has an id of "filter_value_1", there can be numerous comboboxes and textboxes numbering sequentially upward. (vehicle_2, vehicle_3, etc)
Any advice or links to resources would be greatly appreciated.

To add the onBlur event you should use dojo.connect():
dojo.connect(dojo.byId("vehicle_1"), "onBlur", function() { /* do something */ });
If you have multiple inputs that you need to connect this to, consider adding a custom class for those that need to blur and using dojo.query to connect to all of them:
Vehicle:
<input dojoType="dijit.form.ComboBox"
store="xvarStore"
class="blurEvent"
value=""
searchAttr="name"
name="vehicle_1"
id="vehicle_1"
/>
dojo.query(".blurEvent").forEach(function(node, index, arr) {
dojo.connect(node, "onBlur", function() { /* do something */ });
});
In the function that is passed to dojo.connect you could add in some code to strip out the number on the end and use it to reference each filter_value_* input for validation.
dojo.connect()
Combobox documention

onBlur seems to work just fine for me, even in the HTML-declared widgets. Here's a very rudimentary example:
http://jsfiddle.net/kfranqueiro/BWT4U/
(Have firebug/webkit inspector/IE8 dev tools open to see console.log messages.)
However, for a more ideal solution to this, you might also be interested in some other widgets...
http://dojotoolkit.org/reference-guide/dijit/form/ValidationTextbox.html
http://dojotoolkit.org/reference-guide/dijit/form/Form.html
Hopefully this can get you started.