create / remove text fields live in your html form

    [javascript]
    //Hint: i tried it on Jquery 1.7.1 and it worked !
    //Hint: do not forget to add Jquery to your page !

    $(document).ready(function() {

    //bader: set how many fields you need
    var MaxFields = 5;
    //bader: set the labelname
    var labelField = "Class: ";
    //bader: set the alert message
    var AlertMsg = "No More than ";

    //bader : code here
    var counter = 1;

    //bader: here we add fields
    $(‘#add’).click(function() {

    if (counter > MaxFields) {
    alert(AlertMsg + MaxFields);
    return false;
    }

    $(‘#text’).add(‘<div id="div’ + counter + ‘"><label for="add">’ + labelField + counter + ‘: </label><input type="text" maxlength="50" value="" /></div>’).appendTo(document.body);
    counter++;

    });

    //bader: here we delete fields
    $(‘#remove’).click(function() {

    if (counter == 0) {

    alert("No More classes to remove");
    counter = 1;
    return false;

    }

    $(‘#div’ + counter).remove();
    counter–;

    });

    });?

    /* Add this to your html form
    <input type="button" name="add" id="add" value="add" />
    <input type="button" name="remove" id="remove" value="remove" /><br/>
    */

    /* try demo here
    http://jsfiddle.net/T3tUq/168/
    */
    [/javascript]

    Leave a Reply