CODEWITHSUNDEEP
javascriptjqueryhtml
user1613223
user1613223

Reputation: 65

Dynamic form not working

I asked a question early here today, and was led to using jQuery to solve a problem. I'm new to jQuery, but followed a reference and created the following code. It works in jsFiddle, but will not in my Firefox browser. jQuery is pointing to the right path, with the right file name. This is on my local server although I dont think that matters. I'd like to hide an unhide the input form based on the value selected from the dropdown Can anyone tell me why this will not work?

        <html>
    <style>
    .hidden {
        display: none;
    }
    </style><!--end css-->

    <script type="text/javascript" src="jquery.js"> </script>

    <script type="text/javascript">
    $('#payment_type').on('change', function() {
        var val = $(this).val();
        $('#nvendor').hide();
    });
    </script>

    </head>
    <body>

    <h3>Select</h3>
    <select id="payment_type" name="payment_type">
       <option>Select a payment type...</option>
       <option value="nvendor">Add</option>
       <option value="PayPal">Update</option>
    </select>

    <form id="nvendor" class="hidden">
    Company: <input type="text" />
    Address Available: <input type="text" />
    Minimum Delivery Amount: <input type="text"/>
    Logo: <input type="text" />
    <input type="submit" name="submit" value="Next" />
    </form>

    </body>
    </html>

Upvotes: 0

Views: 180

Answers (1)

NullPoiиteя
NullPoiиteя

Reputation: 57342

try 

<script type="text/javascript">
    $(document).ready(function(){
      $('#payment_type').on('change', function() {
        var val = $(this).val();
         if(val == "nvendor")
           $('#nvendor').hide();
        else
           $('#nvendor').show();
     });
    })
</script>

and remove the class .hidden from the form

Upvotes: 2

Related Questions