SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    India
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic form generation

    Using javascript i have created dynamic fields in a form with an "add" button.If i press "add" button the fields get repeated.

    Now my problem is that,after entering the values in the form,the values inside the text box field gets refreshed if i press the "add" button.

    my requirement is that the "add" button should be pressed each time after entering the data before repeating the form.

    After entering all the required values for the required number of times the "Submit" button should be pressed which takes all the values to the database.

    The number of times the "add" button should be pressed will vary time to time.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the new input fields are added within a form element then they will all be submitted.

    Code html4strict:
    <form>
        <div id="myDiv">
            <input id="add-button" type="button" value="add" />
        </div>
    </form>

    Code Javascript:
    function newInputField(name,id,defaultValue) {
        var newInput = document.createElement('input');
        newInput.id = id;
        newInput.name = name;
        newInput.value = defaultValue;
        return newInput;
    }
     
    document.getElementById('add-button').onclick = function(){
        var appendTo = document.getElementById('myDiv');
        appendTo.appendChild(newInputField('field2','field2','hello'));
        return false;
    }

    One thing to note is that you'll have to create some kind of function to detect the last field and name the next one appropriately - since no two element can have the same ID.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The form elements don't need an id, it's just extra without any useful purpose.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •