Applying jQuery based on the values of dynamically added inputs in a form

Question

I have a form used for editing data in my database.A user would first select an item through the use of 3 after which the existing data on the item would be added to the form via jQuery's .load()

The problem i am facing now is that i have a pair of radio buttons that are added dynamically to the form.Based on the values of the radio buttons(i.e which one is checked) i would like to either hide() or show() a in the form.

Currently, after loading the dynamic portion, even though the radio button "No" is checked, the div is still loaded when the dynamically added portion is loaded.

Edit. When the "No" radio button is checked, i would like the whole portion to be loaded, BUT with the hidden upon loading it.Currently, it shows up and the only way for me to hide it is to click from "No" to "Yes" to "No" again.

My jQuery Code(extract):

<!--Manages loaded item details-->
$('#ItemDetailsContainer').on('change',function(){

if ($('#BizEditItemRadioNo').is(':checked') && $('#BizEditItemRadioNo').val() == 'No') 
{
    $('.BizEdititemDiscountDetails').hide();
}
else
{
    $('.BizEdititemDiscountDetails').show();
}


});

Dynamically added portion:

echo"<div class='BizEditItemDetails'>";
            echo"<label for='BizEditItemName'>Name:</label>";
            echo"<input class='BizEditItemInput' type='text' id='BizEditItemName' name='BizEditItemName' size='30' maxlength='50' value=\"$name\">";
            echo"<span></span>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<label for='BizEditItemPrice'>Price:</label>";
            echo"<input class='BizEditItemInput' type='number' id='BizEditItemPrice' name='BizEditItemPrice' step='any' min=0 value=\"$price\">";
            echo"<span></span>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<label>Discount:</label>";
                echo"<input type='radio' class='BizEditItemInput' value='Yes' id='BizEditItemRadioYes' name='BizEditItemDiscount'>Yes";
                echo"<input type='radio' checked='checked' class='BizEditItemInput' value='No'  id='BizEditItemRadioNo' name='BizEditItemDiscount' step='any'>No";
            echo"</span></span>";
        echo"</div>";


        echo"<div class='BizEditItemDetails'>";
            echo"<div class='BizEdititemDiscountDetails'>";
                echo"<label for='BizEditItemPercent'>Discount Percentage</label>";
                echo"<input class='BizEditItemInput' type='number' id='BizEditItemPercent' name='BizEditItemPercent' step='any' min=0 value=\"$discountpercent\">%";
                echo"<span></span>";
            echo"</div>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<div class='BizEdititemDiscountDetails'>";
                echo"<label for='BizEditItemDiscountPrice'>Discounted Price:</label>";
                echo"<input class='BizEditItemInput' type='number' id='BizEditItemDiscountPrice' name='BizEditItemDiscountPrice' step='any' min=0 value=\"$discountprice\" readonly >";
                echo"<span></span>";
            echo"</div>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
                echo"<label for='BizEditItemQty'>Quantity:</label>";
                echo"<input class='BizEditItemInput' type='number' id='BizEditItemQty' name='BizEditItemQty' min=0 value=\"$qty\">";
                echo"<span></span>";
        echo"</div>";



        echo"<div class='BizEditItemDetails'>";
            echo"<label for='BizEditItemDesc'>Desc:</label>";
            echo"<textarea class='BizEditItemInput' id='BizEditItemDesc' name='BizEditItemDesc' cols='30' rows='5'>$desc</textarea>";
            echo"<span></span>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<input class='BizEditItemInput' style='margin-left:360px' type='submit' name='BizEditItemSubmit' value='Submit'>";
        echo"</div>";

HTML FORM:

