Procedural generation of javascript within php echo -

i have divs generating each called result database. within div able display specific dataset db populate it. have form trying submit js specific each called div , opens file processing form in div(this works standalone js not encased within php echo). assumed best process include js within echo result(the js works standalone). instead of submitting form , loading page in appropriate div(static div name), load main page date submitted string within url.

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

this js within echo statement(at beginning of 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 form portion of 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 way use js outside of php , having submit button activate js using appropriate php/form variables.

any appreciated!

~ leo

if i'm understanding right, , js functionality each element similar, there more efficient way of doing this.

it looks have <button> in every <form> has unique id. give these buttons common class (let's use .order-btn). now, instead of having event listener , function every id, make one, class instead. listener class can grab id $(this) variable, , can go there.

something 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 success in $.ajax() function triggered if request sent , response sent successfully. if pages/work.php page returned 200 , supplied user-generated error, success still called. if want based on user-generated error, have add code success callback function.