CODEWITHSUNDEEP
jquery
Milacay
Milacay

Reputation: 1485

Transfer Input Value to Select Dropdown List

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.

Upvotes: 0

Views: 1990

Answers (3)

Huangism
Huangism

Reputation: 16438

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

Upvotes: 1

eat-sleep-code
eat-sleep-code

Reputation: 4855

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.

Upvotes: 1

code-jaff
code-jaff

Reputation: 9330

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

Upvotes: 0

Related Questions