jquery append to input value

Question

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>

Yes, you don't append a value to an input, you set it with selector.val('New value'); — Majid Fouladpour
– Majid Fouladpour, Commented Jul 30, 2011 at 13:15
If this is a cart and you want to send multiple products to the back-end, then you should use my-item-id[], my-item-price[], etc. — Majid Fouladpour
– Majid Fouladpour, Commented Jul 30, 2011 at 13:19

Pehmolelu · Accepted Answer · 2011-07-30 10:01:39Z

5

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

answered Jul 30, 2011 at 10:01

Pehmolelu

3,5662 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AdRock Over a year ago

That is spot. Exactly what i was thinking but didn't know how

AdRock Over a year ago

Just 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?

Nicola Peluchetti · Accepted Answer · 2011-07-30 09:58:54Z

5

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

answered Jul 30, 2011 at 9:58

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Comments

Jayantha Lal Sirisena · Accepted Answer · 2011-07-30 10:03:47Z

2

do it like this,

var prev= $('[name=my-item-name]').val()
$('[name=my-item-name]').val(prev+" "+size);

edited Jul 30, 2011 at 10:03

answered Jul 30, 2011 at 9:57

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

1 Comment

Nicola Peluchetti Over a year ago

size is already the value of the current object so you can't call val() on it

melvnberd · Accepted Answer · 2014-06-02 15:22:05Z

1

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">

answered Jun 2, 2014 at 15:22

melvnberd

3,1858 gold badges36 silver badges72 bronze badges

Collectives™ on Stack Overflow

jquery append to input value

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related