testbox should be seactivated when the dropdown selects

[my3h]

Hi,

i have a dropdown list where i have 3 options like

<tr>
              <td><?php echo $entry_shippingtype; ?></td>
              <td><select name="type">
                  <option value="free">Free Shipping</option>
                  <option value="flat">Flat Rate Shipping</option>

                  <option value="weight">Weight Based Shipping</option>


                </select></td>
            </tr>


            <tr>
            <td><?php echo $entry_shippingamount; ?></td>
            <td><input type="text" name="shippingamount" value="<?php echo $shippingamount; ?>" /></td>
            </tr>

When i select free shipping shippingamount textbox should be disabled. I dont know how to do it with javascript. Can someone help me please.

[soapyillusion]

First off Javascript doesn't compare html values. How ever you can use Javascript to display html values or even dynamically set it. Also javascript and php don't play well together. So choose one or the other. You cant have a php element inside a javascript code tag.

This can all be done using php too. If you need to pull in values from another page or a database your best bet would be using php.

[my3h]

Actually only to display am using php tags. there is not any logic. and within php i have used script earlier, but it worked me. i am not getting why this is not happening. Please tell me if any scripts are there to do the required thing.

[lambing]

using jQuery it easy to get what you need.

<tr>
    <td><?php echo $entry_shippingtype; ?></td>
    <td>
        <select name="type" id="category">
            <option value="free">Free Shipping</option>
            <option value="flat">Flat Rate Shipping</option>
            <option value="weight">Weight Based Shipping</option>
        </select>
    </td>
</tr>
<tr>
    <td><?php echo $entry_shippingamount; ?></td>
    <td><input type="text" id="shipping-amount" name="shippingamount" value="<?php echo $shippingamount; ?>" /></td>
</tr>

On load of page, you may use php to set the default values. Then you may bind JavaScript events for your requirements.

var category = $('#category');

//bind the dropdown selection to change event
category.change(function(e) {
    var selected = $(this).find('option:selected');
    if (selected.val() === 'free') {
      // disable the input when free shipping is selected
      $('#shipping-amount').attr('disabled', 'disabled');
    }

});

This will do it! It's pretty simple using jQuery unlike using the native JavaScript. :)

[Airshow]

The shippingamount field needs to be enabled as well as disabled.

In addition, shippingamount field needs to be put into the correct initial state by triggering the select element's change handler on page load.

jQuery :

$(function() {
    $("select[name='type']").on('change', function(e) {
        $("input[name='shippingamount']").attr('disabled', $(this).val() === 'free');
    }).trigger('change');
});

Raw javascript :

window.onload = function() {
    var typeMenu = document.getElementById('type');
    var shippingElement = document.getElementById('shippingamount');
    if(typeMenu && shippingElement) {
        typeMenu.onchange = function() {
            shippingElement.disabled = (this[this.selectedIndex].value === 'free');
        };
        typeMenu.onchange();
    }
};

Note: For the raw js to work, you need to set ids on the two elements in HTML.