How to prevent input from sending params

Question

I have two inputs, both use the same field in the database. The difference between them is simple, one is just text input while the other makes it possible for the user to pick something from dropdown list. Might look like this:

= f.input :age, :label => false, input_html: {class: "textfield"}
= f.input :age, :label => false, input_html: {class: "dropdown"}, collection: [1,2,3]

in this case, only the second input will send information. My question is: How can I prevent input from sending anything WITHOUT removing it from HTML? (my purpose is to enable user pick option "custom age" which will enable them to fill the field with, well, custom value. tricky part is both input must be there all the time)

Answer 1

If you disable an input, its value is not sent when you submit the form. So you could use an onSubmit event on the form to disable the right input before the form is submitted.

With jQuery, it would look like this:

$('form').on('submit', function() {
    var textInput = ...;
    var dropdownInput = ...;
    if (textInput.val() == '') {
        textInput.prop('disabled', true);
    } else {
        dropdownInput .prop('disabled', true);
    }
});