show hide field based on selected values from dropdown

Thread is closed for posting
2 posts, 0 answers
  1. Krishna
    Krishna avatar
    1 posts
    Member since:
    Jun 2014

    Posted 25 Jul 2014 Link to this post

    can anyone tell me what i am doing wrong here. which ever option i select from dropdown. other os field is disappearing.
    <p>Operating System:
        <select name="OS" data-bind="event: otheros() required>
            <option value="">-- Select an Option --</option>
            <option value="Win">Windows</option>
            <option value="ios">iOS</option>
            <option value="otheros">Other</option>
        </select>
    </p>
    <div id="osother">
        <p>Please Specify:
            <label id="oslabel">
                <input name="Other OS" type="text" placeholder="Other OS" size="50" />
            </label>
        </p>
    </div>

    otheros: function(value){
    if(this.value === 'otheros'){
    $('#osother').show();
    }else{
    $('#osother').hide();}}
  2. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 30 Jul 2014 Link to this post

    Hi Krishna,

    If I understand you correctly, you want to show the #osother div element when the "Other" option is selected from the select control. I have three ideas why your code might not be working.

    1. You are missing the closing quotes of the data-bind attribute. You should close the quotes after otheros():
    <select name="OS" data-bind="event: otheros() required>

    2. If you are using Kendo UI, the correct way to do event binding is with the "events", not the "event" property. You need to also specify which event you want to bind the function to and you should loose the brackets after the function since you are calling a property of the view. For example, this will bind the function to the change event of the select control:
    <select name="OS" data-bind="events: { change: otheros}" required>

    If you are using some other JS framework, then you should check how to correctly bind the function to the desired event.

    3. In the otheros function you have declared the value variable as a parameter. This is incorrect. If you want to bind the function to an event, then you will receive the event object as the function parameter. You can then access the select control by the event.target property. And finally you will need the event.target.value to check it versus the desired value. Here is how the otheros function should look like:
    otheros: function(event){
    if(event.target.value === 'otheros'){
    $('#osother').show();
    }else{
    $('#osother').hide();}}

    Let me know if these suggestions solve your problem. If you continue having troubles with it, please open a support ticket and send us your project, so we can investigate it and provide a solution.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top