I have two <span> -tags with the same ID in different places om my page. I know it's wrong to use the same ID twice. It's no problem for me to change the ID's to classes.
HTML:
<span id="tumme">4</span>
...
<span id="tumme">4</span>
....
is updated by
AJAX:
document.getElementById(tumme).innerHTML = xmlHttp.responseText;
but only on the <span> is updated.
Any ideas?
From the W3C website about id's (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2):
This attribute assigns a name to an element. This name must be unique in a document.
In other words, give the second span another id to fix it.
Change the id= to class= because 2 elements with the same id is WRONG
Then either using jQuery and its powerful selectors, or here's a function some guy wrote to get all elements by class name
Since an id must be unique per document, you cannot have two elements with the same id. Find some other way to identify the elements. A class is the standard means to mark an element as a member of a group. You could also give them different ids and then store those ids in an array.
<span class="tumme"> 4 </span>
Then when you get the data from your XHR request back, find all the elements and loop over them. While you can roll your own method for getting elements by class name, it is easier to use an existing one.
Looping over them will be just a case of:
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = xmlHttp.responseText;
}
Use getElementsByClass:
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Well, you could use the NAME attribute. It is perfectly valid to have multiple nodes with the same NAME.
So you would have these nodes:
<span id="somethingUnique1" name="tumme"></span>
<span id="somethingUnique2" name="tumme"></span>
To update them, you would do something like:
var nodes = document.getElementsByName("tumme");
for (var i = 0, node; node = nodes[i]; i++) {
node.innerHTML = xmlHttp.responseText;
}
Related
i want to create array of same id or name using getElementById..
i have a "add button", when the user press this button, its generate a dropdown list(dynamic) which the value is get from mysql..
and its looks like this when the user press 3 times..
i want to create an array of this id, and store it to mysql..
this is my JS code :
var menu_paket_array = document.getElementById('menu_paket').value;
alert(menu_paket_array);
the problem is, when i try to create this array(menu_paket_array), the value in this array is just the first id (Test 1) only..
how can i fix this?
thanks...
Using the same id for more than one element is wrong. Id is to uniquely identify certain element. Using it for more elements defeats its -purpose. If you need that for i.e. CSS styling, then use class instead, which is designed just for such scenarios.
An ID must be unique on a page. You can only use it on one element.
Instead, use a CSS class or element type to iterate (here's a fiddle demonstrating this code):
function alertValues() {
var select, selects = document.getElementsByTagName('select');
var out = "";
for (var i = 0; i < selects.length; i++) {
select = selects[i];
if (select.className && select.className.match(/CLASSNAME_TO_INCLUDE/)) {
out += select.options[select.selectedIndex].value;
}
}
alert(out);
}
A better solution, of course, would be to utilize a dom library like jQuery or mootools, with which you could do something like this:
jQuery(function($) {
vals = [];
$('select.CLASSNAME').each(function() { vals.push($(this).val()); });
alert(vals.join(','));
});
document.getElementsByClassName(names);
Where names is the classname u generate for each one.
Instead of assigning each element with id='menu_paket' (for the reasons #WebnetMobile.com explained) assign class='menu_paket'.
Instead of var menu_paket_array=document.getElementById('menu_paket').value;, do
var temp_array = document.getElementsByClassName('menu_paket');
var menu_paket_array = [];
for(i in temp_array){
menu_paket_array[] = temp_array[i].value;
}
I want to generate a certain number of divs using PHP with different ids, I know how to generate them for a set number, but how do I generate on click, with different ids? Also, if
I wanted to delete a div (and its corresponding id) how would I do that?
This is the code I have for generating (6) divs
$element = "<div></div>";
$count = 6;
foreach( range(1,$count) as $item){
echo $element;
}
I need something like the click() in jquery/javscript (but in PHP) to trigger div creation instead and I don't even know where to start.
In JavaScript you can do
function createDiv(id, parent)
{
var elem = document.createElement('div');
elem.id = id;
document.getElementById(parent).appendChild(elem);
}
createDiv(10, id-of-parent-elem-to-append-to);
where 10 will be the ID of the new element and you will have to supply the ID of the element to which the new DIV should be appended, as the 2nd argument
echo "<div id='$item'></div>";
instead?
Ok, to create them with different ids you can do something like this:
$element = "<div id=";
$count = 6;
foreach($id=0;$id<$count;$id++) {
echo $element."div".$id."></div>";
}
In the same way as you appended the id you can append an onClick event that says something like this:
onclick="this.style='visibility:hidden;'";
or something along those lines.
Hope this helps.
I have a loop in php that echos out a <input type="hidden" id="lol" value=$id />
Every time the loops go through i get a new value in the hidden input field as you can understand.
Now, im trying to grab the value from each of these items and get grab it with Javascript and SAJAX.
The javascript im using now works, But! It only grabs the first value (because the ID is the same on each input)
Javscript:
function Showbooking() {
id = document.getElementById('lol').value;
x_showBookingForm(id, do_showBookingForm);
}
function do_showBookingForm(html) {
openPopup(600, 550, html);
}
As you can see im opening a POPUP with javascript aswell and exports the value into that popup window.
So on every popup I get the same value (the value from the first input).
How Do I get around this problem?
Change ID to name
Use document.getElementsByName and loop
var lols = document.getElementsByName("lol");
var vals=[];
for (var i=0, n=lols.length;i<n;i++) {
vals.push(lols[i].value);
}
alert(vals.join(","));
getElementById says element rather than elements because it returns only one item. id is supposed to be unique. You could do something to the effect of:
var inputs = document.getElementsByTagName("input");
var values = [];
for(var i=0;i<inputs.length;i++){
if(inputs[i].type === "hidden"){
values.push(inputs[i].value;
}
}
I have a dynamically generated table with php that has same rows. Need to get value from cell 1 in row 1 and value from cell 1 in row 2 and compare them. If they are the same remove entire row or hide... Do that for the whole table... Any help is appreciated.. Thanks!!
Haave this so far:
var numRows = $('table#changeSubjectKatedra tr').lenght;
var i = 0;
do {
var cur = $('input#'+i).val();
var next = $('input#'+(i+1)).val();
if(cur == next){
$('tr#'+i).remove();
}
i++;
} while(i<numRows);
The row in table looks like this:
<tr id='idNum'><td>someText<input type='hidden' value='someData' id='idNum'>
</td><td>someText</td></tr>
Note 1. You should do in on server side with PHP, not with JavaScript.
Note 2. You must use unique id for each element.
Note 3. Avoid using numerical ids of elements.
Note 4. You don't need ids at all for doing what you want.
If you still want to do it in JavaScript, I suggest you to do it this way: (live demo here)
var rows = $("#changeSubjectKatedra tr");
for(var i = 0; i <= rows.length - 2; i++) {
if ($(rows[i]).find("input").val() ==
$(rows[i+1]).find("input").val()) {
$(rows[i]).remove();
}
}
You can use jQuery's .each function. This should work according to the description you provided:
$('table#changeSubjectKatedra tr').each(function() {
if (repeat == $(this).children("input")[0].value) {
$(this).remove();
}
repeat = $(this).children("input")[0].value;
});
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('detail');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var prezime = document.getElementById('form1').getAttribute('value');
var queryString = "?prezime=" + prezime ;
PHP
echo '<input type="text" id="form1" class="button1" value="'. $row["prezime"] .'"
name="'. $row["prezime"] .'" onclick="ajaxFunctionII()" >';
echo("</form>");
Id is always unique to one element, you should not use same id for more than one element.
even though you use, the getElementById will select only the 1st element the DOM find, it wont look for any other element.
Make use of name or class and to get these elements use getElementsByName and getElementsByClassName.
Reference
More than one element with same ID is bad, invalid and will cause problems. Don't do that.
Give each element different ID and if you want to have them in "groups" give them a name.
To get collection of elements by name have this:
var arrButtons = document.getElementsByName("detail");
ajaxDisplay = arrButtons[1];
ajaxDisplay.innerHTML = ajaxRequest.responseText;
In the above, you will assign the second button.
Ideally we should be having only one element within a DOM, with any given id value.
You can try document.getElementsByTagName and document.getElementsByName.
If you are using jQuery, it should be very simple $('#id') or $('.classname') will return all matching elements.
you should go with class instead of id.the same issue is solved on the given link please check that.
Get multiple elements by Id