Disable and enable a form text input depending on value form select..?

Question

I'm making a website and there's a form in it... now what im trying to do is very simple but i just dont know how anymore so im asking you guys. In this form you can select whether or not you want custom text on the clothing you buy. you can select yes and no with the select statement. and next to it there's a input text where you can fill in this text. What i want to do is that when the value of the select is no or still default, the input text gets disabled and when the value is yes it gets enabled.

Screenshot of output http://prntscr.com/4ym079

My Code:

        <div class="form-group col-md-6" style="margin-bottom: 25px; padding:0;">
            <label class="col-md-12 control-label" for="producttext">Eigen text op product *</label>
            <div class="col-md-12">
                <select id="producttext" name="producttext" class="form-control" required="">
                    <option class="active" value="default" selected disabled>Eigen text op product</option>
                    <option value="nee">Nee</option>
                    <option value="Ja">Ja(+€3,50)</option>
                </select>
            </div>
        </div>
        <script>
        </script>
        <div class="form-group col-md-6" style="margin-bottom:0;">
            <label class="control-label" for="product_text">Uw eigen text*</label>
            <input id="product_text" name="product_text" placeholder="Indien Ja" class="form-control input-md" type="text">
        </div>

If you still have any questions, please ask me.

DeusGladio

You could do with jQuery. Did you try anything so far?

Jenson M John
– Jenson M John

2014-10-22 13:56:43 +00:00
Commented Oct 22, 2014 at 13:56 — Jenson M John
– Jenson M John, Commented Oct 22, 2014 at 13:56
tried just regular Javascript but didnt work out...

DeusGladio
– DeusGladio

2014-10-22 13:57:12 +00:00
Commented Oct 22, 2014 at 13:57 — DeusGladio
– DeusGladio, Commented Oct 22, 2014 at 13:57

tymeJV · Accepted Answer · 2014-10-22 14:02:19Z

3

Attach a onchange function and enable/disable the input:

document.getElementById("producttext").onchange = function() {
    document.getElementById("product_text").disabled = (this.value == "nee" || this.value == "default");
}
document.getElementById("producttext").change(); //to trigger on load

Or with jQuery:

$("#producttext").change(function() {
    var disabled = (this.value == "nee" || this.value == "default");
    $("#product_text").prop("disabled", disabled);
}).change(); //to trigger on load

Fiddle: http://jsfiddle.net/covq84f7/

edited Oct 22, 2014 at 14:02

answered Oct 22, 2014 at 13:57

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

2 Comments

tymeJV Over a year ago

@DeusGladio -- Mark the answer if it did what ya needed!

DeusGladio Over a year ago

I'm trying haha but i have to wait 3 more minutes??

danmullen · Accepted Answer · 2014-10-22 13:59:38Z

0

Using jQuery:

$('#producttext').change(function () {
    if ($(this).find('option:selected').text() != 'nee') {
        $('#product_text').prop('disabled', false);
    } else {
        $('#product_text').prop('disabled', true)
    }
});

answered Oct 22, 2014 at 13:59

danmullen

2,5003 gold badges22 silver badges28 bronze badges

1 Comment

tymeJV Over a year ago

this.value will be the selected options value. No need to find

Pankti Jain · Accepted Answer · 2014-10-22 14:01:21Z

0

Please write onchange javascript event on select option and try below code to get value

var e = document.getElementById("selectId");
var selectedValue = e.options[e.selectedIndex].value;

if(selectedValue == "yes")
{
//ur code
}else
{ 
//ur code
}

answered Oct 22, 2014 at 14:01

Pankti Jain

743 bronze badges

Comments

PeterKA · Accepted Answer · 2014-10-22 14:04:12Z

0

DEMO

Here is the jQuery code you need. You can listen to the change event and change the state of the input based on the value of the select. In order for this to work when the page loads, trigger the change event using, .change().

$(function() {
    $('#producttext').on('change', function() {
       $('#product_text').prop('disabled', this.value != 'Ja');
    })
    .change();
});

answered Oct 22, 2014 at 14:04

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Disable and enable a form text input depending on value form select..?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related