Setting the value of an input within an html string returned via ajax

Question

I was wondering if there was a way to set the value of an input (returned via an ajax call) before appending it to the document.

 $(function () {
    $("#addItem").click(function () {
        var numRows = $('.row').length;
        $.ajax({
            url: this.href,
            cache: false,
            success: function (html) {
                // find input id in html that contains Order ?
                // set value of the input to numRows + 1 ?

                // append updated html to an element called #rows
                $("#rows").append(html);
            }
        });
        return false;
    });

Thanks for any help

Here's what the html might look like

<div class="row">
<input type="hidden" name="OfficialAddresses.index" autocomplete="off" value="1cffe209-44e1-44ca-a013-a808bff8a174">
        <fieldset>
            <legend>Address</legend>  
            <div class="editor-field">
                <input class="text-box single-line" id="OfficialOfficialAddresses_1cffe209-44e1-44ca-a013-a808bff8a174__Order" name="OfficialOfficialAddresses[1cffe209-44e1-44ca-a013-a808bff8a174].Order" type="text" value="0">

            </div>
            <div class="clear">&amp;nsbp;</div>
            <a href="#" class="deleteRow">delete</a>
            <div class="clear">&amp;nsbp;</div>
        </fieldset>
</div>

Give us a sample of the returned html so we can give you an answer. — Shef
– Shef, Commented Jun 15, 2011 at 15:41
BTW, if the ID always ends with Order you can use the jQuery attribute-ends-width-selector. $html.find('input[id$=Order]') — Matt Ball
– Matt Ball, Commented Jun 15, 2011 at 16:00

Matt Ball · Accepted Answer · 2011-06-15 15:41:56Z

3

Assuming the input's ID is Order:

success: function (html) {
    var $html = $(html);

    $html
        .find('#Order')        // find input id in html that contains Order
        .val(numRows + 1);     // set value of the input to numRows + 1

     // append updated html to an element called #rows
    $("#rows").append($html);
}

If you really mean that the input's ID only contains order, use a fancier selector:

$html.find('input[id*=Order]').val(numRows + 1);

answered Jun 15, 2011 at 15:41

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

Comments

Russ Cam · Accepted Answer · 2011-06-15 15:42:49Z

1

yes there is. If you put the returned content into a jQuery object, then you can perform selections on elements contained within and set the value.

e.g.

  $.ajax({
            url: this.href,
            cache: false,
            success: function (html) {

                var htmlToAppend = $(html);

                // do your searching and value setting here

                // append updated html to an elemen called #rows
                $("#rows").append(html);
            }
        });

answered Jun 15, 2011 at 15:42

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Comments

Shef · Accepted Answer · 2011-06-15 15:46:14Z

1

$(function () {
    $("#addItem").click(function () {
        var numRows = $('.row').length;
        $.ajax({
            url: this.href,
            cache: false,
            success: function (html) {
                $('#Order', html).val(numRows+1);

                // append updated html to an elemen called #rows
                $("#rows").append(html);
            }
        });
        return false;
    });
});

answered Jun 15, 2011 at 15:46

Shef

45.6k15 gold badges82 silver badges91 bronze badges

Comments

ArtoAle · Accepted Answer · 2011-06-15 15:42:35Z

0

whell, a workaround could be to insert the new html in a hidden div, then find the "order ?" input and set the value to wathever you want

answered Jun 15, 2011 at 15:42

ArtoAle

2,9872 gold badges27 silver badges50 bronze badges

Collectives™ on Stack Overflow

Setting the value of an input within an html string returned via ajax

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related