CODEWITHSUNDEEP
javascripthtmljqueryforms
twan
twan

Reputation: 2659

form.submit(); not working after form is 'refreshed' in DOM. Console says: Form submission canceled because the form is not connected

I have a couple of order lines that each contains a form. In the order line a user can change quantity of the product in that orderline or change some properties. Each time this happens, the form in that orderline gets refreshed with the updated information (on each action the data is sent to a PHP script with Ajax, this script returns the new data for the form and replaces the old one).

The problem is after any action, the form won't submit anymore, only on page load without performing any actions (so no changing quantity, changing properties etc).

My HTML example of 1 orderline:

<div class="productblock">
    <span class="refreshform" id="60534e379eb4d">
        <form class="editorform" action="https://pancake.a2test.com/print" method="post">
            <input
                type="hidden"
                name="json"
                value='{"customer_id":"33","order_id":"123","quantity":"5","rulers":null,"canvas_size":"600x1000","bleed":null,"safety_margin":null,"dpi":null,"multiple_layouts":null,"procheck":"y","multiple_pages":"1","product_name":"Textielframe","thumbnail":"https:\/\/website.nl\/new\/cms\/images\/producten\/textiel_producten\/textielwand\/1288_9936468fbe050be8_1.jpg","orderline":"60534e379eb4d"}'
            />
        </form>
    </span>
    <div class="productblockbottom">
        <span>
            <b>Hoe lever je jouw ontwerp aan?</b> <span class="tooltippy_nostyle" aria-expanded="false"><img class="infosvg" src="assets/images/custom/icon_info.svg" /></span>
        </span>
        <div class="productblockbtns">
            <a href="javascript:void(0);">
                <button class="btnstyle uploadbtn" type="button" name="button">Lever je bestanden aan <i class="icon-upload"></i></button>
            </a>
            <span>of</span>
            <a href="javascript:void(0);">
                <button class="btnstyle" type="button" name="button">Maak een ontwerp <i class="icon-design"></i></button>
            </a>
        </div>
    </div>
</div>

Then my jQuery:

$( ".uploadbtn" ).each(function() {
    var form = $(this).closest('.productblock').find('.editorform');
    $(this).click(function() {
        form.submit();
    });
});

I knew when anything new is added to the DOM, jQuery can only find it if you find a higher reference point that is not new, and from there find the newly added DOM element, so that is what I tried with this:

var form = $(this).closest('.productblock').find('.editorform');

productblock does not get refreshed. So why can't I submit my form?

In my console I get this error: Form submission canceled because the form is not connected.

I've tried appending the form to my body with javascript but I keep getting the same message.

Upvotes: 0

Views: 55

Answers (1)

Manh Nguyen
Manh Nguyen

Reputation: 563

Your JQuery code do not fire event on Newly element. Try the live event code:

$(document).on('click', '.uploadbtn', function(){
  var form = $(this).closest('.productblock').find('.editorform');
  form.submit();
});

Remember append your newly product to body before submit:

var newBlock = ...;
document.body.appendChild(newBlock);

Try the code below: 

var blockCount = 1;
function addBlock(){
  blockCount++;
  var block = document.querySelector(".productblock");
  var newBlock = block.cloneNode(true);
  newBlock.querySelector('.blockHeader').innerHTML = 'Block '+ blockCount;
  document.body.appendChild(newBlock);
}
$(document).on('click', '.uploadbtn', function(){
  var form = $(this).closest('.productblock').find('.editorform');
  //form.submit();
  console.log('submit');
});
.productblock{
            border: 1px solid red;
            border-radius: 10px;
            backgrond-color: lightgray;
            margin: 10px;
            padding: 5px;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <button onclick='addBlock()'>Click to add new block</button>
    <hr/>
    <div class="productblock">
        <span class='blockHeader'>Block 1</span>
        <hr/>
        <span class="refreshform" id="1">
            <form class="editorform" action="https://pancake.a2test.com/print" method="post">
                <input
                    type="hidden"
                    name="json"
                    value='{"customer_id":"33","order_id":"123","quantity":"5","rulers":null,"canvas_size":"600x1000","bleed":null,"safety_margin":null,"dpi":null,"multiple_layouts":null,"procheck":"y","multiple_pages":"1","product_name":"Textielframe","thumbnail":"https:\/\/website.nl\/new\/cms\/images\/producten\/textiel_producten\/textielwand\/1288_9936468fbe050be8_1.jpg","orderline":"60534e379eb4d"}'
                />
            </form>
        </span>
        <div class="productblockbottom">
            <span>
                <b>Hoe lever je jouw ontwerp aan?</b> <span class="tooltippy_nostyle" aria-expanded="false"><img class="infosvg" src="assets/images/custom/icon_info.svg" /></span>
            </span>
            <div class="productblockbtns">
                <a href="javascript:void(0);">
                    <button class="btnstyle uploadbtn" type="button" name="button">Upload<i class="icon-upload"></i></button>
                </a>
                <span>of</span>
                <a href="javascript:void(0);">
                    <button class="btnstyle" type="button" name="button">Blah Blah</button>
                </a>
            </div>
        </div>
    </div>
</body>

Upvotes: 1

Related Questions