Dynamically generated form

Question

I have simple Database, which contains fields like ID, product_name, product_description, image, cost.

I have a dynamically generated form which I'm going to send using jQuery, what should I change in my JavaScript to pass to defined div the data which I got from my DB via PHP?

JavaScript Code:

$(function() {
    var number = 1;
    var contentToLoad = 'Defined structure';

    $('a.add').click(function(e) {
        e.preventDefault();
        $('#calc').append(contentToLoad);
        number++;
    });
    $('#calc').on('click', 'a.design_button', function(e) {
        e.preventDefault();
        $(this).parent().remove();
    });
});

--- UPDATE: I need a little help with merging two parts of JavaScripts to make it work. I need to put somehow that part:

var number = 1;
var contentToLoad = 'Defined structure';

$('a.add').click(function(e) {
  e.preventDefault();
  $('#calc').append(contentToLoad);
  number++;
});

where a.add i've replaced with submit button, inside this one

function add(data_array){
    $(document).on('submit', '#add', function()
    {
    var r_data = data_array;
    alert(r_data);
    ...
    });
}

but I can't make it work ;/

Possible duplicate of [Passing data from php to Jquery](https://stackoverflow.com/questions/7776236/passing-data-from-php-to-jquery) — Dshiz, Apr 06 '18 at 21:50

score 0 · Accepted Answer · answered Apr 08 '18 at 15:15

I've menaged to do sth like that:

function mini(data_array){
    var number = 1;
    var r_arr = data_array;

    $(this).on('submit', function(e) {
        e.preventDefault();
        var contentToLoad = '<div id="item-'+ number +'" class="item row"> '+ number +' '+r_arr+' Defined structure </div>';
        $('#calc').append(contentToLoad);
        number++;
    });

}

But now I have a problem with making it work correctly, because it adds me the correct div + all divs which was previously added.

Let's just say that I have blank site and I want to add two divs, so I click twice on the button and it should add me two divs, but it adds after 1st click div with id = 1 and after 2nd click div with id = 2 + div with id=1, So in effect I have three divs after two clicks.

Where in code placed above I've made mistake ?

Dynamically generated form

1 Answers1