Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Problem using radio buttons to update string value in Form field

Posted on 2007-07-25
6
Medium Priority
?
187 Views
Last Modified: 2010-04-16
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
0
Comment
Question by:sparky74
  • 3
  • 3
6 Comments
 
LVL 8

Expert Comment

by:_Marcel_
ID: 19564314
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
 

Author Comment

by:sparky74
ID: 19564355
HI Marcel

Can you provide an example?

The above was my best attempt so far

0
 
LVL 8

Expert Comment

by:_Marcel_
ID: 19572149
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:sparky74
ID: 19572720
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
 
LVL 8

Accepted Solution

by:
_Marcel_ earned 2000 total points
ID: 19572849
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
 

Author Comment

by:sparky74
ID: 19572867
Marcel

Thank you very much, works great!

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month20 days, 23 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question