Shop OBEX P1 Docs P2 Docs Learn Events
Html Radio buttons on Parallax Internet Netburner Kit — Parallax Forums

Html Radio buttons on Parallax Internet Netburner Kit

microchip2microchip2 Posts: 5
edited 2014-06-10 17:57 in General Discussion
I am trying to setup·html radio buttons on a web page displayed from a Parallax Internet Netburner Kit.·

<form name="Test" action="\example.htm" method="post">
<br>
<Input name="Nb_var40" type= "radio"·· Value="ON"<Nb_var40>">ON
<Input name="Nb_var40" type= "radio"·· Value="OFF" <Nb_var40>">OFF
<input type="submit"value="submit" > Nb_var40=<Nb_var40>
</form>

This will update the NB_var40 location, but the buttons are not updated.

Post Edited (microchip2) : 5/1/2010 7:34:54 PM GMT

Comments

  • ZootZoot Posts: 2,227
    edited 2010-05-02 16:15
    This is an HTML issue. Radio buttons are not "on" or "off", they are "checked" or empty. Second your HTML is bad, you should not have trailing quote right before the close of the input tag.

    This would be correct HTML but will not show selected radio button:

    <Input name="Nb_var40" type= "radio"   Value="ON">ON<br />
    <Input name="Nb_var40" type= "radio"   Value="OFF">OFF<br />
    <input type="submit"value="submit" ><br />
    Status: Nb_var40=<Nb_var40>
    
    



    This would "pre-check" the radio button "off"

    <Input name="Nb_var40" type= "radio"   Value="ON">ON<br />
    <Input name="Nb_var40" type= "radio"   Value="OFF" checked>OFF<br />
    <input type="submit"value="submit" ><br />
    Status: Nb_var40=<Nb_var40>
    
    



    The problem is that if you want to use the actual value of the variable Nb_var40 to show which button is selected, the value of Nb_var40 must be "selected" for "on" and "" (empty) for off. That's not going to happen, as Nb_var40 (I presume) is not and can not be a string.

    It might be easier to do this with JavaScript, so that the value of Nb_var40 can be tested in the browser and then properly set the select state of the radio button:

    <script>
    if ( <Nb_var40> == null || <Nb_var40> == 0 || <Nb_var40> == "0" || <Nb_var40> == "N" ) { // or whatever other tests you want to do
        // javascript to set radio button off
    } else {
     // javascript to set radio button on      
    }
    </script>
    <Input name="Nb_var40" type= "radio"   Value="ON">ON<br />
    <Input name="Nb_var40" type= "radio"   Value="OFF">OFF<br />
    <input type="submit"value="submit" ><br />
    Status: Nb_var40=<Nb_var40>
    
    

    ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
    When the going gets weird, the weird turn pro. -- HST

    1uffakind.com/robots/povBitMapBuilder.php
    1uffakind.com/robots/resistorLadder.php
  • microchip2microchip2 Posts: 5
    edited 2010-05-03 01:16
    I did a little more work on the radio buttons. I am using the Expression Web editor and did not have all of the HTML errors corrected.
    ·
    The following code is still not working correctly.
    ·
    <html>
    <head>
    <script type="text/vbscript">
    sub MyOnload
        
    if document.Unit1.Nb_var40(0).value = "ON"  then
       document.Unit1.Nb_var40(0).checked = "True"
    Else 
     document.Unit1.Nb_var40(1).checked = "True"
    End if
    end sub
    </script>
    <title></title>
    </head>
    <body  language="vbscript" onload="MyOnload">
    <p><a href = "vbscript:history.back()"> Go Back </a>
    </p>
    
    <form name="Unit1" action="\test.html" method="post">
    <br>
     UNIT1
    <Input name="Nb_var40" type= "radio" Value="ON" language="vbscript" >ON
    <Input name="Nb_var40" type= "radio" Value="OFF" language="vbscript">OFF
    <input type="submit"value="submit" >
    <br>
    <br>
     Status: Nb_var40=<Nb_var40>
    </form>
     
    </body>
    </html>
     
    

  • microchip2microchip2 Posts: 5
    edited 2010-05-07 20:47
    It works now.
    <html>
    <head>
    <script type="text/vbscript" >
    sub MyOnload    
    if ("<Nb_var40>" = "ON")  then
     msgbox "ON"
        document.Unit1.Nb_var40(0).checked = "True"
    Else 
     msgbox "OFF"
     document.Unit1.Nb_var40(1).checked = "True"
    End if
    end sub
    </script>
    <title></title>
    </head>
    <body  language="vbscript" onload="MyOnload"> 
    <p><a href = "vbscript:history.back()"> Go Back </a>
    </p>
    <form name="Unit1" action="\test.html" method="post">
    <br>
    UNIT1
    <Input name="Nb_var40" type= "radio" Value="ON">ON
    <Input name="Nb_var40" type= "radio" Value="OFF">OFF
    <input type="submit"value="submit">
    <br>
    <br>
    Status: Nb_var40=<Nb_var40>
    </form>
    </body>
    </html>
     
     
     
    
  • Mike2545Mike2545 Posts: 433
    edited 2014-06-10 17:57
    I realize this is an old thread...but, I am still finding uses for the PINK

    The pink responds well to JavaScript. I am no expert on it but here is what I did:
    Open a notepad to put your Script in
    function setRadioButton1(param){
      if ( param == "ON" ) { 
        document.getElementById("radOn1").checked='checked';
      } else {
        document.getElementById("radOff1").checked='checked';
      }
    }
    
    function setRadioButton2(param){
      if ( param == "Heat" ) { 
        document.getElementById("radOn2").checked='checked';
      } else {
        document.getElementById("radOff2").checked='checked';
      }
    }
    
    Save as app.js (file type- All Files, Encoding UTF-8)
    Put that file in the PINK home directory right next to your index file.

    On my main index page I have:
    Mini-Split<br />
    <Input id="radOn1" name="Nb_var93" type= "radio" Value="ON">ON<br />
    <Input id="radOff1" name="Nb_var93" type= "radio" Value="OFF">OFF<br /><input type="submit"value="submit" ><br />
    Status: <Nb_var93>
    <script>
    setRadioButton1("<Nb_var93>");
    </script>
    
    Heat/AC<br />
    <Input id="radOn2" name="Nb_var94" type= "radio" Value="Heat">Heat<br />
    <Input id="radOff2" name="Nb_var94" type= "radio" Value="AC">AC<br /><input type="submit"value="submit" ><br />
    Status: <Nb_var94>
    <script>
    setRadioButton2("<Nb_var94>");
    </script>
    
    Hope this helps someone.
Sign In or Register to comment.