Question

We are using following code to append more input element on text change:

$(document).ready(function() {
$('#instal').change(function() {
    var instalval = parseInt($(this).val());
    if(instalval != '') {
    for( i = 0; i < instalval; i++) {
        $('#fields').append(' <li class="inputs clearfix"><input type="text" class="small" size="30" name="date" placeholder="Date" /> <input type="text" class="small" size="30" name="amount" placeholder="Amount" /> <span title="Remove this" class="ui-icon ui-icon-closethick closefield"></span> </li>');
    }
    }  
});
$('.closefield').live('click', function() {
$(this).parent().remove();
});
});

We are using html5 input type=”number” for value but so it adds 6 elements if we selects 6 and after that if we selects 12 it adds 12 to last added 6 elements so totals elements would be 18 not 12 (on selection of 12), so how can we fix our code to achieve this, and what if we select 6 again after selecting 12, i hope this makes sense. thanks.

Even if you could help how can we post it to mysql using php?

Answer 1

You could put an if statement in the beginning of the callback that checks if the #fields element’s children have the class inputs. If it does, then remove them.

$(document).ready(function() {
$('#instal').change(function() {
    if($('#fields').children().hasClass('inputs')) {
        $('.inputs').remove();
    }
    var instalval = parseInt($(this).val());
    if(instalval != '') {
        for( i = 0; i < instalval; i++) {
            $('#fields').append(' <li class="inputs clearfix"><input type="text" class="small" size="30" name="date" placeholder="Date" /> <input type="text" class="small" size="30" name="amount" placeholder="Amount" /> <span title="Remove this" class="ui-icon ui-icon-closethick closefield"></span> </li>');
            $(function() {
                 $( ".small" ).datepicker({ minDate: "+" + i.toString() + "M" });
            });
        }
    }  
});

$('.closefield').live('click', function() {
    $(this).parent().remove();
 });

This is for the jQuery UI datepicker:

$(function() {
    $( ".date" ).datepicker();
});

This is for fixing the range of dates:

$(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});