nonstop328 nonstop328 - 11 days ago 6
jQuery Question

How do i rearrange the number in java script loop?

I have done the dynamic generates textbox based on the number that user type. For example, user types 10 in the input box clicked add will generate 10 input box. I have a label to catch the number.

here is my question


  • how do I start from 1?

  • how do I rearrange the number when user remove one of the input boxes



here is my javascript

$(document).ready(function () {
$("#payment_term").change(function () {

var count = $("#holder input").size();
var requested = parseInt($("#payment_term").val(), 10);

if (requested > count) {
for (i = count; i < requested; i++) {
$("#payment_term_area").append('<div class="col-lg-12 product_wrapper">' +

'<div class="col-lg-12 form-group">' +
'<label>' + i + 'Payment</label>' +
'<input type="text" class="payment_term form-control" name="PaymentTerm[]"/>' +
'</div>' +

'<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' +

'</div>');
}
$("#payment_term_area").on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('.product_wrapper').remove();
calculateTotal();
x--;
})
}
});

});


here is my view

<input type="text" id="payment_term" />
<button onclick="function()">Add</button>
<div id="payment_term_area"></div>

Answer

You were nearly there, however, by hardcoding the label's you were making updating them difficult for yourself. I have created a jsfiddle of my solution to your problems. I personally prefer to cache the values of my jQuery objects so that they arent hitting the DOM each time they are referenced, for the performance boost (hence why they are listed at the top). I also, find it nicer to bind the click event in JS rather than using the html attribute onclick, but this is just a preference.

JSFIDDLE

Javascript

// create cache of jQuery objects
var add_payment_terms_button = $('#add_payment_terms');
var payment_term_input = $('#payment_term');
var payment_term_area = $('#payment_term_area');

// bind to generate button
add_payment_terms_button.on('click', generatePaymentTerms);

function generatePaymentTerms(){
    var requested = parseInt(payment_term_input.val(), 10);
    // start i at 1 so that our label text starts at 1
    for (i = 1; i <= requested; i++) {
        // use data-text to hold the appended text to the label index
        payment_term_area.append(
        '<div class="col-lg-12 product_wrapper">' +
            '<div class="col-lg-12 form-group">' +
                '<label data-text=" Payment"></label>' +
                '<input type="text" class="payment_term form-control" name="PaymentTerm[]"/>' +
            '</div>' +
            '<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' +
        '</div>');
    }
    // call the function to set the labels
    updateProductIndexes();
}

function updateProductIndexes(){
    // get all labels inside the payment_term_area
    var paymentLabels = payment_term_area.find('.product_wrapper label');
    for(var x = 0, len = paymentLabels.length; x < len; x++){
        // create jQuery object of labels
        var label = $(paymentLabels[x]);
        // set label text based upon found index + 1 and label data text
        label.text((x + 1) + label.data('text'));
    }
}

payment_term_area.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('.product_wrapper').remove();
    // after we remove an item, update the labels
    updateProductIndexes();
})

HTML

<input type="text" id="payment_term" />
<button id="add_payment_terms">Add</button>
<div id="payment_term_area"></div>
Comments