How to populate textfields using JQuery

Question

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?

Katstevens · Accepted Answer · 2014-07-19 13:01:45Z

2

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

answered Jul 19, 2014 at 13:01

Katstevens

1,56913 silver badges29 bronze badges

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

4 Comments

Si8 Over a year ago

Thank you. I guess I missed it. I have to do it like that because I have another modal popup that has a different ID but the fields have the same ID. Thank you again.

Katstevens Over a year ago

Ahh I see. In that case, your second modal should have a different ID, but you should use classes for the elements, as a duplicate ID on the same page is (technically) invalid HTML and may make it difficult to select elements correctly. Just FYI.

Katstevens Over a year ago

Please mark an answer if your problem is solved, to help others with similar issues. Thanks

Si8 Over a year ago

SO is making me wait 7 minutes :/

Salathiel Genese · Accepted Answer · 2014-07-19 16:12:04Z

1

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

edited Jul 19, 2014 at 16:12

answered Jul 19, 2014 at 13:09

Salathiel Genese

1,9392 gold badges24 silver badges38 bronze badges

2 Comments

Si8 Over a year ago

Thank you. I was able to already complete with @Katstevens method.

Avery Over a year ago

Your code is fine, but please consider adding an explanation of what you changed/did so that future readers can use this question and answer to solve their own problems.

Collectives™ on Stack Overflow

How to populate textfields using JQuery

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related