Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New fields in a form - can I have some1 taking a look at this code? :)

    I'm developing a simple shop-website for a friend of mine, I got the basics covered and now I need to have the "buy"-form functional.

    The idea is to have the customer fill in name/address etcetera, in this form I'd also like them to be able to fill in article number and how many of the article they want to buy. Rather then giving them like 5 rows of these fields I figured I'd use a java script to add a new row whenever they click a button should they find themselves with to few fields.

    I googled ahead and found this which I thought could do the trick:
    http://www.quirksmode.org/dom/domform.html

    When adjusted to my liking I get this code:
    Code:
    <script type="text/javascript">
    
    /* Script from http://www.quirksmode.org/dom/domform.html */
    
    var counter = 0;
    
    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 = moreFields;
    </script>
    
    <div id="readroot" style="display: none">
    
    	<table width="400" border="0" cellpadding="0" cellspacing="0">
          <tr>
       <td>Artikelnr: </td>
       <td><label>
              <input type="text" name="artnr" id="artnr">
            </label></td>
            <td>Antal: </td>
            <td><label>
              <input name="antal" type="text" id="antal" value="1" size="6">
            </label></td>
          </tr>
        </table>
    
    </div>
    
    <form method="post" action="bestall.php">
    
    <span id="writeroot"></span>
    
    	  <input type="button" id="moreFields" value="Lägg till fler produkter" />
    
    /*the rest of the form, address and stuff which I figured is of no importance atm */
    
    </form>
    now when I brows the page where this code has been entered I get the first row of article number and the rest of the form - but - when I press the button to add more forms

    Code:
    <input type="button" id="moreFields" value="Lägg till fler produkter" />
    nothing happes.

    I suspect that since I have no real clue of what I'm doing (I simply copy past stuff) that the problem here might be simple, any way - I'd appreciate if some1 could take a glance at the code to see if I missed something?

    Thnx in advance =)
    Last edited by Bisa; 10-15-2008 at 11:28 AM.

  • #2
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Java!=JavaScript. Moving thread to JavaScript forum.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Do not give the button the same name or id as the functon moreFields().

    You have not specified any action to take place when the button is clicked.

    <input type = "button" id = "mflds" value = "L&#228;gg till fler produkter" onclick = "moreFields()"/>



    Prostitutes Appeal to Pope - newspaper headline

  • #4
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thnx for the help I also had to move the button outside my form to get it to work, now I can dynamically create more fields, however, they are having the same name all of them which makes this useless for ordering stuff...

    I've given it a second thought and decided to scrap js for now - still appreciate your help


  •  

    Posting Permissions

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