Get Value and pass it to a button

Question

I need to pass the input.number value to the attribute data-quantity of the button in the div.add.
I also need the select#color value to the attribute data-color of the same button.

Can anybody help me ?

<div class="col-m">
    <a href="#" data-toggle="modal" data-target="#myModal1" class="offer-img">
        <img src="images/Long-Sleeve-Shirt.jpg" class="img-responsive" alt="">
        <div class="offer">
            <p><span>Offer</span></p>
        </div>
    </a>
    <div class="mid-1">
        <div class="women">
            <h6><a href="single.html">Men's Marty Chambray Long-Sleeve Shirt</a></h6>
        </div>
        <div class="mid-2">
            <p>
                <label>$14.00</label><em class="item_price">$12.50</em>
            </p>
            <div class="block">
                <div class="starbox small ghosting"></div>
            </div>
            <div class="clearfix"></div>
        </div>

        <select id="color">
            <option value="red" onclick="color(this.value)">Red</option>
            <option value="blue">blue</option>
        </select>
        <input type="number" name="quantity" id="quantity"></input>
        <div class="add">
            <button class="btn btn-danger my-cart-btn my-cart-b " data-id="1" data-name="Levi's Men's Marty Chambray Long-Sleeve Shirt" data-summary="summary 1" data-price="12.50" data-quantity="2" data-color="Blue" data-image="images/Long-Sleeve-Shirt.jpg">Add to Cart</button>
        </div>
    </div>
</div>

score 1 · Answer 1 · edited May 23 '17 at 10:30

Since you have Bootstrap classes in your code, I assume you also have jQuery, then here is something you can start looking at to do what you want :

// Triggers when the input value changes in any way
$('input#quantity').on('input',function() {
    // Gets the input value
    var value = $(this).val();

    // This is how to change an element data-attribute
    $('div.class > button').data("quantity", value);
});

See .on('input') jQuery event and both .attr() and .data() jQuery methods for more information.

To change the data-color attribute, it is quite the same :

// Triggers when you select an option
$('select#color').change(function() {
    // Gets the current select value
    var value = $(this).val();

    // Now you just need to change the data-color attribute
    // but you already know how to do it
});

See .change() jQuery event for more information.

You can use `$(this).val()` or `this.value`, but you can't combine the approaches without generating an error; and if you could the `value` property isn't a function... — David Thomas, Jun 16 '16 at 13:30
@DavidThomas Yep you're right. I mixed both of them .. Thanks for pointing that out, it is updated now — tektiv, Jun 16 '16 at 13:32

Get Value and pass it to a button

1 Answers1