---
title: "Har flera rader med samma ID."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/191776-har-flera-rader-med-samma-id"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "apaaa"
published: "2013-10-11T11:29:08.000Z"
updated: "2013-10-15T18:14:43.000Z"
replies: 12
views: 1590
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/191776-har-flera-rader-med-samma-id"
---

# Har flera rader med samma ID.

## #1 — apaaa, 2013-10-11T11:29Z

Hej, hur får jag att javascriptet skall laddas om varje gång en ändring händer?

```php
while($i <= 50) {
<input type="text" name="tn' . $i . '" id="tn' . $i . '" size="5" class="field" onchange="showQuery(' . $row['ID'] . ')" value="'. $row['tn'] . '"/>
$i++;
}
```

```
function showQuery(id){
 var ajaxRequest;  // The variable that makes Ajax possible!
	
 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('txtHint');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.
 var projekt = document.getElementById('projekt').value;
 var uprojekt = document.getElementById('underprojekt').value;
 var uke = document.getElementById('uke').value;
 
 
  var tn1 = "tn" + id;
  
  var tn = document.getElementById(tn1).value;
  var tf = document.getElementById('tf').value;
  var th = document.getElementById('th').value;
  var tart = document.getElementById('tart').value;
 
 var queryString = "?projekt=" + projekt ;
 queryString +=  "&uprojekt=" + uprojekt + "&uke=" + uke + "&tn=" + tn + "&tf=" + tf + "&th=" + th + "&tart=" + tart + "&id=" + id;
 ajaxRequest.open("GET", "index.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
```

Permalänk: https://www.webforum.nu/p/191776

## #2 — voigtann1, 2013-10-12T09:51Z

vad är det som inte fungera?

Permalänk: https://www.webforum.nu/p/2314321

## #3 — apaaa, 2013-10-14T17:11Z

Hej.

Det som inte fungerar är att jag har en while() som kör ut massa inputs. för ex.
\<inpute type="text" id="tn'. row\['ID'\] . '"\>apa

men när jag updaterar projekt, uprojekt eller uke så finns ju inte dom kvar och javascriptet stannar. koden ser ut just nu:

```
function showQuery(id){
 var ajaxRequest;  // The variable that makes Ajax possible!
	
 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('txtHint');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.
 var projekt = document.getElementById('projekt').value;
 var uprojekt = document.getElementById('underprojekt').value;
 var uke = document.getElementById('uke').value;
 
    if (typeof id == 'undefined' || id === null || id === '') {
	 id = '0';
 }
 
 tn1 = 'tn' + id;
 tf1 = 'tf' + id;
 th1 = 'th' + id;
 tart1 = 'tart' + id;
 
 var tn = document.getElementById(tn1).value;
 var tf = document.getElementById(tf1).value;
 var th = document.getElementById(th1).value;
 var tart = document.getElementById(tart1).value;
 
  if (typeof tn == 'undefined' || tn === null || tn === '') {
	 tn = '0';
 } 
  if (typeof tf == 'undefined' || tf === null || tf === '') {
	 tf = '0';
 } 
  if (typeof th == 'undefined' || th === null || th === '') {
	 th = '0';
 } 
  if (typeof tart == 'undefined' || tart === null || tart === '') {
	 tart = '0';
 } 
 
 
 var queryString = "?projekt=" + projekt ;
 queryString +=  "&uprojekt=" + uprojekt + "&uke=" + uke + "&tn=" + tn + "&tf=" + tf + "&th=" + th + "&tart=" + tart + "&ID=" + id;
 ajaxRequest.open("GET", "index.php" + queryString, true);
 ajaxRequest.send(null); 
}
```

kan jag lägga koden nedanför i en egen funktion så de inte blir påvärkade av varandra?  har försökt men får det inte att fungera. 

```
 tn1 = 'tn' + id;
 tf1 = 'tf' + id;
 th1 = 'th' + id;
 tart1 = 'tart' + id;
 
 var tn = document.getElementById(tn1).value;
 var tf = document.getElementById(tf1).value;
 var th = document.getElementById(th1).value;
 var tart = document.getElementById(tart1).value;
```

 document.getElementById('txtHint'); ligger i body så allt nedanför uppdateras, kan jag få en egen funktion innanför body'n?

Permalänk: https://www.webforum.nu/p/2314344

## #4 — voigtann1, 2013-10-14T17:39Z

fast dom påverka ju inte varandra, om de finns så är de ju unika

det jag kan se är att getElementById kan bli null och då kan du inte hämta value på DOM referensen och kan krasha ditt anrop 

du visar PHP kod, mer intressant hade varit att få något hur din HTML kod faktist ser ut.

Permalänk: https://www.webforum.nu/p/2314345

## #5 — apaaa, 2013-10-14T18:21Z

Kan man undvika att få den att krascha genom att kolla om dom är null?

Permalänk: https://www.webforum.nu/p/2314346

## #6 — voigtann1, 2013-10-14T18:25Z

