jquery append to input value
17,522
Solution 1
append: "Insert content, specified by the parameter, to the end of each element in the set of matched elements."
What you want to do is append to the value I think?
var value = form.find('[name=my-item-name]').val();
form.find('[name=my-item-name]').val(value + size);
Solution 2
If you mean concatenate:
$('[name=my-item-name]').val($('[name=my-item-name]').val()+""+size);
(Reading your code size is already the val of the object so you can't call size.val()
)
Solution 3
do it like this,
var prev= $('[name=my-item-name]').val()
$('[name=my-item-name]').val(prev+" "+size);
Solution 4
better solution for appending values to form input:
var attachedValue = [];
//add element to attachedValue array
attachedValue.push(size.val());
$(element).val(attachedValue);
result: 6666,5555,2222
// remove element from array;
// remove 5555 element from array
var index = attachedValue.indexOf(size.val());
if (index > -1) {
attachedValue.splice(index, 1);
}
$(element).val(attachedValue);
result 6666,2222
your form then would look like :
<input type="hidden" value="6666,2222" name="my-item-name">
Author by
AdRock
Father of 2, living with partner, finished at Exeter University
Updated on June 29, 2022Comments
-
AdRock almost 2 years
This is the last problem i have with my form (hopefully)
What I want to do is append the var size to my hidden input called my-item-name
I have tried adding this
form.find('[name=my-item-name]').append(size.val());
but it doesn't work.
What is the correct way to append the size val to the input?
<form method="post" action="" class="jcart"> <fieldset> <input type="hidden" name="jcartToken" value="13823c48f896c49403465fcce9f135ac" /> <input type="hidden" name="my-item-id" value="12" /> <input type="hidden" name="my-item-price" value="15.99" /> <input type="hidden" name="my-item-url" value="http://yahoo.com" /> <input type="hidden" name="my-item-name" value="Operation Braveheart hooded sweatshirt" /> <ul> <li> <select name="my-select" id="foo12"> <option value='Small'>Small</option> <option value='Medium'>Medium</option> <option value='Large'>Large</option> <option value='X-Large'>X-Large</option> </select> </li> <li>Price: $<span id="price12" class="price">15.99</span></li> <li> <label>Qty: <input type="text" name="my-item-qty" value="1" size="3" /></label> </li> </ul> <input type="submit" name="my-add-button" value="add to cart" class="button" /> </fieldset> </form> <script type="text/javascript"> var item_prices_by_size12 = { "Small": { "Price": "15.99", "ItemId": "9-1" },"Medium": { "Price": "16.99", "ItemId": "9-2" },"Large": { "Price": "17.99", "ItemId": "9-3" },"X-Large": { "Price": "18.99", "ItemId": "9-4" }}; $(function() { $('#foo12').change(function() { var form = $(this).parents('form'); // Size is whatever the value the user has selected var size = $(this).val(); // Determine the correct price and item ID based on the selected size var price12 = item_prices_by_size12[size].Price, itemId = item_prices_by_size12[size].ItemId; form.find('#price12').text(price12); form.find('[name=my-item-price]').val(price12); // Update the item ID form.find('[name=my-item-id]').val(itemId); form.find('[name=my-item-name]').append(size.val()); }); }); </script>
-
Nicola Peluchetti over 12 yearssize is already the value of the current object so you can't call val() on it
-
AdRock over 12 yearsThat is spot. Exactly what i was thinking but didn't know how
-
AdRock over 12 yearsJust tried it and they all do what i expect, but instead of the size val chnaging on the the change() event, once i make a slection, it concatenates to the previous size val giving Small Medium Large instead of changing. How do i clear the val after the change event has been done?