www.webdeveloper.com
Results 1 to 11 of 11

Thread: Help with list of radio buttons w/ last one including an input field

  1. #1
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33

    Help with list of radio buttons w/ last one including an input field

    I am using the following but it returns two pieces of data to the server when the second radio button is selected. This is causing the gateway to reject my form.

    HTML Code:
     <input type="radio" name="installments" checked value="99"> Continuous Billing
        <br>
     <input type="radio" name="installments">  limited number of payments - 
      <input type="text" name="installments" value="" maxlength="4" size="4">
    This returns - Installments '99' (which is fine) or
    Installments 'on' & Installments 'number' (which is not fine).
    I can only have one return for the var 'installments' either 99 or the number they select.

    I think maybe some JavaScript to check if the second radio button is selected and if so disable it so it won't send any value, or something.... I really don't know much javascript.

    Is there a way to do this?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Lightbulb

    Not sure what your <form> tag looks like, so this is just a guess. Change return in validate() function after testing.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?273523-Help-with-list-of-radio-buttons-w-last-one-including-an-input-field&daysprune=30
    
    function validate() {
      var msg = 'Number of installments: ';
      if (getRBtnName('installments') == '99') {  msg += '99'; }
      else {
        var LNOP = document.getElementById('limitNumberOfPayments').value;  
        if (LNOP.replace(/\s/,'') == '') { alert('No entry for number of payments');  return false; }
                                    else { msg += LNOP; }
      }
      alert(msg);  return false;  // replace with "true" after testing
    }
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <form id="myForm" action="" method="post" onsubmit="return validate()">
    <input type="radio" name="installments" checked value="99"> Continuous Billing<br>
    <input type="radio" name="installments" value="">  limited number of payments
     - <input type="text" id="limitNumberOfPayments" value="" maxlength="4" size="4">
    <p><input type="submit" value="Submit (fake)">
    </form>
    <script type="text/javascript">
    
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    I am using - <FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">

    To SEE the data I'm sending to the gateway.

    I tried your solution, but it pops up a warning telling me how many installments I've selected, I just want it to post the data so I can see if 'installments' is only posting once. I read your code but can't tell if it is disabling the second radio button after number(s) are entered in the input field. I like that it checks to make sure that someone didn't just select the radio but also entered data into the input field. Can you modify this so I can post and check the data? Thanks
    Last edited by CurrentWave; 02-21-2013 at 08:50 PM.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415
    Quote Originally Posted by CurrentWave View Post
    I am using - <FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">

    To SEE the data I'm sending to the gateway.

    I tried your solution, but it pops up a warning telling me how many installments I've selected, I just want it to post the data so I can see if 'installments' is only posting once. I read your code but can't tell if it is disabling the second radio button after number(s) are entered in the input field. I like that it checks to make sure that someone didn't just select the radio but also entered data into the input field. Can you modify this so I can post and check the data? Thanks
    The example was designed to just show you how to set-up to send the information via the submit actions. The pop-up is just an alert() message indicating what could/would be sent when you make your selections and click the to the submit function.

    I'm trying to show you how to check the data for validity before being sent to the CGI. You will need to make the suggested changes to actually SEND the data to the program.

    To actually send valid data, you will need to return true to the onsubmit validation() function.
    Your <form> tag does not contain the validation, so you would need to add it to whatever submit 'button' you are clicking to send the information to your CGI program.

    Your link is missing from your post so I cannot see any errors you might be getting.

  5. #5
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    I'm not getting any errors at all, my form is fine. My data doesn't need validated, I have validation in place.... Did I mention validation in my post?

    What I need is a JavaScript that will test an input field and when data is entered disable the radio button that appears just before that input field. This can be done at submit, but it doesn't have to be.
    At least this is what I think is the best way to stop that radio button from sending any data, and it cannot send data. I do not control the data processing sever side so I must control what gets sent. I have done searches and read that disabling is the one of the ways to make form fields not send data. The other way I cannot use because both radio buttons and the one input field all belong to the same group and must have the same name.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Exclamation

    Quote Originally Posted by CurrentWave View Post
    I'm not getting any errors at all, my form is fine. My data doesn't need validated, I have validation in place.... Did I mention validation in my post?

    What I need is a JavaScript that will test an input field and when data is entered disable the radio button that appears just before that input field. This can be done at submit, but it doesn't have to be.
    At least this is what I think is the best way to stop that radio button from sending any data, and it cannot send data. I do not control the data processing sever side so I must control what gets sent. I have done searches and read that disabling is the one of the ways to make form fields not send data. The other way I cannot use because both radio buttons and the one input field all belong to the same group and must have the same name.
    Well I believe what we have here, in the words of Strother Martin in "Cool Hand Luck", is a "failure to communicate"!

    You can test the input field as I suggested and you can disable the radio buttons when something in the text field is entered,
    BUT you also want to call both the radio buttons and the text entry by the same name.
    When you disable the group name, I believe you will disable ALL in the group from being sent!

    You will either need
    a) to call the radio buttons by one group name and the text entry a different or,
    b) to create an "installments" hidden variable that will be sent to your form with the information combined from the radio button and/or text entry and disable ALL in the re-named radio button 'installments' group before submission. That way you only send exactly what you want.

    Another possibility would be to use a checkbox instead of a radio button.
    Use a default value of '99' if not checked and the text value of # of payments if it is checked.
    No need for other or more radio buttons unless you have other radio button possibilities you have yet to mention.

  7. #7
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    Quote Originally Posted by JMRKER View Post
    You will either need
    a) to call the radio buttons by one group name and the text entry a different or,
    b) to create an "installments" hidden variable that will be sent to your form with the information combined from the radio button and/or text entry and disable ALL in the re-named radio button 'installments' group before submission. That way you only send exactly what you want.
    Oh, I thought this could be done using id(s) and so not all the fields with the same name are disabled, but I see what your saying....

    Quote Originally Posted by JMRKER View Post
    Another possibility would be to use a checkbox instead of a radio button.
    Use a default value of '99' if not checked and the text value of # of payments if it is checked.
    No need for other or more radio buttons unless you have other radio button possibilities you have yet to mention.
    I guess I'll have to try this one, it's not as slick as I was hoping for - oh well.

    Thank you

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415
    It could be done with id values (which must be unique), but your original post does not have any id values that I can see.

    The problem would still be with your group name being all the same for the 2 different element types.
    As you have noticed in the original post, the entire group argument settings are sent with submit.

  9. #9
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    Quote Originally Posted by JMRKER View Post
    It could be done with id values (which must be unique), but your original post does not have any id values that I can see.
    That's because I don't know how to do it. I have spent days researching this and see similar things done by others but they are not exactly what I need, and they are two complicated for me to tweak without breaking that is why I posted here....

    Quote Originally Posted by JMRKER View Post
    Another possibility would be to use a checkbox instead of a radio button.
    Use a default value of '99' if not checked and the text value of # of payments if it is checked.
    No need for other or more radio buttons unless you have other radio button possibilities you have yet to mention.
    I just realized when I tried I don't know how to do this either.
    If I knew as much JS as you assume I do I wouldn't need to discus the possible ways, I would have hammered something out myself.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Lightbulb

    Another guess as to your requirements...
    Code:
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function collectInstallmentInfo(status) {
      if (status) { 
        document.getElementById('installmentsDefault').style.display = 'none';
        document.getElementById('installmentsData').style.display = 'inline';
      } else {
        document.getElementById('installmentsDefault').style.display = 'inline';
        document.getElementById('installmentsData').style.display = 'none';
      }
    }
    </script>
    
    <style type="text/css">
    #installmentsDefault { display:inline; }
    #installmentsData { display:none; }
    </style>
    
    </head>
    <body>
    <div>
     <input type="checkbox" id="default_installments" value="99" onclick="collectInstallmentInfo(this.checked)">
     <span id="installmentsDefault"> Continuous Billing (default) </span>
     <span id="installmentsData">
      Limit number of payments to - <input type="text" id="installments" value="99" maxlength="4" size="4">
     </span>
    </div>
    </body>
    </html>

  11. #11
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    Thank you so much 'super mod' it looks promising, I will test it out and post back.

    Your help is much appreciated

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles