1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Validation not working with jQuery 1.5.2

Discussion in 'jQuery' started by jeffshead, Nov 9, 2012.

  1. #1
    I'm using a cart script and I want to add some functionality to it. The script uses PHP, Smarty and jQuery 1.5.2.

    I got everything to work except validating an input field. I want several form fields to be disabled until a check box is ticked or until text is added to a particular text field or better yet, use a dropdown field with "yes" or "no" options and enable the fileds when "yes" is selected.

    Below is the code I am currently using. It is supposed to enable the '#product_aff_header' checkbox when text is typed in the '#product_aff_url' textbox. It works but the checkbox does not get re-disabled if the user goes back and deletes the text from the textbox.

    ...
    <div class="form-field">
    <label for="product_aff_url">Affiliate URL</label>
    <input type="text" name="product_data[aff_url]" id="product_aff_url" size="100" value="{$product_data.aff_url}" class="input-text-medium" style="width:300px" onkeyup="fn_product_header_setting(this);" />

    {if $product_data.aff_url != ""}
    {assign var="header_setting" value=true}
    {/if}
    </div>
    <div class="form-field">
    <label for="product_aff_header">Affiliate Header</label>
    <input type="hidden" name=" product_data[aff_header]" value="N" />
    <input type="checkbox" name="product_data[aff_header]" id="product_aff_header" value="Y" {if $product_data.aff_header == "Y"}checked="checked"{/if} class="checkbox header-dependence" {if !$header_setting}disabled="disabled"{/if}/>
    </div>

    <script type="text/javascript">
    //<![CDATA[
    {literal}
    function fn_product_header_setting(elm)
    {
    var jelm = $(elm);
    var available = false;

    $('input', jelm.parent()).each(function() {
    if (parseInt($(this).val()) != "") {
    available = true;
    }
    });

    $('input.header-dependence').attr('disabled', (available ? false : true));

    }

    {/literal}
    //]]>
    </script>
    ...

    I googled but cannot figure out how to make it re-disable the checkbox. I came across the code below but it does not work with jQuery 1.5.2. Unfortunately, I have to stick with that version of jQuery for compatibility issues.

    ...
    <input type="checkbox" id="pizza" name="pizza" value="yes">
    <label for="pizza">I would like to order a</label>
    <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
    </select>
    pizza.


    <script>
    {literal}
    var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
    $('#pizza_kind').prop('disabled', false);
    }
    else {
    $('#pizza_kind').prop('disabled', 'disabled');
    }
    };
    $(update_pizza);
    $("#pizza").change(update_pizza);
    {/literal}
    </script>
    ...

    Anyone have any ideas how I can get this to work? I read something about adding a jQuery reset setInterval timer but that's above my head. Could not figure it out.
    jeffshead, Nov 9, 2012 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,883
    Likes Received:
    33
    Best Answers:
    51
    Trophy Points:
    100
    #2
    I don't see any code that checks for the textbox being blank. Did I miss it?
    Rukbat, Nov 22, 2012 IP
  3. jeffshead

    jeffshead Member

    Messages:
    24
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #3
    Maybe that's what's missing. I don't know. I copied the code from another portion of the website. I double checked and there is no additional code from where I copied it but it works there???
    jeffshead, Nov 23, 2012 IP
  4. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,883
    Likes Received:
    33
    Best Answers:
    51
    Trophy Points:
    100
    #4
    The code you're missing may not be physically close to the code you copied. Javascript can be anywhere on the page, or even in another file (or on another site). There may be some trigger for the checkbox based on whether available is true or false. Also, did you change the id of the checkbox (and all the code that refers to it)? You can't have 2 elements with the same id.
    Rukbat, Nov 23, 2012 IP
  5. Muhammad Haroon

    Muhammad Haroon Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Check out this, i found this helpful:
    http://softstribe.com/wordpress/how-tos/validate-form-fields-using-jquery-form-validation-engine
    Muhammad Haroon, Mar 4, 2013 IP