Procedural generation of javascript within php echo

Question

I have divs generating for each called result from a database. within that div I am able to display the specific dataset from the db to populate it. Now I have a form that I am trying submit with js that is specific to each called div and opens the file for processing the form in another div(this works as a standalone but the js is not encased within a php echo). I originally assumed the best process was to simply include the js within the echo result(the js also works as a standalone). Instead of submitting the form and loading the page in the appropriate div(static div name), it will load the main page with the date submitted as a string within the url.

http://localhost/3/?item-id=6&onhand=4#

This is the js within the echo statement(at the beginning of the echo)

<script>   
    $(document).ready(function() {//start document ready
        $('#b_" . $row['id'] . "').click(function (e){
                e.preventDefault();

            $.ajax({
                type: 'POST',
                url: 'pages/work.php',
                data: $('#f_" . $row['id'] . "').serialize(),
                success: function(d){
                   $('#notice').html(d);
                }
            });
        });
    });//end document ready
</script>

Here is the form portion of the echo

<form id=\"f_" . $row['id'] . "\">   

    <input type=\"hidden\" name=\"item-id\"  id=\"item-id\" value=\"" . $row['id'] . "\">

    <select name=\"onhand\" class=\"onhand\" id=\"onhand\ >
        <option value=\"0\">0</option>
        <option value=\"1\">1</option>
        <option value=\"2\">2</option>
        <option value=\"3\">3</option>
        <option value=\"4\">4</option>
        <option value=\"5\">5</option>
        <option value=\"6\">6</option>
        <option value=\"7\">7</option>
        <option value=\"8\">8</option>
        <option value=\"9\">9</option>
        <option value=\"10\">10</option>
    </select>

     <button id=\"b_" . $row['id'] . "n\">Order " . $row['item'] . "</button>

</form>

I believe there is a most likely a way to use the js outside of the php and having the submit button activate the js using the appropriate php/form variables.

Any help would be much appreciated!

~ Leo

question: you are familiar with the separation of PHP as a fully server side, and JS as fully client side technology, right? Your PHP generates "the stuff the browser will load in", and the JS executes "after the browser loaded that in". Making PHP generate JS calls makes pretty much zero sense: instead have the PHP generate your static, single, JS call to something like `startup()` and then write your JS inside that function to find all your DOM elements and do what is necessary — Mike 'Pomax' Kamermans, May 11 '15 at 23:57
possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — EternalHour, May 11 '15 at 23:59
You have to edit your question again to show the exact string value that you tried to print it using echo. — SaidbakR, May 12 '15 at 00:02

score 1 · Answer 1 · answered May 12 '15 at 00:23

If I'm understanding you right, and the JS functionality for each element is similar, then there is a much more efficient way of doing this.

It looks like you have a <button> in every <form> that has a unique id. Give all these buttons a common class (let's use .order-btn). Now, instead of having an event listener and function for every id, you make just one, but for the class instead. The listener for the class can just grab the id from the $(this) variable, and you can go from there.

Something like this:

$('.order-btn').click(function (e){
    e.preventDefault();
    var id = $(this).attr('id');

    $.ajax({
        type: 'POST',
        url: 'pages/work.php',
        data: $('#'+id).serialize(),
        success: function(d){
           $('#notice').html(d);
        }
    });
});

Also, remember that success in the $.ajax() function is triggered if the request was sent and a response was sent back successfully. If your pages/work.php page returned 200 and supplied user-generated error, success will still get called. If you want to do something based on this user-generated error, you will have to add some code to the success callback function.

Procedural generation of javascript within php echo

1 Answers1