CODEWITHSUNDEEP
javascriptphphtml
Marcus
Marcus

Reputation: 113

Why the JavaScript result always return first value?

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?

Upvotes: 0

Views: 684

Answers (3)

Lajos M&#233;sz&#225;ros
Lajos M&#233;sz&#225;ros

Reputation: 3871

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;

Upvotes: 0

Quentin
Quentin

Reputation: 943163

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:

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

Upvotes: 2

Anonymoose
Anonymoose

Reputation: 2461

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);
}

Upvotes: 1

Related Questions