CODEWITHSUNDEEP
javascriptclasshtml
user2001054
user2001054

Reputation: 25

Javascript, how can i place value in div on class instead of id

I'm working on an html form, with steps and on the last page an summary. This is working good, but now i want to show the value based on div class instead of div id, this because i want to show the value multiple times. This is the javascript:

 <SCRIPT TYPE="text/javascript">
 <!-- 
 function copyText(e)
 {    
  document.getElementById( e.name + 'preview' ).innerHTML = e.value;
 }
 //-->
 </SCRIPT> 


<script>
$("text1preview").draggable({ containment: '#dragcontainer' });
$("address1preview").draggable({ containment: '#dragcontainer' });
$("titlepreview").draggable({ containment: '#dragcontainer' });
$("zipcodepreview").draggable({ containment: '#dragcontainer' });
$("descriptionpreview").draggable({ containment: '#dragcontainer' });
$("wijkpreview").draggable({ containment: '#dragcontainer' });
$("address2preview").draggable({ containment: '#dragcontainer' });
$("tagspreview").draggable({ containment: '#dragcontainer' });
$(".catidpreview").draggable({ containment: '#dragcontainer' });
$("pricepreview").draggable({ containment: '#dragcontainer' });
</script>

And this is the summary html:

  <tr>
    <td width="220">Samenvatting</td>
    </tr>
<tr>
    <td>Categorie:</td>
    <td><div class="categoryid"></div></td>
    </tr>
  <tr>
    <td>Titel van uw object:</td>
    <td><div id="titlepreview"></div></td>
   </tr>
 <tr>
    <td>Adres:</td>
    <td><div id="address1preview">  </div> </td>
    </tr>
    <tr>
    <td>Postcode</td>
    <td><div id="zipcodepreview"></div></td>
    </tr>
    <tr>
    <td>Plaats:</td>
    <td><div id="address2preview"></div></td>
    </tr>
  <tr>
    <td>Wijk:</td>
    <td><div id="wijkpreview"></div></td>
    </tr>
  <tr>
    <td>Omschrijving:</td>
    <td><div id="descriptionpreview"></div></td>
  </tr>
  <tr>
    <td>Tags:</td>
    <td><div id="tagspreview"></div></td>
  </tr>
  <tr>
    <td>Prijs per periode:</td>
    <td><div id="pricepreview"></div></td>
  </tr>
</table>

Upvotes: 0

Views: 362

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You would need something like this

 function copyText(e)
 {
    var matchingElements = document.getElementsByClassName( e.name + 'preview' ),
        matchCount = matchingElements.length,
        value = (e.nodeName === 'SELECT') ? e.options[e.selectedIndex].text : e.value;

    for (var i =0; i< matchCount; i++){
       matchingElements[i].innerHTML = value;
    }
 }

For IE compatibility see javascript document.getElementsByClassName compatibility with IE

Upvotes: 1

Related Questions