add 10 text boxes one by one on clicking add more button

开发者_如何学编程In my form i am having a button to Add More EmailId where i have to give ten textbox one by one can anybody please tell about appropriate javascript..

Try something like this, its something I ripped from another project. Wrap your form around the div and when you submit your email addresses will be in an array as the name of the input box is email[].

<div class="cntdelegate">
         <div id="readroot" style="display:none;">
        <table cellspacing="0"> 
            <tr>
                <td><label for="theiremail"><span>Email</span></label><input type="text" name="email[]" id="theiremail" value="Email" class="emailbox" maxlength="100" onFocus="if(this.value=='Email'){this.select()};" onClick="if(this.value=='Email'){this.select()};" /></td>
            </tr>
        </table>
        <a href="javascript:;" onClick="this.parentNode.parentNode.removeChild(this.parentNode);" class="bookDelete">Remove</a>
            <div class="clear"></div>
        </div>
        <span id="writeroot"></span>
          <button style="float:right!important;" type="submit" class="withArrow" name="submit" id="submit" value="submit" alt="Send" title="Send">Book now</button>
          <div class="addDelegate" style="float:left!important;">
                    <a href="javascript:;" onClick="moreFields();" id="moreFields" class="bookPlus">Add another delegate</a>
            </div>
                <div class="clear"></div>
                </form>
                </div>
<script>
var counter = 0;
function init() {
    moreFields();
}

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = function () 
{
    if (self.init)
        init();
}
</script>

I'm unsure what html you have but I've created a simple jQuery example here http://jsfiddle.net/TsmTg/2/

Here's the code

$(function(){
    var emailAddress = $("[name=emailAddress]");

    $("#addEmailAddress").click(function(){
        emailAddress.after(emailAddress.clone());
    });
});​

This will copy your email input and just add a clone after the original. All the email address inputs will have the same name so you will have to handle parsing the data on the server side. You could modify it so each email address input has a different name by using a counter to append a number to the end of each input, like so:

$(function(){
    var emailAddress = $("[name=emailAddress]");

    $("#addEmailAddress").click(function(){
        var newEmail = emailAddress.clone();
        newEmail.attr("name", newEmail.attr("name") + ($("[name^=emailAddress]").length + 1));
        emailAddress.after(newEmail);
    });
});

Are you using Tables to put the textboxes? In that case, cloning rows from the table easily adds a new row with the contents in a table.

Add your HTML code. This will help finding the solution easier.