Getting html form via jQuery

Question

I am trying to get form from jQuery, and could not find a solution. I have tried some examples but they don't show me the form tags and its attributes.

Here is a sample fiddle

I have three forms on my page and I wants to take the second form .WHen i use this code it shows me the first form data.Can you please tell me the solutions for getting second form on my page and also the form element.

I want to get this form from jQuery, and I have used this code but this code gives me the element from form not the form tag .

$(document).ready(function() 
{
    $('a').on('click', function() {
        alert($('form').html());
    });
});

The Form is

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="1142" data-product_variations="[{&quot;variation_id&quot;:&quot;1153&quot;,&quot;attributes&quot;:[],&quot;image_src&quot;:&quot;http:\/\/maza-it.net\/tilde\/wp-content\/uploads\/2013\/10\/H07-300x300.jpg&quot;,&quot;image_link&quot;:&quot;http:\/\/maza-it.net\/tilde\/wp-content\/uploads\/2013\/10\/H07.jpg&quot;,&quot;image_title&quot;:&quot;H07&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;&lt;span class=\&quot;price\&quot;&gt;&lt;span class=\&quot;amount\&quot;&gt;$26&lt;\/span&gt;&lt;\/span&gt;&quot;,&quot;availability_html&quot;:&quot;&lt;p class=\&quot;stock \&quot;&gt;19 in stock&lt;\/p&gt;&quot;,&quot;sku&quot;:&quot;555&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;19&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;image_magnifier&quot;:&quot;http:\/\/maza-it.net\/tilde\/wp-content\/uploads\/2013\/10\/H07-600x600.jpg&quot;},{&quot;variation_id&quot;:&quot;1154&quot;,&quot;attributes&quot;:[],&quot;image_src&quot;:&quot;http:\/\/maza-it.net\/tilde\/wp-content\/uploads\/2013\/10\/S05-300x300.jpg&quot;,&quot;image_link&quot;:&quot;http:\/\/maza-it.net\/tilde\/wp-content\/uploads\/2013\/10\/S05.jpg&quot;,&quot;image_title&quot;:&quot;S05&quot;,&quot;image_alt&quot;:&quot;&quot;,&quot;price_html&quot;:&quot;&lt;span class=\&quot;price\&quot;&gt;&lt;span class=\&quot;amount\&quot;&gt;$100&lt;\/span&gt;&lt;\/span&gt;&quot;,&quot;availability_html&quot;:&quot;&lt;p class=\&quot;stock \&quot;&gt;9 in stock&lt;\/p&gt;&quot;,&quot;sku&quot;:&quot;60&quot;,&quot;weight&quot;:&quot; kg&quot;,&quot;dimensions&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;max_qty&quot;:&quot;9&quot;,&quot;backorders_allowed&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_downloadable&quot;:false,&quot;is_virtual&quot;:false,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;image_magnifier&quot;:&quot;http:\/\/maza-it.net\/tilde\/wp-content\/uploads\/2013\/10\/S05-600x600.jpg&quot;}]">
    <table class="variations" cellspacing="0">
        <tbody>
                    </tbody>
    </table>

    <div class="single_variation_wrap" style="display:none;">
        <div class="single_variation"></div>
        <div class="variations_button">
            <input type="hidden" name="variation_id" value="">
            <div class="quantity buttons_added" style="display: none;"><input type="button" value="-" class="minus"><input type="number" step="1" name="quantity" value="1" title="Qty" class="input-text qty text"><input type="button" value="+" class="plus"></div>
            <button type="submit" class="single_add_to_cart_button button alt">Select Product</button>
        </div>
    </div>
    <div>
        <input type="hidden" name="add-to-cart" value="1142">
        <input type="hidden" name="product_id" value="1142">
    </div>

</form>

possible duplicate of [Get selected element's outer HTML](http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) — ahren, Nov 24 '13 at 15:31

plalx · Accepted Answer · 2013-11-24T16:19:49.483

2

I believe this is what you are looking for:

alert($('form')[0].outerHTML);

Your FIDDLE

Getting the second form:

$('form:eq(1)');

It would be better to give the form a unique id instead.

edited Nov 24 '13 at 16:19

answered Nov 24 '13 at 15:30

plalx

42,889
6
74
90

I have three forms on my page and I wants to take the second form .WHen i use this code it shows me the first form.Can you please tell me the solutions for getting second form on my page. – hassaan shuja Nov 24 '13 at 16:01

score 0 · Answer 2 · answered Nov 24 '13 at 15:40

0

You could wrap it in a div, jump up a level to the wrapping div and get the contents of that:

$('form').wrap('<div/>').parent().html()

answered Nov 24 '13 at 15:40

Mattias

451
3
13

Getting html form via jQuery

2 Answers2