```
var returnValue = function(value) {
    return (typeof id == 'undefined' || id === null || id === '') ? '0' : id;
}

var returnDomValue = function(element) {
    var el = document.getElementById(element);
    return (el === null) ? '0' : element.value;
}

function showQuery(id){
    id = (typeof id == 'undefined' || id === null || id === '') ? '0' : id;
    var doc = document;
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    }catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    // Create a function that will receive data 
    // sent from the server and will update
    // div section in the same page.
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.getElementById('txtHint').innerHTML = ajaxRequest.responseText;
        }
    }

    // Now get the value from user and pass it to
    // server script.
    var projekt = doc.getElementById('projekt').value;
    var uprojekt = doc.getElementById('underprojekt').value;
    var uke = doc.getElementById('uke').value;
    var tn = returnDomValue('tn' + id);
    var tf = returnDomValue('tf' + id);
    var th = returnDomValue('th' + id);
    var tart = returnDomValue('tart' + id);
    var queryString = "?projekt=" + projekt + "&uprojekt=" + uprojekt + "&uke=" + uke + "&tn=" + tn + "&tf=" + tf + "&th=" + th + "&tart=" + tart + "&ID=" + id;

    ajaxRequest.open("GET", "index.php" + queryString, true);
    ajaxRequest.send(null); 
}
```

borde göra det.

Permalänk: https://www.webforum.nu/p/2314347

## #7 — apaaa, 2013-10-14T19:25Z

nu kraschar inte scriptet längre men tn, tf, th, tart får inga värden, står undefined på dessa hela tiden, skall hämta värdet ifrån en inpute, value, måste man inte berätta det någonstans?

Permalänk: https://www.webforum.nu/p/2314348

## #8 — voigtann1, 2013-10-14T20:02Z

vad är det för element du har? för om det inte är något input värde så har den inte .value

Permalänk: https://www.webforum.nu/p/2314349

## #9 — apaaa, 2013-10-15T03:51Z

```php
	echo '  <td class="tdl"><input type="text" name="tn" id="tn' . $row['ID'] . '" size="5" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['tn'] . '"/></td>';
	echo '  <td class="tdl"><input type="text" name="tf" id="tf' . $row['ID'] . '" size="5" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['tf'] . '"/></td>';
	echo '  <td class="tdl"><input type="text" name="th" id="th' . $row['ID'] . '" size="5" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['th'] . '"/></td>';
	echo '  <td class="tdl"><input type="text" name="tart" id="tart' . $row['ID'] . '" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['tart'] . '"/></td>';
```

Det ovanför ligger i en while($row = mysqli_fetch_array($result)) {
Den tar ju bort elementen då jag kör en sql-fråga när jag ändrar om projekt, uprojekt och uke, då finns ju inte de gamla kvar.

Permalänk: https://www.webforum.nu/p/2314350

## #10 — voigtann1, 2013-10-15T04:42Z

```
var returnDomValue = function(element) {
  var el = document.getElementById(element);
  return (el === null) ? '0' : el.value;
};
```

 skall det vara inte element.value (<http://jsbin.com/UduPOzI/1/>)

> **[apaaa skrev:](https://www.webforum.nu/p/1568976)**
>
> ```php
> 	echo '  <td class="tdl"><input type="text" name="tn" id="tn' . $row['ID'] . '" size="5" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['tn'] . '"/></td>';
> 	echo '  <td class="tdl"><input type="text" name="tf" id="tf' . $row['ID'] . '" size="5" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['tf'] . '"/></td>';
> 	echo '  <td class="tdl"><input type="text" name="th" id="th' . $row['ID'] . '" size="5" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['th'] . '"/></td>';
> 	echo '  <td class="tdl"><input type="text" name="tart" id="tart' . $row['ID'] . '" class="field" onchange="showQuery(' . $row['ID'] . ')" value="' . $row['tart'] . '"/></td>';
> ```
>
>
>
>
> Det ovanför ligger i en while($row = mysqli_fetch_array($result)) {
> Den tar ju bort elementen då jag kör en sql-fråga när jag ändrar om projekt, uprojekt och uke, då finns ju inte de gamla kvar.

spelar ingen roll, när du gör ajax anropet så finns dom väl där?

Permalänk: https://www.webforum.nu/p/2314351

## #11 — apaaa, 2013-10-15T13:01Z

whey, nu fungerar det! :)

Tack för hjälpen

Permalänk: https://www.webforum.nu/p/2314357

## #12 — apaaa, 2013-10-15T17:33Z

Kan man kolla vilket element som aktiverar scriptet?

Skall uppdatera med en sql men måste jämnföra om något blivit ändrat.

Permalänk: https://www.webforum.nu/p/2314360

## #13 — voigtann1, 2013-10-15T18:14Z

> **[apaaa skrev:](https://www.webforum.nu/p/1568990)**
>
> Kan man kolla vilket element som aktiverar scriptet?
> 
> Skall uppdatera med en sql men måste jämnföra om något blivit ändrat.

ja, det kan du, men du måste jämföra det nya värdet med defaultValue och jämföra dom, men du har ju fler element som skall jämföras. så det räcker ju inte att bara veta vilket element du triggar change eventet på.

Permalänk: https://www.webforum.nu/p/2314361

---

Tråden på webben: https://www.webforum.nu/amne/javascript/191776-har-flera-rader-med-samma-id