jQuery .html method returns broken code after form submit

Question

I have the following HTML which I'm fetching via the DOM and inserting it into a hidden form in wordpress:

    <div class="main_class">
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-thumb">
                <img src="http://example.com/248916">
            </div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-thumb">
                <img src="http://example.com/248915">
            </div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-thumb">
                <img src="http://example.com/248917">
            </div>
        </div>
    </div>

I'm using the following code:

    $('body').on('click', function(){
        var temp = $('.main_class').html();
        $('myform').val(temp);
    });

The problem is after I submit the form and check out the actual form results, this is what I get:

    <div class="main_class">
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-thumb">
                <img>
            </div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-thumb">
                <img>
            </div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-thumb">
                <img>
            </div>
        </div>
    </div>

For some reason, the image src attributes aren't getting saved. I have tried a lot of different methods such as innerHTML, clone() and other methods but none seem to work in getting the image src attributes saved.

My question is, how can I get the image src attributes saved properly in this case.

Thanks

Answer 1

The most probable explanation to this activity is that your server-side softvare is escaping dangerous characters into html entities to prevent XSS attacks. If you only want ot get src attributes of images sent to server you can do so by using jQuery's .attr('src') on the $('.main_class img') object.