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.

appending a piece of code to input field jquery

i want to add an element to the input field if the condition meets: i tried using below but nothing seems happening, i tried with the following code which to me seems to a good one but something is missing and what i am so lost
$("#anc").load('get.cfm?new=' + Math.random()).appendTo('#anc');
I tried getting it to work but this is somewhat not adding the attribute to the input field...
the get.cfm has the value of
disabled="false"
what can i pass to fix this issue

To add attribute, use .attr(attrName, attrValue)
.$("#anc").load("...", function(response) {
//if the response is "disabled='true'";
var keyValue = response.split("=");
$('#anc').attr(keyValue[0],keyValue[1])
}

Create a select tag by comparing the input in html form

I am trying to achieve this:
In an html form, a text input is required. If the text input = "abc", then select tag is added to the page to create a related dropdown menu. However if it is anything else, there is no dropdown menu or it is disabled.
I can't find or think of a way of doing this with jQuery. Is there an event which compares input string that can be used with $("#equipment").on("???", function()? Thanks.
I'm very new to javascript and jQuery so sorry for such a basic question.

You'd use the input event for the text input, and then hide or show a select element based on the value, something like
$('#some_text_input').on('input', function() {
if ( this.value === 'abc' ) {
$('#some_select').show();
} else {
$('#some_select').hide();
}
});

Jquery to detect if duplicate values in forms

I have built a dynamic table containing form fields that can be added or removed when required.
What im wondering is.. Is there a plugin or script that has been created that can search a set of form fields for duplicate values ?
Example.
We have a form field with a class of "field-name"
this field may exist 10 times on the page because its part of dynamic rows.
So what im hoping is.. for a plugin that wont allow duplicate values to exist in these fields on the page ?

You can check the fields yourself with a few lines of code. The below runs on form submit and creates a copy of the original values with duplicates removed. If the lists don't match then you know you have some duplicate values.
$('form').submit(function (evt) {
var dynamicFields = $('.field-name'),
uniques = $.unique(dynamicFields);
if (uniques.length != dynamicFields.length) {
alert('Please make sure all your values are unique.');
return false;
}
});

Unable to Retrieve Text from DOM

Using JS in CSOM for SharePoint 2013, I'm having difficulty retrieving the text from an element. This is from a custom display form for a custom list. The column type in question is a multi-line text box, but is rendered differently in the display form due to the form override script being used.
Inspect element in Chrome reveals:
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
Every attempt at retrieving the text in the div element has resulted in an empty string.
document.getElementById("itemData").innerText;
$("#itemData").text();
$("span#itemData.formOverride").text();
$("span#itemData.formOverride").children().text();
When I display the DOM properties for the span, the innerText is even listed properly, but still an empty string is returned.
What am I missing...?
Thanks in advance.
Edit: More info...
Override script:
$("span.formOverride").each(function()
{
//get the display name from the custom layout
displayName = $(this).attr("data-displayName");
elem = $(this);
//find the corresponding field from the default form and move it
//into the custom layout
$("table.ms-formtable td").each(function(){
if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
$(this).contents().appendTo(elem);
}
});
});
So, the span posted originally has the contents from the default display form appended. I've never had any troubles accessing the formOverride information previously, so this is just being odd.
Further update:
Seems I cannot access any element's text on the page. It also appears that this is an issue particular to a SharePoint display form. I copied in full the script/html from my Edit page and pasted it into the Display page's corresponding file. In Edit the text returns fine, but in Display the text returned is an empty string.

Should be
$("#itemData").children().first().text();
Or
$("#itemData").find("div").text();
Or
$("#itemData div").text();

Your markup has a quote opening error
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
then
jQuery(function () {
console.log($("#itemData").text())
})
Demo: Fiddle