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:

    &lt;div class="main_class"&gt;
        &lt;div class="itemRow row-0 odd" id="cartItem_SCI-1"&gt;
            &lt;div class="item-thumb"&gt;
                &lt;img&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="itemRow row-0 odd" id="cartItem_SCI-1"&gt;
            &lt;div class="item-thumb"&gt;
                &lt;img&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="itemRow row-0 odd" id="cartItem_SCI-1"&gt;
            &lt;div class="item-thumb"&gt;
                &lt;img&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

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

What type of element is `$('myform')` supposed to be selecting? — Rory McCrossan, Jul 24 '14 at 14:02
Is `myForm` the id? I think what @RoryMcCrossan was getting at is that currently as it stands your traversing the DOM for a `myForm` element like you would a `div` or `span`. The difference is there's no such element... — War10ck, Jul 24 '14 at 14:06
@War10ck No the issue isn't really the myForm element. It's just an example of my form field. Currently I can successfully insert the fetched HTML elements into the field no problem, it's just that for some reason the img src attributes get stripped out — user2028856, Jul 24 '14 at 14:08
Any particular reason why you are posting the entire markup and not just the data? — jjjjjjjjjjjjjjjjjjjj, Jul 24 '14 at 14:10
Unable to reproduce -> http://jsfiddle.net/warlock5658/K5Ly2/ — War10ck, Jul 24 '14 at 14:11
@JanneKlouman Sorry but what do you mean by "just the data" ? — user2028856, Jul 24 '14 at 14:11
encoding type of Page. There are two selection. With BOM or without BOM. Choose utf8 without BOM. You can do it by notepad++ — budamivardi, Jul 24 '14 at 14:14
Well I might have misunderstood the entire scenario. Where are you posting this form, and what is the form result being used for? — jjjjjjjjjjjjjjjjjjjj, Jul 24 '14 at 14:14
In reference to the comment by @budamivardi above -> http://stackoverflow.com/questions/2223882/whats-different-between-utf-8-and-utf-8-without-bom — War10ck, Jul 24 '14 at 14:15

score 2 · Accepted Answer · edited Jun 19 '16 at 18:00

2

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.

edited Jun 19 '16 at 18:00

marc_s

732,580
175
1,330
1,459

answered Jul 24 '14 at 14:16

Vlas Bashynskyi

1,886
2
16
25

I see. Well my situation is that I can't only get the src attribute because I also need the complete HTML elements to be output at a later stage – user2028856 Jul 24 '14 at 14:17

jQuery .html method returns broken code after form submit

1 Answers1