CODEWITHSUNDEEP
jquery
scooti
scooti

Reputation: 51

functions doesnt work on dynamically added form fields

I created form with 2 fields where user can add values for generate rectangular div with his values. 

    <form>
        <fieldset class="fieldset">1
        <input type="text" id="test" name="test" />2
        <input type="text" id="test2" name="test" />
        </fieldset>
        <input type="button" id="add_new" value="add new">
    </form>
<div id="dimensions"></div>
<div id="trouble"></div>
<div id="texte"></div>

Everything work perfect, but now I add some functionality to dynamically adding more fieldsets with forms. And I want to draw rectangle div for each fieldset with form fiels. When I type values 100x200px in first row jquery will draw div with these dimensions, but when Im typing in second or third fieldset, div will be redrawn with values from another fieldset.. I dont know why these values from dynamically added fieldset are not working.

$(document).ready(function () {

var fieldset_parent = $(".fieldset:eq(0)").clone();

$(document).on("click", "input#add_new", function () {
            $("fieldset:last").after($(fieldset_parent).clone());
});

$("#test, #test2").keyup(function () {
    var width = parseInt($("#test").val());
    var height = parseInt($("#test2").val());
    var max = 200;
    var min = 20;

    var ratio;
    if (width >= height) {
        $("#trouble").html("Width bigger");
        ratio = max / width;
        width = ratio * width;
        height = height * ratio;
    } else {
        $("#trouble").html("height bigger");
        ratio = max / height;
        height = ratio * height;
        width = width * ratio;
    };
    $("#dimensions").html(width + " x " + height);
    $("#texte").css({
        "width": width + "px",
            "height": height + "px"
    });

});
});

And here is my code of fiddle

thanks a lot for your help

Upvotes: 0

Views: 171

Answers (2)

PSL
PSL

Reputation: 123739

You may want to turn ids into classes (to avoid duplication of ids) and also event delegation for the inputs that are created dynamically for the keyup event. Try this way: Since you want shapes for each of the section you can wrap them into single fieldset.

Html

<form>
    <fieldset class="fieldset">1
        <input type="text" class="test" name="test" />2
        <input type="text" class="test2" name="test" />
        <div class="dimensions"></div>
        <div class="trouble"></div>
        <div class="texte"></div>
    </fieldset>
    <input type="button" id="add_new" value="add new">
</form>

Script

$(document).ready(function () {

    var fieldset_parent = $(".fieldset:eq(0)").clone();

    $('form').on("click", "input#add_new", function () {
        $("fieldset:last").after($(fieldset_parent).clone());
    });



  $(document).ready(function () {

    var fieldset_parent = $(".fieldset:eq(0)").clone();

    $('form').on("click", "input#add_new", function () {
        $("fieldset:last").after($(fieldset_parent).clone());
    });

    $('form').on('keyup', ".test, .test2", function () {

        var $parent = $(this).closest('.fieldset'); //Get the closest fieldset (parent) of the textbox under question.
        var width = parseInt($(".test", $parent).val()); //get the value of textbox within the parent, as the context.
        var height = parseInt($(".test2", $parent).val());//get the value of textbox within the parent, as the context.
        var max = 200;
        var min = 20;

       var ratio;
       $(".trouble", $parent).html(function(){ //Set the html based on width >=height
                return width >= height ? "Width bigger" : "height bigger";
       }); 

         ratio = max / width;
         width = ratio * width;
         height = height * ratio;

        $(".dimensions", $parent).html(width + " x " + height);
        $(".texte", $parent).css({
            "width": width + "px",
            "height": height + "px"
        });

    });
});

Demo

Upvotes: 1

mkutyba
mkutyba

Reputation: 1427

You have to change

$("#test, #test2").keyup(function () {

to

$("body").on('keyup', '#test, #test2', function () {

Also this won't work

var width = parseInt($("#test").val());
var height = parseInt($("#test2").val());

because it will return value of first matched element - if you clone #test and #test2 you will have more than one, but you read the value of only first element, not element you write into, so change to this:

var width = parseInt($(this).parent().children('#test').val());
var height = parseInt($(this).parent().children('#test2').val());

Also you shouldn't clone elements with same id, so changed to classes instead of ids.

Complete code with changes here: http://jsfiddle.net/mattydsw/xzGXF/1/

Upvotes: 4

Related Questions