Form submission canceled because the form is not connected when insert trough .html()

Question

I know this post: Getting Error "Form submission canceled because the form is not connected" I didn't find a solution in that post that is the reason why I ask.

I am getting this error:

Form submission canceled because the form is not connected

That is my function that insert my form in my HTML:

var getToKnowIfCoinWasDelistedOrNotKRAKEN = function () {
var $resultaatString = "<div><form id='changeExchangeForViewing'>";
$resultaatString += "<label for='choiceExchangeForLoading'>Change the exchange</label><div class='form-inline'>";
$resultaatString += "<select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>";
$resultaatString += "<option value='Poloniex'>Poloniex</option>";
$resultaatString += "<option value='Bittrex'>Bittrex</option>";
$resultaatString += "<option value='Kraken' selected>Kraken</option>";
$resultaatString += "<option value='Bitfinex'>Bitfinex</option></select>";
$resultaatString += "<input type='submit' class='btn btn-coinchecker pull-right' value='Change' id='changeRequest'/></div></form>";
$resultaatString += "<div id='exchangeName' data-val='Kraken'>";
for (var f = 0; f < KRAKEN_ARRAY.length; f++) {
    if (KRAKEN_ARRAY[f][0] === 'Ethereum Classic'){
        $resultaatString += "<div class=\"row\" id='etc'>";
    }
    else {
        $resultaatString += "<div class=\"row\" id='" + KRAKEN_ARRAY[f][0] + "'>";
    }
    $resultaatString += "<div class=\"col-xs-6\">";
    $resultaatString += "<div class=\"media-left\"><img class='media-object' src='assets/media/" + KRAKEN_ARRAY[f][0] + ".png'></div>";
    $resultaatString += "<div class=\"media-body\"><h3 class='media-heading'>" + KRAKEN_ARRAY[f][0] + "</h3>";
    $resultaatString += "<p></p></div>";
    $resultaatString += "<div class='media-right'><h4 class='media-heading'><button class='btn btn-coinchecker' id='" +KRAKEN_ARRAY[f][0] + "'>Get data</button></h4><p></p></div></div></div>"
}
$resultaatString += "</div></div>";
$("#all-available-coins-for-to-check-out").html($resultaatString);
loadNewFonts();
};

But I have almost the same function on the same page when you click by example Poloniex or Bittrex and submit it will ask first data from an api and then excute this function:

var getToKnowIfCoinWasDelistedOrNotBITTREX = function (allCoinData, priceData, nationalCurrency) {
var $resultaatString = "<div><form id='changeExchangeForViewing'>";
$resultaatString += "<label for='choiceExchangeForLoading'>Change the exchange</label><div class='form-inline'>";
$resultaatString += "<select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>";
$resultaatString += "<option value='Poloniex'>Poloniex</option>";
$resultaatString += "<option value='Bittrex' selected>Bittrex</option>";
$resultaatString += "<option value='Kraken'>Kraken</option>";
$resultaatString += "<option value='Bitfinex'>Bitfinex</option></select>";
$resultaatString += "<input type='submit' class='btn btn-coinchecker pull-right' value='Change' id='changeRequest'/></div></form>";
$.each(priceData.result, function (index, item) {
    $.each(allCoinData.result, function (allCoinIndex, allCoinItem) {
        if (allCoinItem.Currency == item.MarketName.substr(4) && item.MarketName.substr(0, 4) == 'BTC-') {
            var price = item.Last;
            $resultaatString += "<div class=\"row\">";
            $resultaatString += "<div class=\"col-xs-6\">";
            $resultaatString += getTheRightName(allCoinItem.CurrencyLong);
            $resultaatString += "<div class=\"media-body\"><h3 class='media-heading'>" + allCoinItem.CurrencyLong + "</h3>";
            $resultaatString += "<p>" + price.toFixed(8) + " BTC</p></div>";
            var perentage = (((price / item.PrevDay) - 1 ) * 100);
            if (perentage < 0) {
                $resultaatString += "<div class='media-right'><h4 class='media-heading red'>" + perentage.toFixed(2) + " %</h4><p>" + (waardeBitcoin * price).toFixed(3) + " " + nationalCurrency + "</p></div></div></div>"
            }
            else {
                $resultaatString += "<div class='media-right'><h4 class='media-heading green'>" + perentage.toFixed(2) + " %</h4><p>" + (waardeBitcoin * price).toFixed(3) + " " + nationalCurrency + "</p></div></div></div>"
            }
        }
    });

});
$resultaatString += "</div>";
$("#all-available-coins-for-to-check-out").html($resultaatString);
loadNewFonts();
};

Like you see it's the same form but just some other data in it and I don't get that error when the Bittrex function has been excuted.

refer https://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-is-not-connected — Shubham Srivastava, Jul 05 '17 at 14:17
You can't just save your string to the DOM... use insertAdjacentHTML https://developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML — Angels, Jul 05 '17 at 14:28
@VIPER I think you have read my question can you explain me then why I don't get the error when I excuted function getToKnowIfCoinWasDelistedOrNotBITTREX but when I excuted function getToKnowIfCoinWasDelistedOrNotKRAKEN I get an error. — Steven, Jul 05 '17 at 14:29
@Angels thanks but why does it work for function getToKnowIfCoinWasDelistedOrNotBITTREX . And for function getToKnowIfCoinWasDelistedOrNotKRAKEN not ? — Steven, Jul 05 '17 at 14:31
@Steven hard to tell, maybe you are trying to execute it after the other one, the forms have the same id, which is dangerous. — Angels, Jul 05 '17 at 14:33
@Angels Okey thanks for your answer It's not possible to excute them after each other. You only excute them when you press the button ChangeRequest. The reason why they have the same ID is because the form is loaded on the same page. What mean's their is only one excuted and one showed. If press the button you will overwrite it. — Steven, Jul 05 '17 at 14:39

Form submission canceled because the form is not connected when insert trough .html()

0 Answers0