JS DOMNode checkbox set value - javascript

I'm using HTML template tags to render content via JS (no jQuery or anything else).
Using content.cloneNode(true) to clone the nodes, set the content, values, ... and at the end I append it to a node inside the HTML. Thats working fine for every element so far. But currently I have an issue with input type checkbox. I can't set the value. (I don't mean the checked status)
The problem is, when I set the value it's not part of the HTML element thats getting rendered. Not visible with the browser dev tools and also document.querySelector(...).value will return an empty string.
My goal is to be able to fetch on a button click the values of all enabled (checked) checkboxes for an AJAX request.
Code example:
https://jsfiddle.net/3gnLv67x/

I haven't found the reason why the value is not getting set. But since it's only a simple input field I changed to the code to create the element instead of using a template for that.
This way is working.
const checkbox = document.createElement("input");
checkbox.type = 'checkbox';
checkbox.name = 'selected[]';
checkbox.className = 'select-box';
checkbox.value = item.id;
I'm still up to hear a solution how to get that working with templates.

Related

Checkboxes read-only attribute HTML

I am developing a website, and I need a certain checkbox that when is unchecked the correspondent input box has the read-only attribute and when I check it the read-only attribute gets removed from the input box. Right now, what happens is I load the website, the checkbox is unchecked and the input box does not has the read-only attribute as it was supposed to. Altough when I check and uncheck it the input box gets the read-only attribute.
Why is this happening?
Here is the Javascript code:
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
checkbox.addEventListener("change", function() {
if (!(checkbox.checked)) {
inputElement.setAttribute("readonly", "true");
} else {
inputElement.removeAttribute("readonly");
}
});
Your function sets the readonly attribute when the checkbox is changed.
It doesn't get set when the document initially loads, because the user hasn't changed it.
If you want the function to run when the document initially loads, then you'll need to call it at that time. Alternatively, you could set the attribute in the HTML instead of modifying it with JS (which generally makes more sense when setting default values for attributes). Note that if you do either of these, then the state can never change so the change event handler will never run.)

Dynamic control 'ID' automatically added to 'name' attribute, instead of ID attribute

I have a couple of lists on a configuration page in my application where users can configure the order of items as well as the selection for specific application pages. I'm using the ID of the dynamic controls added at runtime to move them from A to B, but currently this doesn't work due to my JavaScript failing to retrieve the ID of the control selected.
After digging down and inspecting further, the dynamic controls aren't getting an ID attribute assigned automatically, instead the ID is applied to the name attribute of the control which is why the JavaScript is failing.
I'm using both dynamic HtmlGenericControls and Textboxes.
JavaScript that retrieves the ID, it works when I switch this.id to this.name. However I need to use the ID attribute.
document.getElementById('itemID').value = this.id;
'itemID' is a hidden input field.
I've tried applying runat="server", clientidmode="static" / "autoID" but no luck so far.
Why is my dynamic controls getting the ID assigned to the name attribute instead of the ID attribute?
Is there something missing that I need to add to make it apply it to the ID attribute?
If you need any more information just comment below :-)
Additional Information
The web page is using a master page, so the controls are added within content place holders.
I've tried setting the ID in the javascript which added the ID to the attribute correctly but when doing the following the item was still null.
this.id = this.name;
TextBox selectedItem = (TextBox)exampleList.FindControl(itemID.Value);
Example of the dynamic control after being added:
<input name="ctl00$uniqueBody$ctl86" type="text" value="EXAMPLE" runat="server">
As you can see the name attribute holds the ID.
When you create Dynamic Control and want them to have an id, you need to specify that when creating them.
TextBox tb = new TextBox();
tb.ID = "TextBox1";
PlaceHolder1.Controls.Add(tb);
Now JavaScript can locate them by their ID, and FindControl will also work. FindControl works recursively, so you first need to find the ContentPlaceHolder on the Master page, then the PlaceHolder and then the dynamically created TextBox.
ContentPlaceHolder contentPlaceHolder = Master.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
PlaceHolder placeHolder = contentPlaceHolder.FindControl("PlaceHolder1") as PlaceHolder;
TextBox textbox = placeHolder.FindControl("TextBox1") as TextBox;
If the value of this.ID is not a string, but instead is of type int, double, etc, you'll see problems like this with your code when trying to assign to a string value. You need to use either Convert.ToString(this.id) or this.id.ToString(). The latter cannot handle nulls on its own.
document.getElementById('itemID').value = Convert.ToString(this.id);
document.getElementById('itemID').value = this.id.ToString();
What you are seeing now instead is the default method, which prints the control Type. If you see the type like that, you likely passed the whole control in and not its value. That suggests you need to check a text value.
document.getElementById('itemID').value = this.id.Text;
Have you tried:
this.name.id
?

