When do jQuery submit functions link themselves to HTML forms? -
i have several forms in html page submission facilitated jquery functions. work well. however, having issues forms dynamically created. rather being submitted via jquery, being posted current html page.
for instance, have table dynamically created php. table can updated enclosed in form.
here's code generating table:
//display table echo "<form id=\"updateusers\" method=\"post\">"; echo "<table> <thead> <tr> <th>user id </th> <th>first name</th> <th>last name</th> <th>current publisher</th> <th>user priveleges</th> </tr> </thead> <tbody> <tr>"; foreach($publishers $row) foreach($row $col) { $i++; switch ($i) { case 4: //is current publisher? if($col == 0) echo "<td><input type=\"checkbox\" class=\"current\" name=\"userstate[$row[0]]\" value=\"1\" ></td>\n"; else echo "<td><input type=\"checkbox\" class=\"current\" name=\"userstate[$row[0]]\" value=\"1\" checked> </td>\n"; break; case 5: //do have user priveleges? if($col == 0) echo "<td>no</td>\n"; else echo "<td>yes</td>\n"; echo "</tr><tr>"; //start new row $i=0; //reset counter break; default: echo "<td>$col</td>\n"; } } echo "</tr></tbody></table>"; echo "<button type=\"submit\">update</ button>"; echo "</form>"; } the form id updateusers.
this jquery code:
$(document).ready(function () { $('#updateusers').submit(function (e) { e.preventdefault(); $('#results').contents().remove(); //make sure checkboxes submitted var cb = this.getelementsbytagname('input'); //get inputs for(var i=0;i<cb.length;i++){ if(cb[i].type=='checkbox' && !cb[i].checked) // if unchecked checkbox { cb[i].value = 0; // set value "off" cb[i].checked = true; // make sure submits } } var formdata = $(this).serialize(); $("input").prop("disabled", true); request = $.post('vrc_publishersprocess.php', formdata, resultsmessage); request.fail(function() { $('#results').append("<span id=\"reply\">updating failed unknown reason. please try again in few minutes.</ span>"); $("input").prop("disabled", false); }); function resultsmessage(data) { $('#results').append(data); $("input").prop("disabled", false); } }); }); this jquery function has been used in past, should valid , functioning code; doubt source of problem.
my suspicion browser loads processing , "linking" jquery , html code. once new form dynamically shows up, browser doesn't know there jquery function handles submission request.
if case, how can modify current code behave in proper manner. is, allow jquery handle post request.
any input appreciated.
this mean dynamically created:
(1) user makes request on current html page:
<div id="pub1"> <a href="#" class="drop" id="one">other</a> <div id="displayselect"> <form id="select1" method="post"> <input type="hidden" name="all" value="1" /> <input type="submit" name="all" value="all publishers" /> </form> <form id="select2" method="post"> <input type="hidden" name="current" value="1" /> <input type="submit" name="current" value="current publishers" /> </form> <form id="select3" method="post"> <input type="hidden" name="users" value="1" /> <input type="submit" name="users" value="user priveleges" /> </form> </div> </div> (2) request handled jquery - sends post request php page, generate table (this 1 of 3 identical jquery functions):
$(document).ready(function () { $('#select3').submit(function (e) { e.preventdefault(); $('#results').contents().remove(); var formdata = $(this).serialize(); $("input").prop("disabled", true); request = $.post('vrc_publishersprocess.php', formdata, resultsmessage); request.fail(function() { $('#results').append("<span id=\"reply\">your search failed unknown reason. please try again in few minutes.</ span>"); $("input").prop("disabled", false); }); function resultsmessage(data) { $('#results').append(data); $("input").prop("disabled", false); } }); }); (3) note above jquery function handles server feedback. displays feedback in div id of results.
the first script
$(document).ready(function () { $(document).on('submit','#updateusers',function (e) { // delegated event fixed els! e.preventdefault(); $('#results').contents().remove(); //make sure checkboxes submitted var cb = this.getelementsbytagname('input'); //get inputs for(var i=0;i<cb.length;i++){ if(cb[i].type=='checkbox' && !cb[i].checked) // if unchecked checkbox { cb[i].value = 0; // set value "off" cb[i].checked = true; // make sure submits } } var formdata = $(this).serialize(); $("input").prop("disabled", true); request = $.post('vrc_publishersprocess.php', formdata, resultsmessage); request.fail(function() { $('#results').append("<span id=\"reply\">updating failed unknown reason. please try again in few minutes.</ span>"); $("input").prop("disabled", false); }); function resultsmessage(data) { $('#results').append(data); $("input").prop("disabled", false); } }); }); it looks need delegate event since form being created dynamically. try .on('submit', function(e) , see if works.
Comments
Post a Comment