3 Replies - 10548 Views - Last Post: 14 August 2011 - 03:41 PM

#1 rjosori  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 10-May 09

jQuery/Radio Button Click event issue...

Posted 14 August 2011 - 12:43 PM

Thanks to Martyr2 for the help yesterday. I am still having an issue with the radio buttons and jQuery, so I've included a real copy of the code to see what I'm doing wrong:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>

<link href="css/productStyles.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="Scripts/formStyle.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        $("input[name*='rdio']").click(function() {
            window.alert($(this).val());
        });

    });
</script>


</head>

<body>
<div id="edit_panel"><img src="images/edit_panel.png" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="10,11,84,54" href="redirect.php" target="_self" />
    <area shape="rect" coords="425,12,571,53" href="index.php?option=com_content&view=article&id=41%20" />
    <area shape="rect" coords="688,11,781,55" href="delete.php" target="_self" />
    <area shape="rect" coords="783,10,888,55" href="redirect.php" target="_self" />
  </map>
</div>


<table id="products" class="products" cellpadding="0" cellspacing="0">
	<tr>
     <td></td>
     <td></td>
     <td class="tableTitles">Part Name</td>
     <td class="tableTitles">Part Number</td>
     <td class="tableTitles">Dimensions</td>
     <td width="371"><img src="images/barBgTop.png" /> </td>
    </tr>
    
  <form name="productEdit" action="" method="POST">

    <tr class='linky'>
    	<td class='padded'>
    		<div id='radio' class='radio'>
        		<input id='radio_1' type='radio' name='rdio' class='styled' value='901-0022-001'/>
            	<label for='radio_1' value='901-0022-001'></label>
        	</div>
      	</td>
        <td class='antenna'>
        	<img src='images/720-0001-000.jpg' width='140' height='140' />
        </td><td class='txtTD'>Broadband Antenna (Medium Gain, Omni Coverage)</td>
        <td id='num' class='txtTD'>901-0022-001</td>
        <td class='txtTD'>6 Dia., H 1.25</td>
        <td class='bar' style= 'padding-left:200px;' background='images/barBG2.png'><img src='images/bar2.png' width='90px' height='19px'/></td>
    </tr>
    
    <tr class='linky'>
    	<td class='padded'>
        	<div id='radio' class='radio'>
            	<input id='radio_2' type='radio' name='rdio' class='styled' value='901-0012-001'/>
                <label for='radio_2' value='901-0012-001'></label>
            </div>
        </td>
        <td class='antenna'>
        	<img src='images/720-0002-000.jpg' width='140' height='140' />
        </td>
        <td class='txtTD'>Broadband Antenna (High Gain, Sector Coverage)</td>
        <td id='num' class='txtTD'>901-0012-001</td>
        <td class='txtTD'>H 4.45, W 2.50, L 8.92</td>
        <td class='bar' style= 'padding-left:190px;' background='images/barBG2.png'>
        	<img src='images/bar2.png' width='50px' height='19px'/>
        </td>
    </tr>
    <tr class='linky'>
        <td class='padded'>
        	<div id='radio' class='radio'>
        		<input id='radio_3' type='radio' name='rdio' class='styled' value='901-0011-001'/>
        		<label for='radio_3' value='901-0011-001'></label>
        	</div>
        </td>
        <td class='antenna'>
        	<img src='images/720-0003-000.jpg' width='140' height='140' />
        </td>
        <td class='txtTD'>Broadband Antenna (Medium Gain, Sector Coverage)</td>
        <td id='num' class='txtTD'>901-0011-001</td><td class='txtTD'>H 3.37, W 2.50, L 4.57</td>
        <td class='bar' style= 'padding-left:190px;' background='images/barBG2.png'>
        	<img src='images/bar2.png' width='50px' height='19px'/></td></tr><tr class='linky'><td class='padded'>
            	<div id='radio' class='radio'>
                	<input id='radio_4' type='radio' name='rdio' class='styled' value='901-0048-001'/>
                    <label for='radio_4' value='901-0048-001'></label>
                </div>
            </td>
            <td class='antenna'>
            	<img src='images/901-0048-001 S Band Antenna.png' width='140' height='140' />
            </td><td class='txtTD'>S-Band</td>
            <td id='num' class='txtTD'>901-0048-001</td>
            <td class='txtTD'>2.23"H x 2.2"W x 2.2"L</td>
            <td class='bar' style= 'padding-left:200px;' background='images/barBG2.png'>
            	<img src='images/bar2.png' width='20px' height='19px'/>
            </td>
        </tr> 
      </form>
 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td width="371"><img src="images/barBgBtm.png" /> </td>
    </tr>    
</table>
</body>
</html>




What I'm trying to do is to actually have an alert window pop-up and give me the 'value=' for the <input type="radio"> that is being clicked. I'm not being able to do that, even though I see nothing wrong with my code. Obviously, I'm not trying to just end there (at having an alert pop-up), I'm just using this method as a testing tool. Ultimately what I want to do is feed that value to a PHP/MySQL command to delete a row in a database that has that value. So if anybody can help me in both figuring out why the jQuery code isn't working and feeding the value to PHP/MySQL code it will be greatly appreciated.

<?R

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery/Radio Button Click event issue...

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 5078
  • View blog
  • Posts: 13,707
  • Joined: 18-April 07

Re: jQuery/Radio Button Click event issue...

Posted 14 August 2011 - 01:48 PM

Did you even understand what my last example was showing you? Put this in for your javascript...

<script type="text/javascript">
    $(document).ready(function() {
        $("input[name*='rdio']").click(function() {
            alert($(this).parent().parent().siblings("#num").text());
        });

    });
</script>



Then reload your page and click a radio button. Notice we go up to the parent, then up to its parent, then ask for a sibling which has an ID of #num and get its value using the text() call.

Step through it until you understand why this is working.

Thanks!
Was This Post Helpful? 0
  • +
  • -

#3 rjosori  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 10-May 09

Re: jQuery/Radio Button Click event issue...

Posted 14 August 2011 - 02:08 PM

I did understand what you said yesterday. However neither the code you just provided nor the one I wrote on my own are working. Yesterday's question was about DOM issues, that's not the case today. I'm for some reason not being able to get the alert to pop-up when I click the radio buttons, even though the code looks fine. I stepped through your code and it looks perfect, however it doesn't work with my file. Here's the live example, maybe you can see something I'm missing: http://graphilactic....oductsEdit2.php

thanks again,

<?R
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 5078
  • View blog
  • Posts: 13,707
  • Joined: 18-April 07

Re: jQuery/Radio Button Click event issue...

Posted 14 August 2011 - 03:41 PM

Maaaaan, your radios are not even radio controls! Your radios are <span> tags! Your radio buttons are actually hidden because you apply the style "display: none" to them using CSS. What you are clicking are not radio controls so of course your javascript is not going to fire.

If your radio controls are hidden, how are they suppose to trigger the script? The code you show there is not even the same that is on the site.

Also a tip for you... you can't have more than one control with the same ID value. Just so you know. Doesn't affect the script I gave, but your IDs should all be unique.

I think you have some other work to do here. ;)

P.S. Don't prv message me. There is a reason why I am answering you only here. To prevent others from making similar mistakes.

This post has been edited by Martyr2: 14 August 2011 - 03:43 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1