Develop Reference

get the all the id's from a class when the image is selected

I have few uploaded images in one div and I want to move them to another div and update the database table. For that I need the id's of the images selected and the name of the div where I want to move.
I have the id of the selected image using the check box but I am not sure how can I get all id's in the end .
function MoveImages(){
for ( var i = 0; i < $(".ct input[type=checkbox]:checked").length; i++) {
var element = $(".ct input[type=checkbox]:checked")[i];
var parent = element.parentNode;
var id = parent.getAttribute('id');
}
}
how can I get all the id's in the end ?
This is how my class looks like.
<div class="ct" id="559429bc0d559162552c9728">
<input type="checkbox" class="remove">
<img src="/image?id=c9728" data-src="random.JPG" id="previewImagec9728">
</div>
the move function should return all the id's.

With a bit of JQuery's $.each, substring, and JS array methods, you can grab the raw IDs and put them in an array like so:
var ids = [];
//For each element that matches ".ct input[type=checkbox]:checked".
$.each($('.ct input[type=checkbox]:checked'), function() {
//Find the image element, get the id value, and strip the first 12 characters.
var id = $(this).find('img').attr('id').substring(12);
//Put ID in array.
ids.push(id);
});

Use $.map():
var yourIds = $(".ct input[type=checkbox]:checked").map(function(){
return $(this).parent().attr('id');
});

Try jquery's each:
$('.ct').each(function() {
var id = $(this);
})

use :has and .map
$('.ct:has(:checked)').toArray().map(function(element, index) { return element.id })
or
$('.ct:has(:checked)').map(function(index, element) { return element.id }).toArray()
in both cases .toArray() is to get a normal array instead of a jquery array

Just trying to access a value in an a element

I've got multiple a elements, that are generated on the page view by a for loop that when they are clicked, send an ajax post to the database, to mark the item in the database by its id, that is equal to the value in the a element but my code is not working, anybody have any insight on why? Thanks.
<a href='#' value='(loaded from database)' id='markAsRead'>
var element = document.getElementById('markAsRead');
element.addEventListener('click', function() {
alert(this.value);
});

Anchors don't have values like inputs do, you should use a data-attribute
<a href='#' data-value='(loaded from database)' id='markAsRead'>
var element = document.getElementById('markAsRead');
element.addEventListener('click', function() {
alert(this.getAttribute("data-value"));
});

the id attribute must be unique.
if you want to have a group of controls with the same identifier you can use the name attribite.
if you look at the functions for dom manipulation:
document.getElementById() - Element (singular)
document.getElementsByName() - Elements (plural)
An example of adding a unique (depending on circumstances) id
for (var index = 0; index < 10; index++) {
var element = document.createElement("a");
element.setAttribute("data-value", "your value");
element.setAttribute("id", "markAsRead_" + index);
element.addEventListener('click', function() {
alert(this.getAttribute("data-value"));
});
document.getElementsByTagName("body")[0].appendChild(element);
}

How to apply onfocus function to all "input" objects?

I'd like to create an onfocus function to my input fields in a form. I'm working with a drag and drop landing page wizard(in Marketo) therefore I don't have access to the HTML tags.
I tried to do use getElementById and it worked only on the first field. I also tried the following:
<script>
var input = document.getElementsByTagName('input')[0]
input.onfocus = function() {
this.value=''
}
</script>

You query for all the <input>s elements, but work only with the first match:
var input = document.getElementsByTagName('input')[0]
Iterate over all the matches and do your magic:
var inputs = document.getElementsByTagName('input');
for (var i=0; i< inputs.length; i++){
inputs[i].onfocus = function(){this.value = '';};
}
If you can use jQuery, it's a lot easier:
$('input').focus(function(){this.value = '';});

Another variant would be this
//get all inputs
var inputs = document.getElementsByTagName('input')
//cache the length
, inputsLen = inputs.length;
//define one handler
function focusHandler(){
this.style.backgroundColor = 'red';
}
//loop through all
while(inputsLen--){
//each element's onfocus references only one function instead of "one each"
inputs[inputsLen].onfocus = focusHandler;
}

yea ,in jquery you can do it like:
$("input").on("focus",function(){
//function data block goes here
});

Everyone beat me to it but try this
$("input").on("focus",function()
{
this.value=''
});

How to remove style one click event?

How can i remove the style class applied to a textbox on the click event? I'm calling the textbox element using getElementsByName(). Here's my code:
<input id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
function clearText(element)
{
id = element.getAttribute("id");
var textElement = document.getElementById(id);
textElement.value = "";
var element = document.getElementsByName("popUpText");
var count = 0;
for (count = 0; count < 2; count++) {
var id = element.item(count);
id.classname = "";
}
}
In the above script, im not getting the id in the variable id. Right now the values are like "#inputTextBoxName". Please help.

you can use removeClass();
you can manege your styling using attr();
exp:
$("#yourid").attr("style","float: right");
or remove class using
$("#yourid").removeClass("yourClass");

It is case sensitive so
id.className = '';

If you're trying to remove the class from the textbox when you click on the textbox itself, that code is far, far longer than it needs to be.
HTML:
<input type="text" id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
Javascript:
<script>
function clearText(element) {
element.className = '';
element.value = '';
}
</script>
That said, inline event handlers (ie. declaring an onclick attribute on your HTML element) are a bad practice to get into.
Also, if you pass in a reference to an element, get its id, then call document.getElementById() with said id, you end up with two references to the same element. Yes, it should work, but totally pointless.

How can I get an element's ID value with JavaScript?

Is there another way to get an DOM element's ID?
element.getAttribute('id')

Yes you can just use the .id property of the dom element, for example:
myDOMElement.id
Or, something like this:
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
alert(inputs[i].id);
}

Yes you can simply say:
function getID(oObject)
{
var id = oObject.id;
alert("This object's ID attribute is set to \"" + id + "\".");
}
Check this out:
ID Attribute | id Property

This would work too:
document.getElementsByTagName('p')[0].id
(If element where the 1st paragraph in your document)

Super Easy Way is
$('.CheckBxMSG').each(function () {
var ChkBxMsgId;
ChkBxMsgId = $(this).attr('id');
alert(ChkBxMsgId);
});
Tell me if this helps

In events handler you can get id as follows
function show(btn) {
console.log('Button id:',btn.id);
}
<button id="myButtonId" onclick="show(this)">Click me</button>

This gets and alerts the id of the element with the id "ele".
var id = document.getElementById("ele").id;
alert("ID: " + id);

You need to check if is a string to avoid getting a child element
var getIdFromDomObj = function(domObj){
var id = domObj.id;
return typeof id === 'string' ? id : false;
};

Yes. You can get an element by its ID by calling document.getElementById. It will return an element node if found, and null otherwise:
var x = document.getElementById("elementid"); // Get the element with id="elementid"
x.style.color = "green"; // Change the color of the element