Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

radio buttons and its working with a textbox

Posted on 2011-03-17
8
Medium Priority
?
291 Views
Last Modified: 2012-08-13
i am using javascript to enable/disable radio buttons on the basis if i enter value in textfield, it enables the radio buttons working fine..

but i am using four fields which are all dependednt upon the textbox, so here is my code!


function disableGroup(which, formName, groupName) {
var val = which.value;
val = val.replace(/^\s+|\s+$/g,"");  // strip leading and trailing  spaces
which.value = val;  // write amended val back to text field

if (val.length > 2) {  // at least three characters entered
for (var i=0; i<formName.elements.length; i++) 
{
	if (formName.elements[i].name == groupName) {
	formName.elements[i].disabled = false;
	formName.elements[i].checked = true;
	formName.elements[i].value = "";
	}
}
}
else {
for (var i=0; i<formName.elements.length; i++) {
if (formName.elements[i].name == groupName) {
formName.elements[i].disabled = true;
formName.elements[i].checked = false;
formName.elements[i].value = "";
}
}
}
}

<input type="text" name="cal" id="cal" 
onchange = "disableGroup(this, this.form, 'ar');">

<input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
<input type="radio" name="ar" id="ar2" disabled=true>No

but it works for only one set of radio buttons, if i have multiple fields, how i change this script to work

Please guide

Open in new window

0
Comment
  • 4
  • 4
8 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 35157652
using some jquery her hope this is fine:
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style type="text/css">

        </style>

        <script type="text/javascript" src="preload.js"></script>

        <script type='text/javascript'>
            $(function(){
                $('input[type="text"]').change(function(){
                    if( $(this).val() == '') {
                        console.log("dis");
                        $('input[name="ar"]').attr('disabled','true');
                    }
                    else{
                            console.log("notdis");
                        $('input[name="ar"]').attr('disabled','');
                    }
                })
            })

        </script>
    </head>
    <body>

        <input type="text" name="cal" id="cal">

        <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
        <input type="radio" name="ar" id="ar2" disabled=true>No
    </body>
</html>

Open in new window

0
 
LVL 13

Expert Comment

by:darren-w-
ID: 35157716
I've taken the preload.js line out as its not relevant, and tidied a little

<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
        </style>
        <script type='text/javascript'>
            $(function(){
                $('input[type="text"]').change(function(){
                    if( $(this).val() == '') {
                        $('input[name="ar"]').attr('disabled','true');
                    }
                    else{
                        $('input[name="ar"]').attr('disabled','');
                    }
                })
            })

        </script>
    </head>
    <body>
        <input type="text" name="cal" id="cal">

        <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
        <input type="radio" name="ar" id="ar2" disabled=true>No
    </body>
</html>

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35159303
Ok, I do not know what are you trying to do here, i tried jquery before as it was not working, my question is the above may be fine and may work for one set of radio button, but what if i have 3 set of radio buttons with yes/no values and one textarea

then what my approch will be..

and on the clearence of textbox value, it should clear all values from the radio buttons and the textarea..

the current code mine is working the way it is but it is working for one set of radio button and i am trying to make it work by using in moe than 3 or 4 sets of radio buttons

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 13

Expert Comment

by:darren-w-
ID: 35160236
ok,

Have annotated text, have added textarea as mentioned on para 3 above, I clear checked values/disable buttons/clear text from textarea and text content when top text box is empty.
<html>
   <head>
      <title>test</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <style type="text/css">
      </style>
      <script type='text/javascript'>
         $(function(){
            $('input[type="text"]').keyup(function(){ //when a keyup is detected in the text box
               if( $(this).val() == '') { //if the text box is empty
                  //disable the radio buttons in the div, and  clear their checked status, cleat textarea
                  $('#agroup  input[type="radio"]').attr('disabled','true').attr('checked','');
                  $('#agroup  input[type="text"]').val("").attr('disabled','true'); //.val("") clears content of textarea and
                  $('#agroup  textarea').val("").attr('disabled','true')
               }
               else{ // remove the disabled states
                  $('#agroup  input[type="radio"]').attr('disabled','');
                  $('#agroup  input[type="text"]').attr('disabled','')
                  $('#agroup  textarea').attr('disabled','')
               }
            })
         })

      </script>
   </head>
   <body>
      <input type="text" name="cal" id="cal">
      <div id ="agroup">
         <input type="text" name="testtext" id="testtext" disabled=true><br />
         <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar1" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar1" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar2" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar2" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar3" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar3" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar4" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar4" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar5" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar5" id="ar2" disabled=true>No&nbsp;&nbsp;<br />
         <textarea rows="2" cols="20" disabled=true>
         </textarea>
      </div>
   </body>
</html>

Open in new window



Darren
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35160292
ok i will check in the morninf and update you on this! if i am getting expected results!
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 35162532
i tried using it in a table, and it stopped working, please check!

<table align="center" width="100%">
   <form method="post" action="test.html">
   <tr><td colspan="4">
      <input type="text" name="cal" id="cal">
   </td></tr>  
      <div id ="agroup">
   <tr><td>  
         <!--<input type="text" name="testtext" id="testtext" disabled=true><br />-->
         <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar" id="ar2" disabled=true>No&nbsp;&nbsp;
      </td>
    <td>
         <input type="radio" name="ar1" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar1" id="ar2" disabled=true>No&nbsp;&nbsp;
      </td>
    <td>
         <textarea rows="2" cols="20" disabled=true>
         </textarea>
    </td>
    </tr>      
      </div>
    </form>
    </table>  
0
 
LVL 13

Accepted Solution

by:
darren-w- earned 2000 total points
ID: 35163819
It will not work in the above case because the script cant find the form items inside the table cells, I have changed the selectors to work in this scenario
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
        </style>
        <script type='text/javascript'>
            $(function(){
                $('input[type="text"]').keyup(function(){ //when a keyup is detected in the text box
                    var radios = $('input[type="radio"]');
                    var textarea = $("textarea");
                    if( $(this).val() == '') { //if the text box is empty
                        //disable the radio buttons in the div, and  clear their checked status, cleat textarea
                        radios.attr('disabled','true').attr('checked','');
                        textarea.val("").attr('disabled','true')
                    }
                    else{ // remove the disabled states
                        radios.attr('disabled','');
                        textarea.attr('disabled','')
                    }
                })
            })

        </script>
    </head>
    <body>
        <table align="center" width="100%">
            <form method="post" action="test.html">
                <tr>
                    <td colspan="4">
                        <input type="text" name="cal" id="cal">
                    </td>
                </tr>
                <tr>
                    <td>
                        <!--<input type="text" name="testtext" id="testtext" disabled=true><br />-->
                        <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
                        <input type="radio" name="ar" id="ar2" disabled=true>No&nbsp;&nbsp;
                    </td>
                    <td>
                        <input type="radio" name="ar1" id="ar1" disabled=true>Yes&nbsp;
                        <input type="radio" name="ar1" id="ar2" disabled=true>No&nbsp;&nbsp;
                    </td>
                    <td>
                        <textarea rows="2" cols="20" disabled=true>
                        </textarea>
                    </td>
                    <td>

                    </td>
                </tr>
            </form>
        </table>
    </body>
</html>

Open in new window


 but if you change the layout you will need to change the selectors to represent the new layout.

information on selecting items:

http://api.jquery.com/category/selectors/
0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 35164387
Thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

971 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