Getting a radio button value

[treeleaf20]

All,

I have the following code:

<form action="" name="myform" method="post">
<input type="hidden" id="picimages" name="picimages" value="<?php echo $resultsetstory['bigger_id']; ?>" />
  <p>
    <label>
      <input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetstory['picture_id']; ?>" />
      <?php
  if($resultsetstory['title']<>""){
echo $resultsetstory['title'];
}else{
echo "Image 1";
}
?>
  </label>
    <br />
    <label>
      <input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetpic2['picture_id']; ?>" />
      <?php
  if($resultsetpic2['title']<>""){
echo $resultsetpic2['title'];
}else{
echo "Image 2";
}
?>
  </label>
    <br />
<input name="submit" type="button" value="Vote!" onclick="javascript:voteupdate(this.myform);"/>
  </p>
</form>

When I submit this, it goes to this function:

function voteupdate(obj) {
var poststr = "picimage=" + document.getElementById("picimage").value +
"&bigger_id=" + encodeURI( document.getElementById("bigger_id").value );
alert(poststr);
makePOSTRequest('voteresults.php', poststr);
   }

However I can't get the value of the radio group for the one that is selected. Can someone see what is wrong?

 

Thanks.

[KevinM1]

1. Why are you passing the form to the function when you don't use that information?

2. You use the same id - picimages - twice.  This is wrong.  An id is supposed to be unique, meaning only one id per element per page.

3. You have to check to see if a button has been clicked.

4. An unobtrusive style would serve you well:

 

<form action="" name="myform" method="post">
<input type="hidden" name="picimages" value="<?php echo $resultsetstory['bigger_id']; ?>" />
  <p>
    <label>
      <input type="radio" name="picimages" value="<?php echo $resultsetstory['picture_id']; ?>" />
      <?php
     if($resultsetstory['title']<>""){
echo $resultsetstory['title'];
}else{
echo "Image 1";
}
?>
     </label>
    <br />
    <label>
      <input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetpic2['picture_id']; ?>" />
      <?php
     if($resultsetpic2['title']<>""){
echo $resultsetpic2['title'];
}else{
echo "Image 2";
}
?>
     </label>
    <br />
   <input name="submit" id="submit" type="button" value="Vote!" />
  </p>
</form>

<!-- after all your HTML is output -->

</body>

<script type="text/javascript">
   var button = document.getElementById('submit');

   button.onclick = function() {
      var radios = document.forms["myform"].elements["picimages"];
      var radiosLength = radios.length;
      var chosen = '';

      for(var i = 0; i < radiosLength; ++i) {
         if(radios[i].checked == true) {
            chosen = radios[i].value;
         }
      }

      if(chosen){
         var postStr = "picimage=" + chosen + "&bigger_id=" + encodeURI(document.getElementById('bigger_id').value);

         alert(postStr);

         makePOSTrequest('voteresults.php', postStr);
      }
      else {
         //error
      }
   }
</script>