Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery append to input value

Tags:

jquery

php

append

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>
like image 641
AdRock Avatar asked Jul 30 '11 09:07

AdRock


People also ask

How do you add value to the input field?

To append an element with a text message when the input field is changed, change() and appendTo() methods are used. The change() method is used to detect the change in the value of input fields. This method works only on the “<input>, <textarea> and <select>” elements.

How do you append to text in HTML?

To append text to an element: Use the document. createTextNode() method to create a text node. Use the appendChild() method to append the text node to the element.

What is append in jQuery?

jQuery append() Method The append() method inserts specified content at the end of the selected elements. Tip: To insert content at the beginning of the selected elements, use the prepend() method.


2 Answers

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); 
like image 89
Pehmolelu Avatar answered Oct 06 '22 20:10

Pehmolelu


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

like image 30
Nicola Peluchetti Avatar answered Oct 06 '22 20:10

Nicola Peluchetti