CODEWITHSUNDEEP
javascriptjqueryhtml
Si8
Si8

Reputation: 9225

How to populate textfields using JQuery

I have the following DIV:

<div id="modalUpdate">
    <div class="modal-content">
        <div class="header">
            <h2>Update Item in Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice"></span><br /><br />

            <label>Quantity:</label>
            <input type="text" id="quantity" name="quantity" placeholder="10">

            <label>Price:</label>
            <input type="text" id="price" name="price" placeholder="$10.00">

        </div>
        <div class="cf footer">
            <input type="button" value="Cancel" id="cancelUpdate"><input type="button" value="Update Item" id="updateTable">
        </div>
    </div>
    <div class="overlay"></div>
</div>

I would like to access the SELECT and each textboxes using JQuery so I can populate values into it. I tried the following:

var values = $('#'+p.id+' td').map(function(i,c){ return $(c).text(); }).get();
alert(p.id);
alert(values);
$("#modalUpdate #modal-content .copy #itemChoice").val(values[0]);
$("#modalUpdate #modal-content .copy #spanPrice").text("Each: " + values[1]);
$("#modalUpdate #modal-content .copy #quantity").val(values[2]);
$("#modalUpdate #modal-content .copy #price").val(values[3]);

The alert displays the correct values but the fields are not populating for some reason.

How can I fix the code so that it works?

Upvotes: 0

Views: 38

Answers (2)

Salathiel Genese
Salathiel Genese

Reputation: 1909

If I've unterstand your question, this should work

        $(function() {
            // Select all <select> tag inside div#modalUpdate and callback this function for eac of them
            $('div#modalUpdate select').each(function() {
                // alert the ID attribute for the current SELECT tag as well as it's VALUE
                alert('SELECT#' + $(this).attr('id') + ' = ' + $(this).val())
            });
            // Select all INPUT element inside div#modalUpdate having [type="texte"] and execute a callback function for each of them
            $('div#modalUpdate input[type="text"]').each(function() {
                if ('quantity' === $(this).attr('id')) {
                    // Check ID for the current matched element before running a specific action
                    $(this)// .actionIfTrue();
                }
                else if ('price' === $(this).attr('id')) {
                    // Same as first condition
                    $(this)// .actionIfTrue();
                }
            });
        });

Upvotes: 1

Katstevens
Katstevens

Reputation: 1571

modal-content is a class, so your selector in the jquery should be as follows:

$("#modalUpdate .modal-content .copy #itemChoice").val(values[0]);

That being said, because an ID selector can only select a single element (by definition an ID must be unique on the page), you could just use the child IDs directly:

$("#itemChoice").val(values[0]);
$("#spanPrice").text("Each: " + values[1]);
$("#quantity").val(values[2]);
$("#price").val(values[3]);

Upvotes: 2

Related Questions