Problem using radio buttons to update string value in Form field

HI

I am trying to create a page for a touchscreen monitor. The page will display a numeric keypad 0 - 9 reset button and enter button.

I have cobbled together some javascript, which i used before for multiple record updates. The script function passes the values of the selected radio buttons to a hidden form field.

The problem I have is if the number i need to enter = 222 , the radio button can only be selected once. I have tried to add onchange, which deselects the radio button, but then when i click it again the value is not passed to the hidden field.

here is the code i'm using

<script language="JavaScript" type="text/JavaScript">

function RecUpdate(RecID){
var ThisID = "" + (RecID) + ""
if (document.product_form.hidRecIDs.value == ""){
document.product_form.hidRecIDs.value = (ThisID)
}
if (document.product_form.hidRecIDs.value != ""){
var str = document.product_form.hidRecIDs.value;
var pos = str.indexOf(ThisID);
if (pos == -1) {
document.product_form.hidRecIDs.value = document.product_form.hidRecIDs.value + "" + (ThisID)
}
}
}

</script>

    <form name="product_form" method="post" action=""><input name="hidRecIDs" type="text" value="<%= intRecID %>" size="20">
          <table width="350" border="0">
            <tr>
              <td width="70" height="70" background="1.gif"> <div align="center">
                  <input type="radio" name="txtText1" value="0" onclick="RecUpdate('1')" onchange="checked=false" >
                </div></td>
              <td width="70" height="70"> <div align="center"> </div></td>
              <td width="70" height="70" background="2.gif"> <div align="center">
                  <input type="radio" name="txtText2" value="0" onclick="RecUpdate('2')"onchange="checked=false">
                </div></td>
              <td width="70">&nbsp;</td>
              <td width="70" height="70" background="3.gif"><div align="center">
                  <input type="radio" name="txtText3" value="0" onclick="RecUpdate('3')"onchange="checked=false">
                </div></td>
            </tr>
            <tr>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td width="70" height="70" background="4.gif">
                <div align="center">
                  <input type="radio" name="txtText4" value="0" onclick="RecUpdate('4')"onchange="checked=false">
                </div></td>
              <td><div align="center"></div></td>
              <td width="70" height="70" background="5.gif">
                <div align="center">
                  <input type="radio" name="txtText5" value="0" onclick="RecUpdate('5')"onchange="checked=false">
                </div></td>
              <td>&nbsp;</td>
              <td width="70" height="70" background="6.gif">
                <div align="center">
                  <input type="radio" name="txtText6" value="0" onclick="RecUpdate('6')"onchange="checked=false">
                </div></td>
            </tr>
            <tr>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td width="70" height="70" background="7.gif">
                <div align="center">
                  <input type="radio" name="txtText7" value="0" onclick="RecUpdate('7')"onchange="checked=false">
                </div></td>
              <td><div align="center"></div></td>
              <td width="70" height="70" background="8.gif">
                <div align="center">
                  <input type="radio" name="txtText8" value="0" onclick="RecUpdate('8')"onchange="checked=false">
                </div></td>
              <td>&nbsp;</td>
              <td width="70" height="70" background="9.gif">
                <div align="center">
                  <input type="radio" name="txtText9" value="0" onclick="RecUpdate('9')"onchange="checked=false">
                </div></td>
            </tr>
            <tr>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td width="70" height="70" background="0.gif">
                <div align="center">
<input type="radio" name="txtText0" value="0" onclick="RecUpdate('0')"onchange="checked=false">
                </div></td>
              <td><div align="center"> </div></td>
              <td><div align="center">
                  <input type="submit" name="Submit" value="Search">
                </div></td>
              <td>&nbsp;</td>
              <td><div align="center">
                  <input type="reset" name="Submit2" value="reset">
                </div></td>
            </tr>
            <tr>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td><div align="center"></div></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table>
        </form>

I would really appreciate a solution as my javascript knowledge is very poor
sparky74Asked:
Who is Participating?
 
_Marcel_Connect With a Mentor Commented:
You can make it much simpler. Look at the next example:

<html>
 <head>
  <title>Test</title>
  <script>
   function RecUpdate(RecID){
    document.product_form.hidRecIDs.value = document.product_form.hidRecIDs.value + RecID
   }
  </script>
 </head>
 <body>
  <form name="product_form">
   <button onClick="RecUpdate('6')">6</button>
   <input name="hidRecIDs" type="text" value="" size="20">
  </form>
 </body>
</html>

It will only work for the 6, but it shows what I mean.
0
 
_Marcel_Commented:
Why are you using radiobuttons for this? Wouldn't it make more sense to use normal buttons for this? You can then just use a variable to store the number.
0
 
sparky74Author Commented:
HI Marcel

Can you provide an example?

The above was my best attempt so far

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
_Marcel_Commented:
An example for one button would be:

<button onClick="RecUpdate('6')"><img src="6.gif" width="70" height="70"></button>

You may need to resize etc. the button according to your wishes.
0
 
sparky74Author Commented:
Thanks Marcel, the buttons look better and are easier to use on the touch screen.

However I still have the same problem. If I want to enter the code 66 or 666,

I press the button 6 and it stores the number six to the variable, but if I then press 6 again nothing happens :(

is there any way I can change that, or maybe there is something in this function stopping it?

function RecUpdate(RecID){
var ThisID = "" + (RecID) + ""
if (document.product_form.hidRecIDs.value == ""){
document.product_form.hidRecIDs.value = (ThisID)
}
if (document.product_form.hidRecIDs.value != ""){
var str = document.product_form.hidRecIDs.value;
var pos = str.indexOf(ThisID);
if (pos == -1) {
document.product_form.hidRecIDs.value = document.product_form.hidRecIDs.value + "" + (ThisID)
}
}
}


any ideas?
0
 
sparky74Author Commented:
Marcel

Thank you very much, works great!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.