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

[Bisa]

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:

<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

 

<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 =)

[Psycho]

Well, first of all your button has no trigger. You need to add an onclick trigger to call the function . But for some reason the button will not work when it is within the form tags. I have no idea why - just move it out of the form tags with an onclick trigger and it should work:

 

<form method="post" action="bestall.php">
  <span id="writeroot"></span>
</form>

<input type="button" id="moreFields" value="Lägg till fler produkter" onclick="moreFields()" />

 

However, using javascript for something like this is a very bad solution in my opinion as it will prevent anyone without javascript enabled from using the site.

[Bisa]

thnx for the help 

 

however, you say I should not use js? Any idea how I would approach this in another way?

 

The thing is I do not want my costumers to be limited to a certain amount of fields, I'd rather have them add fields depending on how many different articles they want to purchase. (some users might buy 20 and others 3, having 10 fields in these cases would force the customer buying 20 to submit two orders and the customer only buying 3 would think he is not meeting the sellers expectation by only buying 3 articles when there is space for 10 and so on)

 

Edit, the script now adds another row whenever I press the button (yay! =) however the dynamically added fields are all having the same name something which did not happen in the demo on the original script - any idea why this is?

[Psycho]

As I said, using Javascript for this type of functionality will only prevent those users without JS enabled for using it. There are several other methods you could use.

 

1. Have an Add button which simply submits the page back to itself. The server-side page will count how many items were submitted and create fields for the number of items submitted (plus 1) and prepopulate all but the last set of fields with the submitted values.

 

2. Ask the suer up front how many items they will order and submit. Then display a page with the number of fields they requested.

 

3. use a standard shopping cart where the user add one item at a time.

[Bisa]

cheers, appreciate you taking your time to answer 

 

(topic solved btw)