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

@CurrentWaveFeb 21.2013

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.

[code=html] <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″> [/code]

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?

to post a comment

JavaScript

10 Comments(s) _↴

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

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;title&gt; Untitled &lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 // From: http://www.webdeveloper.com/forum/showthread.php?273523-Help-with-list-of-radio-buttons-w-last-one-including-an-input-field&amp;daysprune=30
 
 function validate() {
 var msg = 'Number of installments: ';
 if (getRBtnName('installments') == '99') {  msg += '99'; }
 else {
 var LNOP = document.getElementById('limitNumberOfPayments').value;  <br/>
 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&lt;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  <br/>
 return str;
 } 
 
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form id="myForm" action="" method="post" onsubmit="return validate()"&gt;
 &lt;input type="radio" name="installments" checked value="99"&gt; Continuous Billing&lt;br&gt;
 &lt;input type="radio" name="installments" value=""&gt;  limited number of payments
 - &lt;input type="text" id="limitNumberOfPayments" value="" maxlength="4" size="4"&gt;
 &lt;p&gt;&lt;input type="submit" value="Submit (fake)"&gt;
 &lt;/form&gt;
 &lt;script type="text/javascript"&gt;
 
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@CurrentWaveauthorFeb 22.2013 — #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

@JMRKERFeb 22.2013 — #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[/QUOTE]

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.

@CurrentWaveauthorFeb 22.2013 — #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.

@JMRKERFeb 22.2013 — #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.[/QUOTE]

Well I believe what we have here, in the words of Strother Martin in "Cool Hand Luck", is a "failure to communicate"! :eek:

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.

@CurrentWaveauthorFeb 22.2013 — #
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.[/QUOTE]

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....

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.[/QUOTE]

I guess I'll have to try this one, it's not as slick as I was hoping for - oh well.

Thank you

@JMRKERFeb 22.2013 — #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.

@CurrentWaveauthorFeb 22.2013 — #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.[/QUOTE]

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....

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.[/QUOTE]

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.

@JMRKERFeb 22.2013 — #Another guess as to your requirements...

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Untitled &lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 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';
 }
 }
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 #installmentsDefault { display:inline; }
 #installmentsData { display:none; }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;
 &lt;input type="checkbox" id="default_installments" value="99" onclick="collectInstallmentInfo(this.checked)"&gt;
 &lt;span id="installmentsDefault"&gt; Continuous Billing (default) &lt;/span&gt;
 &lt;span id="installmentsData"&gt;
 Limit number of payments to - &lt;input type="text" id="installments" value="99" maxlength="4" size="4"&gt;
 &lt;/span&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@CurrentWaveauthorFeb 22.2013 — #Thank you so much 'super mod' it looks promising, I will test it out and post back.

Your help is much appreciated

Also in #JavaScript _↴

execute a value of a variable how to check confirm is selected??Switch between scripts

Success!

Help @CurrentWave spread the word by sharing this article on Twitter...

Tweet This

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

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

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

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