Changing values in dynamically generated html using Jquery

Question

As the title says, I'm wondering if there's a way to change the value of html items that are generated by jquery. Here's the code that I currently have:

the javascript

<script type="text/javascript">

$(document).ready(function() {
    $('#months').change(function() {
        var currentDate = new Date();
        var curentMonth = currentDate.getMonth();
        var curentYear = currentDate.getYear();

        $(".row:not(:first)").remove();
        for (var i = 0; i < this.selectedIndex; i++)
        $(".row:first").clone(true).insertAfter(".row:last");
        $('#dateDueMonth['+i+']').val(curentMonth + 1);
    })
});

</script>

My thought here was that after the row was cloned, I could then change the dropdowns content based upon it's current name, but obviously that's not working, and I've been unable to find a way to "hook" into dynamic html content.

and the base html

<select id="months" name="months">

<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>

<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td><div id="showRows"><div class="row" id="row[]"><td class="td_alt"><select id="dateDueMonth[]" name="dateDueMonth[]" >
<option value="0">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>

<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option selected value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>

 <select id="dateDueYear[]" name="dateDueYear[]">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected value="2011">2011</option>
</select>

Now the generation of dynamic html and form submission works great. Gives me the data that I can use for my back end code. However having it so that I can increment the values in the various dropdowns as I see fit would make data entry by the folks using this page a whole lot easier, hence the issue.

To all that reply, thanks for your help with this jquery/JS noob.

EDIT: For this what I want to have is a form that can spawm multiples copies of the first line encased within the showRows div. When this is submitted, I want it to be able to collect that information in arrays for each select/input statement for the rows that are generated. For example if I selected two months, dateDueMonth, dateDueYear, and amount would be arrays in my form that would have two entries each. The current code does this, but by default it has the default elements for the dropdown menus set the same as the row of HTML that it is cloning.

I came in to help and I really appreciate your descriptions and code, but I don't know what you're looking for :( Are you just wanting to have those elements be editable by users? — Jacksonkr
– Jacksonkr, Commented Aug 13, 2011 at 17:34
$('#dateDueMonth['+i+']').val(curentMonth + 1); is never executed. What ultimate markup are you trying to achieve? — Joseph Marikle
– Joseph Marikle, Commented Aug 13, 2011 at 17:34
We definitely can help you, but you must clarify your issue. Talking about your greater-goal would help things along very much. Are you trying to load the days-in-this-month (28-31) and then change the name["days"]? — Kalle H. Väravas
– Kalle H. Väravas, Commented Aug 13, 2011 at 17:44
when you using statements like if, for.. don't forget to use {}. otherwise it may brake your code when you format. and if you not use brackets it only affected to immediate next line. — Chamika Sandamal
– Chamika Sandamal, Commented Aug 13, 2011 at 17:46
@Chamika Sandamal Good eye. I thought I had fixed that last night, but suppose not. — canadiancreed
– canadiancreed, Commented Aug 13, 2011 at 19:23

Muhammad Usman · Accepted Answer · 2011-08-13 17:45:37Z

3

Not sure what you want to do, but it should work like this

$(document).ready(function() {
    $('#months').change(function() {
        var currentDate = new Date();
        var curentMonth = currentDate.getMonth();
        var curentYear = currentDate.getYear();
        var arr;
        $(".row:not(:first)").remove();
        for (var i = 0; i < this.selectedIndex; i++)
        arr=[$(".row:first").clone(true).insertAfter(".row:last")];
        $('#dateDueMonth['+i+']').val(curentMonth + 1); //don't know why its here

        arr[0].text("your value"); //apply the index you wanna change
    })
});

edited Aug 13, 2011 at 17:45

answered Aug 13, 2011 at 17:35

Muhammad Usman

12.5k6 gold badges39 silver badges60 bronze badges

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

Comments

Joseph Marikle · Accepted Answer · 2011-08-13 22:40:44Z

2

Are you trying to achieve this kind of markup? Demo

<div id="showRows"><div class="row" id="row[0]"><select id="dateDueMonth[0]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>

<select id="dateDueYear[0]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>

</div><div class="row" id="row[1]"><select id="dateDueMonth[1]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>

 <select id="dateDueYear[1]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>

...

This may be what you need. See my demo linked above.

for (var i = 1; i <= this.selectedIndex; i++) {
    row = $(".row:first").clone(true)[0];
    row.id = "row["+i+"]";
    $(row).find("[id^='dateDueMonth']").attr("id","dateDueMonth["+i+"]").val((curentMonth + i) % 12 + 1);
    $(row).find("[id^='dateDueYear']").attr("id","dateDueYear["+i+"]");
    $(row).insertAfter(".row:last");
}

edited Aug 13, 2011 at 22:40

answered Aug 13, 2011 at 17:46

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

2 Comments

canadiancreed Over a year ago

Tried the demo, but it seems the months and year values dont' increment for each row. I moved the javascript code into the corresponding window on fiddle, but same result.

canadiancreed Over a year ago

much obliged. The latest one resolved the issue and helped to explain what needed to be done for other features I wanted to do as well.

Chamika Sandamal · Accepted Answer · 2011-08-13 17:42:28Z

1

you cannot use ids as array in JavaScript. if you want, you have to put array index as well when you create element. or else just access the select element as bellow

$(document).ready(function() {
    $('#months').change(function() {
        var currentDate = new Date();
        var curentMonth = currentDate.getMonth();
        var curentYear = currentDate.getYear();

        $(".row:not(:first)").remove();
        for (var i = 0; i < this.selectedIndex; i++) {
            $(".row:first").clone(true).insertAfter(".row:last");
            $('.row:last select').val(curentMonth + 1);
        }
    })
});

Working sample

answered Aug 13, 2011 at 17:42

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

1 Comment

canadiancreed Over a year ago

Hmm when I select multiple rows to display it shows August 2005. What I was trying to do is have each multiple row created increment the month value by one (and when it get over 12, to roll over and increment the year by 1, but figured one problem at a time)

Collectives™ on Stack Overflow

Changing values in dynamically generated html using Jquery

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related