Updating a jQuery Mobile checkbox (with GWT)

I'm using jQuery Mobile enhanced GWT and have a checkbox. But when I set the GWT checkbox using a normal check.setValue(false); it sets the value, but does not change the jQM enhanced display.
I have tried various combinations of refresh and prop/attr but they all seem to either do nothing at all or fail with a message saying it's not initialised.
The code is various variants of $('input[name="gwt-debug-cwCheckBoxMonday"]').prop("checked", true).checkboxradio('refresh');
I gout it to work using $("input[type='checkbox']").checkboxradio("refresh"); but I want to only do it for a specific one, not every one.
I made a fiddle at http://jsfiddle.net/liftarn/38uch/ to illustrate the problem.
The HTML is from http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCheckBox
It is a bit tricky. First you have to get the input element. One way to do it is (where w is your CheckBox):
NodeList<Element> nl = w.getElement().getElementsByTagName("input");
Element e = nl.getItem(0);
Now you have the input element and can get the id using getId()
Then you just make a native function taking the id and the boolean value and do
$wnd.$("#" + id).prop("checked", false).checkboxradio("refresh");

Input value updated via JS won't display

I'm creating and setting a default value for an input (type is left default, but when specifically set to text, I get the same problem) element. The value, according to JS, does update, but I don't see the change in either the displayed page or source.
temp3 = document.createElement('input'); temp2.appendChild(temp3);
temp3.value = "a";
If I check the value, via alert(temp3.value), I do see "a", but I see no change on the created text input on the page, nor when I check via Chrome's Inspect element feature.

Clone a file input element in Javascript

I have a file input element that needs to be cloned after the user has browsed and selected a file to upload. I started by using obj.cloneNode() and everything worked fine, that is until I tried using it in IE.
I've since tried using jQuery's clone method as follows:
var tmp = jQuery('#categoryImageFileInput_'+id).clone();
var clone = tmp[0];
Works as expected in FireFox, but again not in IE.
I'm stuck. Anyone have some suggestions?
Guessing that you need this functionality so you can clone the input element and put it into a hidden form which then gets POSTed to a hidden iframe...
IE's element.clone() implementation doesn't carry over the value for input type="file", so you have to go the other way around:
// Clone the "real" input element
var real = $("#categoryImageFileInput_" + id);
var cloned = real.clone(true);
// Put the cloned element directly after the real element
// (the cloned element will take the real input element's place in your UI
// after you move the real element in the next step)
real.hide();
cloned.insertAfter(real);
// Move the real element to the hidden form - you can then submit it
real.appendTo("#some-hidden-form");
Editing the file form field is a security risk and thus is disabled on most browsers and should be disabled on firefox. It is not a good idea to rely on this feature. Imagine if somebody was able, using javascript, to change a hidden file upload field to, lets say,
c:\Users\Person\Documents\Finances
Or
C:\Users\Person\AppData\Microsoft\Outlook.pst
:)
In jQuery fileupload widget there is a file input replace method to get around the change event listener only firing once.
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js#L769
(_replaceFileInput method in jquery.fileupload.js)
You can apply other method. You have to send real element to an iframe and cloned elements insert to form. For example:
$("INPUT[type='file']").each
(
function(index, element)
{
$(this).wrap("<div></div>");
var Div = $(this).parent();
$(this).appendTo("FORM[name='forIframe']"); // This form for iframe
Div.append($(this).clone());
}
);
If you use this method your form will send file to a server, but only one note, in Chrome an IE inputs with files is reseted.

Categories