<form id='BizEditItem' name='BizEditItemDetails' method='post' action='edititemprocess.php'novalidate='novalidate'>
        <div class='BizEditItemDetail'>
            <label for='BizEditItemCat'>Category:</label>
            <select class='BizEditItemInput' id='BizEditItemCat' name='BizEditItemCat'>
            </select>
            <span></span>
        </div>

        <div class='BizEditItemDetail'>
            <label for='BizEditItemSubCat'>SubCategory:</label>
            <select class='BizEditItemInput' id='BizEditItemSubCat' name='BizEditItemSubCat'>
            </select>
            <span></span>
        </div>

        <div class='BizEditItemDetail'>
            <label for='BizEditItemOld'>Item:</label>
            <select class='BizEditItemInput' id='BizEditItemOld' name='BizEditItemOld'>
            </select>
            <span></span>
        </div>

        <div id='ItemDetailsContainer'>
        </div>
    </form>

Nope · Accepted Answer · 2013-11-26 16:41:08Z

2

It seems you are looking for on() with delegation.

on() with delegation asks you to bind to the closest static parent of the dynamic content you wish to bind to and then specify the actual element as a second parameter which you want to delegate the event to, similar to this:

$('#ItemDetailsContainer').on('change', '#BizEditItemRadioNo' function () {
    if(this.checked && this.value === 'No'){
        $('.BizEdititemDiscountDetails').hide();
    } else {
        $('.BizEdititemDiscountDetails').show();
    }
});

This is assuming off course #ItemDetailsContainer is static and not dynamically removed/re-added itself.

To initialize the state of the dynamic data you could do something, similar to this:

var handleBizEditItemRadioNoChange = function (element) {
    if (element.checked && element.value === 'No') {
        $('.BizEdititemDiscountDetails').hide();
    } else {
        $('.BizEdititemDiscountDetails').show();
    }
}

// When code has been dynamically added call this method to initialize any required default states, etc..
var initializeDynamicData(){
    handleBizEditItemRadioNoChange($('#BizEditItemRadioNo'));
}

$('#ItemDetailsContainer').on('change', '#BizEditItemRadioNo', function(){
     handleBizEditItemRadioNoChange(this);
});

Separate every logic into a a method and call when required.

edited Nov 26, 2013 at 16:41

answered Nov 26, 2013 at 16:07

Nope

22.4k8 gold badges50 silver badges73 bronze badges

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

2 Comments

Kenneth .J Over a year ago

I've tried what you suggested Francois, however it is not working as the dynamically added portion still shows itself upon loading even when #BizEditItemRadioNo is not checked. #ItemDetailsCOntainer is static.

Nope Over a year ago

@Ken: To trigger logic for setting up the dynamic data initial state you can take the code and separate it into methods and call them as required. I updated the answer with an example on how you might do that. For the other issues, can you please see if you can create a jsFiddle replicating the issues? That will make it easier to trouble-shoot.

bipen · Accepted Answer · 2013-11-26 16:08:47Z

0

that is not the way to use on for dynamically added element...you need to use on event delegation for dynamically added element..

 $('#ItemDetailsContainer').on('change','#BizEditItemRadioNo',function(){

  if (this.checked && this.value == 'No') 
 {
   $('.BizEdititemDiscountDetails').hide();
 }
 else
 {
  $('.BizEdititemDiscountDetails').show();
 }


});

answered Nov 26, 2013 at 16:08

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Uncle Aaroh · Accepted Answer · 2013-11-26 16:09:04Z

0

The problem is that 'change' event is not being triggered on the right DOM element.

Can you put this inside the page ready, something like this:

$(function () {
<!--
Manages loaded item details -->
$('#ItemDetailsContainer').on('change', function () {

    if ($('#BizEditItemRadioNo').is(':checked') && $('#BizEditItemRadioNo').val() == 'No') {
        $('.BizEdititemDiscountDetails').hide();
    } else {
        $('.BizEdititemDiscountDetails').show();
    }
});
});

answered Nov 26, 2013 at 16:09

Uncle Aaroh

8316 silver badges20 bronze badges

Collectives™ on Stack Overflow

Applying jQuery based on the values of dynamically added inputs in a form

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related