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 : https://store.jerrysnuthouse.com/wholesaleform

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

http://store.jerrysnuthouse.com/cgi-bin/UCEditor?MerchantID=2101&ADD_ITEM=Quantity

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

http://store.jerrysnuthouse.com/cgi-bin/UCEditor?MerchantID=2101&ADD_Item="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 ------->

#ucTemplate("jnh_header_v2")

<head>

<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);
i++;

return false;
});

$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>

</head>

 #set($itemFormSubmitUrl = "http://store.jerrysnuthouse.com/cgi-bin/UCEditor?")
                            <form action="$itemFormSubmitUrl" method="get" id="wholesale_form">
  <input type="hidden" name="MerchantID" value="${merchantID}">
<div id="addinput">
<p>
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>
</p>
</div>

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

</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.

Related Articles