-1

So what I want to do is add items that will have a dynamic component to them on click. My problem is that the item I am talking about is php code. My code, as seen below, is not working, and I have no idea how to fix it. If I just have an html element to append, it will work, this one however does not. I am not great with jQuery and thus need help.

This is my code : 

<div id="main" style="text-align: center;">
    <input type="button" id="btAdd" value="Add Element" class="bt" />
    <input type="button" id="btRemove" value="Remove Element" class="bt" />
    <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
</div>

And this is my jQuery:

var iCnt = 0;

    var container = $('.equip-ops');

    $('#btAdd').click(function() {
        if (iCnt <= 19) {

            iCnt = iCnt + 1;

            // ADD ITEM.
            $(container).append('<label>Selecteaza Operatiune<select name="eq_1_op_' + iCnt + '"><?php foreach ($operations_' + iCnt + '->fetchAll() as $operation) : ?><option value="<?php echo $operation['oname']; ?>"><?php echo $operation['oname']; ?></option><?php endforeach; ?></select></label>
            ');

            // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
            if (iCnt == 1) {

                var divSubmit = $(document.createElement('div'));
                $(divSubmit).append('<input type=button class="bt" onclick="GetTextValue()"' + 'id=btSubmit value=Submit />');

            }

            // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
            $('#main').after(container, divSubmit);
        }
        // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
        // (20 IS THE LIMIT WE HAVE SET)
        else {      

            $(container).append('<label>Reached the limit</label>'); 
            $('#btAdd').attr('class', 'bt-disable'); 
            $('#btAdd').attr('disabled', 'disabled');

        }
    });

    $('#btRemove').click(function() {   // REMOVE ELEMENTS ONE PER CLICK.
        if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

        if (iCnt == 0) { $(container).empty(); 

            $(container).remove(); 
            $('#btSubmit').remove(); 
            $('#btAdd').removeAttr('disabled'); 
            $('#btAdd').attr('class', 'bt') 

        }
    });

    $('#btRemoveAll').click(function() {    // REMOVE ALL THE ELEMENTS IN THE CONTAINER.

        $(container).empty(); 
        $(container).remove(); 
        $('#btSubmit').remove(); iCnt = 0; 
        $('#btAdd').removeAttr('disabled'); 
        $('#btAdd').attr('class', 'bt');

    });
});
Cristian N
  • 69
  • 1
  • 8
  • 1
    Learn how PHP and JS/jQuery works, this, is not it. PHP will always load AND execute before the JS/jQuery is loaded, you should look into AJAX. – Epodax Sep 17 '15 at 07:58
  • Yeah, I can give you some quick tips. If your jQuery code looks so big, you can already know, that something is wrong. Also in JS, you cannot linebreak a string. So **line 12** you already are causing a critical error, and the script is terminated. Download BugZilla or use the built-in console to see, what is actually going on. Also Google what `console.log('I'm a message');` does. – Kalle H. Väravas Sep 17 '15 at 08:16
  • @Epodax I did no think of it that way. So I need to try ajax, you say. Well, I will give it a shot. – Cristian N Sep 17 '15 at 08:22
  • @KalleH.Väravas the code runs fine with just html in the input, I am having problems with the php, I think it may be as Epodax said above – Cristian N Sep 17 '15 at 08:27
  • 1
    PHP is server side while JS/jQuery is client side. This means that php will evaluate and execute it's code before js/jQuery is loaded. Once php is "done" the js/jQuery part will be able to execute. Meaning that you can't load Js/jQuery values into php like this. One way to achieve something like this is to use AJAX. – Epodax Sep 17 '15 at 08:30

1 Answers1

0

Ok, this code has some critical issues, that are just plain wrong.

  1. If this code, is inside of <script></script> in your PHP file, then it might work, with mixing PHP and JS together. If its inside of a .js file, it will never work. JS is a frontend language and PHP is backend language.
  2. Read and learn about AJAX: $.ajax() and $.getJSON(). Thats the method, for getting your PHP and JS work together.
  3. Foreaching your <select> with PHP, might be ok, if you generate a template, but for JS use not. Inject your select-options data as an array and let JS parse it into HTML and then .append().
  4. All those removes and empties at the bottom are overkill. If you want everything to be removed from #main, then simply: $('#main').empty();

I am going to leave it at this point.

Here are some resources, where to start:
jQuery.ajax()
Programmatically create select list
jQuery.getJSON()
Getting jquery and php work together with forms? (this has forms, ajax, php)

Community
  • 1
  • 1
Kalle H. Väravas
  • 3,579
  • 4
  • 30
  • 47
  • I really, honestly tried to make some code, based from above. But the problem is more general in improper programming. So my answer, doesn't directly help with your specific code. But might guide you towards solving the bigger picture here. – Kalle H. Väravas Sep 17 '15 at 08:37
  • I decided I will discard this code and try something with AJAX. And to my defense, I am still a beginner in the programming space, I did things like this because that is how I thought it could be done at the moment. Now I know better – Cristian N Sep 17 '15 at 08:41
  • @Kaladan You don't have to defend yourself. It was obvious. Sadly, in this place you will get hammered, never the less. I added some resource links to the answer. They might seem, like complicated at first, but study them. Also, google simple examples, with minimal code, to really show the core-functions, that actually do the job. But the best idea, is to find some simple, but good scripts, where to learn all the basics. Be sure, to check these sites out: tizag.com, w3schools.com. – Kalle H. Väravas Sep 17 '15 at 08:50