jquery click function generate textbox

Question

Good day to all, I'm new to jQuery. I have this code.

$(document).ready(function() {
        var start_date = '';
        var end_date = '';
        var total = 0;

        $("#getdate").click(function () {

            start_date = parseInt($('#startdate').val().substring(5,7));
            end_date = parseInt($('#enddate').val().substring(5,7));
            total = (end_date - start_date) + 1;

            var monthDiv = $(document.createElement('div')).attr("id",'month' + total);

            for(i=1;i<=total;i++){
                monthDiv.after().html('<input type="text" />');
                monthDiv.appendTo("#monthList");
            }
            //alert(total); 
        });
});

Don't know where I went wrong but.. I want to generate textboxes base on the dates (start_date and end_date) so for example in the input type date I start with January and ends with March it should generate 3 textboxes. But in my code, it seems it will only generate one textbox per click. Any help would be much appreciated. Thanks!

And here's my html code:

<html>
<body>
   <input type="date" id="startdate" name="start_date" />
   <input type="date" id="enddate" name="end_date" />
   <input type="button" id="getdate" value="GET DATE"/>
   <div id="monthList">
   </div>
</body>
</html>

use monthDiv.append('<input type="text" />'); instead of monthDiv.after().html('<input type="text" />'); — gillyspy
– gillyspy, Commented May 5, 2013 at 7:06
Also use $('<div />') instead of $(document.createElement('div')) — palaѕн
– palaѕн, Commented May 5, 2013 at 7:59

PSL · Accepted Answer · 2013-05-05 07:08:18Z

1

You are doing an .after().html() which will always put only the last textbox.

http://jsfiddle.net/bpxVt/

$(document).ready(function() {
        var start_date = '';
        var end_date = '';
        var total = 0;

        $("#getdate").click(function () {

            start_date = parseInt($('#startdate').val().substring(5,7));
            end_date = parseInt($('#enddate').val().substring(5,7));
            total = (end_date - start_date) + 1;

            var monthDiv = $(document.createElement('div')).attr("id",'month' + total);

            for(i=1;i<=total;i++){
                monthDiv.after('<input type="text" />');

            }
             monthDiv.appendTo("#monthList");
        });
});

answered May 5, 2013 at 7:08

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

Boy Karton Over a year ago

Why would you put $('#monthList').empty() what for? Anyway, thanks. It helped!

Boy Karton Over a year ago

Oh! Sorry about that, I'm still new here. And about the emptying of textbox even though I didn't mentioned it. Thanks a lot!

Anujith · Accepted Answer · 2013-05-05 07:07:25Z

1

See this: http://jsfiddle.net/nTwcH/

$(document).ready(function () {
  var start_date = '';
  var end_date = '';
  var total = 0;

  $("#getdate").click(function () {

    start_date = parseInt($('#startdate').val().substring(5, 7));
    end_date = parseInt($('#enddate').val().substring(5, 7));
    total = (end_date - start_date) + 1;

    var monthDiv = $(document.createElement('div')).attr("id", 'month' + total);

    for (i = 1; i <= total; i++) {
        monthDiv.append($('<input type="text" />'));
    }
    monthDiv.appendTo("#monthList");
  });
});

answered May 5, 2013 at 7:07

Anujith

9,3686 gold badges36 silver badges48 bronze badges

1 Comment

Boy Karton Over a year ago

Thanks! I was planning to put names each of it.

V31 · Accepted Answer · 2013-05-05 07:06:37Z

0

The line monthDiv.after().html(''); should be written like monthDiv.html('');

answered May 5, 2013 at 7:06

V31

7,6643 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

jquery click function generate textbox

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related