Transfer Input Value to Select Dropdown List

Question

I need some help on suggesting the right way to do this. Basically, I have one field in the database called "SupportRenewMonth" and it will store the number of month.

On the submit form, I have a dropdown list options as 12 month, 36 month, or Other (see below codes). When user click "Other", I will try to unhide the input box where user needs to enter the number of month manually (haven't figure out how to hide/unhide the textbox yet, but I will)

<select name="SupportRenewMonth" id="SupportRenewMonth">
    <option value="12">12 Month</option>
    <option value="36">36 Month</option>
    <option value="Other">Other</option>
</select>
Enter Month Number:
<input type="text" name="SupportRenewMonthManual" id="SupportRenewMonthManual">

The problem is I need to capture either select box "SupportRenewMonth" or text box "SupportRenewMonthManual". Is there a way to tell the form to transfer to value from SupportRenewMonthManual to SupportRenewMonth select box, then submit the form. This way I don't have to modify my ASP code to try to capture both, then sort out which value to store in the database.

Yes there is a way. On submit, get the value from the select and set it as the input's value — Huangism
– Huangism, Commented Mar 19, 2014 at 18:41

eat-sleep-code · Accepted Answer · 2014-03-19 21:47:26Z

1

I believe something like this should work for both updating your values AND hiding the field box.

HTML

<select name="SupportRenewMonth" id="SupportRenewMonth">
    <option value="12">12 Month</option>
    <option value="36">36 Month</option>
    <option value="Other">Other</option>
</select>
<label labelfor="SupportRenewMonthManual" id="SupportRenewMonthManualLabel">Enter Month Number: </label>
<input type="text" name="SupportRenewMonthManual" id="SupportRenewMonthManual">

JS

$(document).ready(function() {
    $('#SupportRenewMonthManualLabel').hide();
    $('#SupportRenewMonthManual').hide();
    $('#SupportRenewMonthManual').val($('#SupportRenewMonth').val());
    $('#SupportRenewMonth').change(function() {
        var selectedItem = $("select option:selected").val();
        if (selectedItem !== 'Other') {
            $('#SupportRenewMonthManualLabel').hide();
            $('#SupportRenewMonthManual').hide();
            $('#SupportRenewMonthManual').val($('#SupportRenewMonth').val());
        }
        else
        {
            $('#SupportRenewMonthManualLabel').show();
            $('#SupportRenewMonthManual').val('');
            $('#SupportRenewMonthManual').show();
        }
    });
});

As always, be sure to up-vote any StackOverflow answers you find useful.

edited Mar 19, 2014 at 21:47

answered Mar 19, 2014 at 18:59

eat-sleep-code

4,88516 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Milacay Over a year ago

Hi @eat-sleep-code, Thank you replied with the sample codes. I followed your codes and it seems to work, that the "SupportRenewMonthManual" get a copy value when the selectbox changed. So if I select 24 36 months, it works. However, if submit the form with default value (12 month), without change the selectbox value, the value won't get copied over the "SupportRenewMonthManual" input box. Please help.

Milacay Over a year ago

I just put this line below your code and it seems working fine now "$('#SupportRenewMonthManual').val($('#SupportRenewMonth').val());" Thanks again

eat-sleep-code Over a year ago

I was just updating my answer to have that. :-) Glad you figured it out.

Huangism · Accepted Answer · 2014-03-20 12:15:14Z

1

I think this should work. Make sure the following code is in document ready or window load

$("form").submit(function(){
    var v = $('#SupportRenewMonth').val();
    if( v!== 'Other') {
        $('#SupportRenewMonthManual').val( v );
    }
});

For the input box hide/show

$('#SupportRenewMonth').on('change', function() {
    if($(this).val() == 'Other') {
        $('#SupportRenewMonthManual').show();
    } else {
        $('#SupportRenewMonthManual').hide();
    }
}).change();

http://jsfiddle.net/pCDm6/

As you noticed the text is still showing, you can wrap that whole block and then show/hide the block to make it better but I will leave that part to you. You should be able to figure it out pretty easily

edited Mar 20, 2014 at 12:15

answered Mar 19, 2014 at 18:44

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

2 Comments

Milacay Over a year ago

Thanks for responsing. Your suggestion would not work when user select "Other" on selectbox. Because the "Other" value would also copy over the input box "SupportRenewMonthManual".

Huangism Over a year ago

@Milacay your question does not mention the exclusion of other field which is why my code does not include it. I have updated the answer to include the exclusion of the Other field.

code-jaff · Accepted Answer · 2014-03-19 18:53:41Z

0

Just remove the name from the input, therefore that wouldn't be submitted to the server, and handle the change in jQuery to set the correct value to dropdown.

for eg.

<select name="SupportRenewMonth" id="SupportRenewMonth">
    <option value="12">12 Month</option>
    <option value="36">36 Month</option>
    <option value="Other">Other</option>
</select>Enter Month Number:
<input type="text" id="SupportRenewMonthManual">

JS

$('#SupportRenewMonthManual').on('keyup', function (e) {
    var month = $(this).val();
    $('#SupportRenewMonth option[value="' + month + '"]').prop('selected', true);
});

DEMO

answered Mar 19, 2014 at 18:53

code-jaff

9,3284 gold badges38 silver badges56 bronze badges

Collectives™ on Stack Overflow

Transfer Input Value to Select Dropdown List

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related