Why the JavaScript result always return first value?

Question

here is my problem. I'm currently trying to customize joomla article content with some module. As i'm trying out hide some div before the user had click on the input. Lets say user click Test1 which is a radio button , then another field which i hide with div will shown up the content of Test1. All the detail is load from mysql database.

Here is my javascript code that i trying to show the value. But it alway show me first value although i click other value suck as Test2 or Test3.

Example:

<script type="text/javascript">
        function showBox1(){
            document.getElementById('hideBox1').style.display ="";

var test = document.getElementById('123').value;

confirm (test);
</script>

Here is my php code:

<?php

// Get default database object
$db =JFactory::getDBO();

// Get a new JDatabaseQuery object
$query = $db->getQuery(true);

// Build the query
$query->select($db->quoteName('campusid'));
$query->from($db->quoteName('campus'));
$query->where($db->quoteName('collegeid').'='. $db->quote('1'));

// Set the query for the DB oject to execute
$db->setQuery($query);
// Get the DB object to load the results as a list of objects
$results = $db->loadObjectList();
if($results){
     foreach($results as $result)
     {
        echo "<label class='option block spacer-t10'>";
         echo "<input type='radio' name='$result->campusid' id='123' value='$result->campusid' onClick='return showBox1()'><span class='radio'></span>";
 echo $result->campusid;
 echo '</label>';
 } 

}
else{ echo 'Error';}
?>

As an example the output for first div is 3 radio button, each radio button had it own value. When user click on either 1 of the radio button then it should pass the correct value to be shown up so that i can bring the value to the next div to select my database data. Is there any mistake i had made on my code that make me alway getting the first value although i click other radio button?

You can not have 2 or more element with the same id in a page. The browser behaviour is undefined in such cases. — Eineki
– Eineki, Commented Apr 22, 2014 at 8:39

Quentin · Accepted Answer · 2014-04-22 08:37:45Z

2

Each radio button is an element in its own right. The radio group is not a single element.

Every radio button has the same id, which is invalid and not allowed in HTML.

When you getElementById, the browser attempts to perform error recovery and gets the first element with that id (ignoring the others).

If you want to deal with a group of elements, then:

make them members of a class
getElementsByClassName
Loop over the result and test the checked property
When you find a true checked take the value of that element

answered Apr 22, 2014 at 8:37

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcus Over a year ago

Hi, can i just change my var test = document.getElementById('$result->id').value; then the echo "<input type='radio' id='$result->id' value='$result->campusid' onClick='return showBox1()'><span class='radio'></span>"; ?

Anonymoose · Accepted Answer · 2014-04-22 08:37:13Z

1

Your radiobuttons have the same id 123. You are selecting the element from the DOM using this id. Make sure every radiobutton has a unique id.

You don't even need the Id if you pass the element to the function.

HTML:

onClick='return showBox1(this)'

JavaScript

function showBox1(element){
    confirm (element.value);
}

answered Apr 22, 2014 at 8:37

Anonymoose

2,5017 gold badges40 silver badges71 bronze badges

Comments

Lajos Mészáros · Accepted Answer · 2014-04-22 08:45:36Z

0

First of all, all the radio buttons have the same id attributes: "123".

The document.getElementById() function expects, that a certain id is only present once on a page.

If you want to get the selected value for the elements with id "123", then you should select like this:

var test = document.querySelector("#123:checked")[0].value;

If this doesn't work, then try:

var test = document.querySelector("[id=\"123\"]:checked")[0].value;

answered Apr 22, 2014 at 8:45

Lajos Mészáros

3,8612 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Why the JavaScript result always return first value?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related