Unable to submit form after copying from one place to another

Question

I'm shifting form #cart_form from right column to left column after a button is hit.

And the code for that is:

$('#left_col').html($('#cart_form').html());

But I cannot submit it. I wondered if the code above properly copied all tags, right from <form> to </form>

I checked if form element exists, like this:

if ($('form').length == 0) {
   alert("no");
}

And it doesn't alert 'no' meaning it exist. The markup for my form is,

<form action="#" method="POST" id="cart_form">
<table class='header_tbl' style="background:none !important;">
<thead>
    <tr>
        <th>Item Name</th>
        <th>Unit Price</th>
        <th>Qty</th>
        <th>Amount(RM)</th>
        <th></th>
    </tr>
</thead>
.........................
CONTENT APPENDED BY JQueRY
........................

This button initiates the submission:

<input type='submit' name='submit' id='receipt' onclick='print_me()' value='PRINT RECEIPT'/>

And this is how it submit if cart is not empty.

function print_me(){
     var ele = $(".header_tbl tbody tr").children().length;

     if(ele > 0)
     {
$("#cart_form").submit(function(){
                var data = {
                  "action": "test"
                };
                data = $(this).serialize() + "&" + $.param(data);
                $.ajax({
                  type: "POST",
                  dataType: "json",
                  url: "submit_cart.php",
                  data: data,
                  success: function(data) {
                 alert(data);
                   }
                  });
               });


}else
     {
       alert("Your cart is empty.");
     }
}

Moving elements this way you loose event handlers. Check this question and answer - http://stackoverflow.com/questions/10716986/swap-2-html-elements-and-preserve-event-listeners-on-them — Nikolay Ermakov, Jan 15 '16 at 04:41
He is not loosing his event handler because the onclick event is used directly on the button — Pierre-Luc Bolduc, Jan 15 '16 at 05:01
Agree. He is copying only inner html. That is why no form tag there. He should grab outer html: $('#cart_form')[0].outerHTML — Nikolay Ermakov, Jan 15 '16 at 05:10

Pierre-Luc Bolduc · Accepted Answer · 2016-01-15T05:57:54.480

1

$("#yourform").html() is copying what is inside your form tag without your form tag.

Try to put your form into a div

<div id="divID">
<form action="#" method="POST" id="cart_form">
<table class='header_tbl' style="background:none !important;">
<thead>
    <tr>
        <th>Item Name</th>
        <th>Unit Price</th>
        <th>Qty</th>
        <th>Amount(RM)</th>
        <th></th>
    </tr>
</thead>
</form>
</div>

and then do that :

$('#left_col').html( $("#divID").html() );

edited Jan 15 '16 at 05:57

answered Jan 15 '16 at 04:44

Pierre-Luc Bolduc

485
1
5
18

doesn't submit still – 112233 Jan 15 '16 at 04:50
Try to inspect your html code to see if the tag form is copied.. I think that when you do $("#yourform").html() it is copying what is inside your form tag – Pierre-Luc Bolduc Jan 15 '16 at 04:54
See this link : http://stackoverflow.com/questions/6459398/jquery-get-html-of-container-including-the-container-itself – Pierre-Luc Bolduc Jan 15 '16 at 04:56
I guess the same ..but how do I check if for tag exist? – 112233 Jan 15 '16 at 04:57
If you are on google chrome right click on your page et select the last option inspect element – Pierre-Luc Bolduc Jan 15 '16 at 04:58
as inspected, I found the
and
are missing. The markup starts and end with table. – 112233 Jan 15 '16 at 05:08
I understand that form is not coppied, I reffered to the links you provided to copy the parent() but doesn't work – 112233 Jan 15 '16 at 05:09
I think I'm doing it wrong way..var x = $('#cart_form')[0].outerHTML; $('#left_col').html(x); – 112233 Jan 15 '16 at 05:16
well it seam to be fine... or you could try to add your form into a div... and give an id to this div. `$("#yourdiv").html()` and then you would have your form. You will have `$('#left_col').html( $("#yourdiv").html() );` – Pierre-Luc Bolduc Jan 15 '16 at 05:18
still same, it doesn't shift anything to the new destination – 112233 Jan 15 '16 at 05:21
i have edited my last comment check it... does it works? – Pierre-Luc Bolduc Jan 15 '16 at 05:22
I tried it just now, exactly the same, but still I see blank in the new destination. I just wonder why! – 112233 Jan 15 '16 at 05:31
I did this alert($("#form_here").html()); and the entire form is displayed just that it doesn't moving to the new destination? – 112233 Jan 15 '16 at 05:33
can i see your left_col div – Pierre-Luc Bolduc Jan 15 '16 at 05:34
..content here...........
– 112233 Jan 15 '16 at 05:36
I tried this too: $('#left_col .container').html( $("#form_here").html() ); – 112233 Jan 15 '16 at 05:38
well i don't know sorry .. if you try to add all your form to this div in your code does everything is shown fine? – Pierre-Luc Bolduc Jan 15 '16 at 05:40
i got it working, I added

in the left_col and shifted the div into this , and can submit now – 112233 Jan 15 '16 at 05:55

score 1 · Answer 2 · answered Jan 15 '16 at 05:15

1

Try $('#left_col').html( $('#cart_form')[0].outerHTML )

answered Jan 15 '16 at 05:15

Nikolay Ermakov

5,031
2
11
18

doesn't append to the new destination – 112233 Jan 15 '16 at 05:17
Are you sure you have that form on the page before moving it to the left? Can you run the `if ($('#cart_form').length == 0) {` check before move? – Nikolay Ermakov Jan 15 '16 at 05:24
yes I have the form element, ran the ($('form').length == 0) { – 112233 Jan 15 '16 at 05:27

Unable to submit form after copying from one place to another

2 Answers2