How to combine two form fields and submit as a field with jquery?


Ok Here's my problem.
I made a form where you can enter multiple items and quantities - You can add additional form fields if you need to add more items.

The form can be accessed at :

For my shopping cart to recognize multiple items submitted it needs to be submitted as

Where Item is replaced by the number that the customer inputs and quantity is replaced also.

Right now i have two fields, item and quantity. When submitted they are sent as"ITEM"&quanity="Quantity"

The extra equals signs can't be there.

So couple possible solutions - need to strip the equal signs OR

Need to have the values entered for each item and quantity joined - and submitted somehow to follow the format i've outlined.

Thought about creating another hidden input and joining them there... but then i would need to just submit that one input to my shopping cart

Any thoughts are much appreciated.

BTW - can use jquery or velocity.

Thanks, Nick

<!------Wholesale Form ------->



<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size();

$('#addNew').live('click', function() {
$('<p '+ i +'>Item#<input type="text" id="item" size="" name="ADD_" value="" placeholder="I am New item" />Quantity#<input type="text" id="quantity" name=""  value="" placeholder="I am New quantity" /><a href="#" id="remNew">Remove</a> Or <a href="#" id="addNew">Add</a> </p>').appendTo(addDiv);

return false;

$('#remNew').live('click', function() {
if( i > 2 ) {
return false;


 #set($itemFormSubmitUrl = "")
                            <form action="$itemFormSubmitUrl" method="get" id="wholesale_form">
  <input type="hidden" name="MerchantID" value="${merchantID}">
<div id="addinput">
Item#<input type="text" id="item" size="20" name="ADD_" value="" placeholder="Item #" />  Quantity:<input type="text" id="quantity" size="20" name="" value="" placeholder="Quantity" /><a href="#" id="addNew">Add</a>

<div id="addtocart" style="float:left;"><input type="submit" value="add to cart"/></div>


It seems like there are several things that need to be fixed.

Maybe the line in the click handler for #addNew should look like this:

$('<p '+ i +'>Item#<input type="text" name="ADD_ITEM" value="Quantity" placeholder="I am New item" />Quantity#<input type="text" placeholder="I am New quantity" /><a href="#" id="remNew">Remove</a> Or <a href="#" id="addNew">Add</a> </p>').appendTo(addDiv);

Keep in mind that it is invalid to have multiple elements with the same id attribute and this can cause problems. You may want to use a class instead. See my other question.

Also, what are you trying to do with the part that says '<p '+ i +'>...'? That will output a something like <p 1> or <p 2>. I don't think it makes sense to have numbers as attribute names like that.