Forums

Jami

My issue is the gateway I'm dealing with will only process data for the var 'installments' once, so I have to get the user to select from a choice #1 or choice #2 + enter their own number. My problem is with choice #2 -

Using the following:

Total number of payments..
<input type="radio" name="installments" checked value="99"> 

<input type="radio" name="installments">  number of payments -  
<input type="text" name="installments" value="" maxlength="4" size="4">

But this returns either installments = '99' or installments = 'on' & installments = '4' (or whatever number they choose)

I need the var installments to equal either 99 or their entered number. I saw some CSS tricks plus JS that seemed along the lines of what might solve my issue.

When the user selects the #2 radio button is there a way to eliminate it from sending it's data?

Thank you ~ http://cdpn.io/sxnhE

tomrogers123

You could give the custom option an id:

<label for="installments">number of payments</label>
<input type="radio" name="installments" id="other" value="Enter Custom..">
<input type="text" name="installments" value="" maxlength="4" size="4">

...and then use some conditional logic in your JS:

if( $('#other).is(':selected') ) {

  // user wants to enter own value

  $('[name="installments"]").not('[type="text"]').attr('name', '') // remove all values apart from the entered text.

}

Might I suggest that you also add some UI where the custom textbox only shows if the corresponding choice has been made.

Jami

I do have some UI that hides that input field until selected, but I'm still trying to work out this first.

This is what your solution returns:

installments | Enter Custom..

installments | 2

btnSubmit | Submit

So you see I'm still sending two data values for the var 'installments', and only one (numeric) will be accepted all others throw an error.

Is there a way to check if the input field (installments) has data and then disable that second radio button? A disabled form element sends no data I've heard. I'd probably have to un-check the first radio, but that would be a small concession if this worked.

Thanks

CrocoDillon

Tom's code would probably have worked if you put it in a form submit event handler, now it never gets called.

<input type="radio" name="installments" checked value="99">
<input id="use_user_input" type="radio" name="installments" value=""> 
<input id="user_input" type="text" value="" maxlength="4" size="4">

and this

$(function() {
  $('#user_input').change(function() {
    $('#use_user_input').val($(this).val());
  });
});

which you can also bind to submit (like $('form_id').submit(function() { change value here }). You also need to add jQuery if you haven't already: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Keep in mind that this will break if javascript is disabled.

Jami

It worked!!!! I'm so thrilled I could scream.... Thank you Thank you.
I have to look into this jQuery, everyone seems to be using it.

"Keep in mind that this will break if javascript is disabled." Yes, I am concerned about that. I suppose there is a php way to do this, but I don't know php.

treehouse : what would you like to learn today?

Forums

[Solved] I think I need a Javascript solution for radio button's data