SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Write HTML to Page onClick

    Here's what I have...

    HTML Code:
    <td align="left" valign="middle" id="weight_values">
    	<strong>Weight: </strong>
        <input name="weight[]" style="width: 10&#37;;" type="text">
        <strong>Price: </strong>
        <input name="price[]" style="width: 10%;" type="text">
        <br>
        <strong>Weight: </strong>
        <input name="weight[]" style="width: 10%;" type="text">
        <strong>Price: </strong>
        <input name="price[]" style="width: 10%;" type="text">
        <br>
    </td>
    <input type="button" name="Add Fields" />
    And here's what I want...

    HTML Code:
    <strong>Weight: </strong>
    <input name="weight[]" style="width: 10%;" type="text">
    <strong>Price: </strong>
    <input name="price[]" style="width: 10%;" type="text">
    <br>
    When a user clicks the submit button, I want to add the following block of HTML directly before the closing </td> (which has an ID of "weight_values"). I need this behavior to repeat every time the user clicks the button. I know this shouldn't be hard, so I'm just after a simple example that would make this work. Note that it's important none of the values in the already existing fields are modified.

    Thanks!
    Last edited by Wardrop; Jan 25, 2008 at 17:28.

  2. #2
    SitePoint Wizard bronze trophy bigalreturns's Avatar
    Join Date
    Mar 2006
    Posts
    1,295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code:
    javascript in head
    Code:
    <script type="text/javascript">
    function addlines() {
    addition='<strong>Weight: </strong><input name="weight[]" style="width: 10&#37;;" type="text"><strong>Price:</strong><inputname="price[]" style="width: 10%;" type="text"><br>';
    document.getElementById('weight_values').innerHTML=document.getElementById('weight_values').innerHTML+addition;
    }
    </script>
    
    body
    <input type="button" name="adder" id="adder" value="Add More" onClick="addinfo();" />
    "The proper function of man is to live - not to exist."
    Get a Free TomTom


  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wardrop View Post
    Note that it's important none of the values in the already existing fields are modified.
    Thanks, but I already tried what you suggested earlier, which is why I added the line above to my original post. That solution resets the values of all the fields.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Have the script remember the elements in there when the page first loads, then append them when the button is clicked.

    If you do a standard appendChild method, it will move the element from where it was to the new location. How to resolve this? Create a new copy of the element using the cloneNode method.

    Code HTML4Strict:
    <td align="left" valign="middle" id="weight_values">
        <strong>Weight: </strong>
        <input name="weight[]" style="width: 10%;" type="text">
        <strong>Price: </strong>
        <input name="price[]" style="width: 10%;" type="text">
        <br>
    </td>
    ...
    <input id="add_fields" type="button" value="Add Fields">

    Code Javascript:
    var weightValues = document.getElementById('weight_values');
    // remember initial elements
    weightValues.newValues = [];
    for (var i = 0; i < weightValues.childNodes.length; i++) {
        weightValues.newValues.push(weightValues.childNodes[i]);
    }
    // add onclick event
    document.getElementById('add_fields').onclick = addWeightValues;
    // add more weight values
    function addWeightValues() {
    	for (var i = 0; i < weightValues.newValues.length; i++) {
    		newElement = weightValues.newValues[i].cloneNode(true);
            weightValues.appendChild(newElement);
        }
    }
    Last edited by paul_wilkins; Jan 26, 2008 at 03:17.
    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
  •