ajax - onclick calling object working ONLY in Firefox -
as stated in title, can onclick calling object in firefox: not in chrome, not in ie, not in safari.
i pretty new ajax , javascript in general, built code around answers guys gave here.
i have html page number of 'products': each 1 of them, have form hidden fields contain information product. every form has 2 (submit) buttons: 1 'add' product shopping cart, other take 'off' of it. want identify button gets clicked in order identify product refers , add or cancel cart list.
here html code page:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> test </title> <meta charset="utf-8"> <script src="form_submit.js" type="text/javascript"> </script> </head> <body> <form id="ajax_1" name="ajax_form" method="post" action="test.php"> <fieldset> <legend>my form</legend> <label for="stnz">stnz</label><br /> <input type="hidden" name="stnz" id="stnz" value="1" /><br /> <label for="opz">opz</label><br /> <input type="hidden" name="opz" id="opz" value="1" /><br /> <button id="ajax_1" type="submit" name="on">on</button> <button id="ajax_1" type="submit" name="off">off</button><br /> </fieldset> </form> <form id="ajax_2" method="post" action="test.php"> <fieldset> <legend>my form</legend> <label for="stnz">stnz</label><br /> <input type="hidden" name="stnz" id="stnz" value="1" /><br /> <label for="opz">opz</label><br /> <input type="hidden" name="opz" id="opz" value="2" /><br /> <button id="ajax_2" type="submit" name="on">on</button> <button id="ajax_2" type="submit" name="off">off</button><br /> </fieldset> </form> <form id="ajax_3" method="post" action="test.php"> <fieldset> <legend>my form</legend> <label for="stnz">stnz</label><br /> <input type="hidden" name="stnz" id="stnz" value="1" /><br /> <label for="opz">opz</label><br /> <input type="hidden" name="opz" id="opz" value="3" /><br /> <button id="ajax_3" type="submit" name="on">on</button> <button id="ajax_3" type="submit" name="off">off</button><br /> </fieldset> </form> <div id="responsearea"> </div> </body> </html> this script code:
window.onload = checkbutton; var xhr = false; var on; var stnz; var opz; var url; function checkbutton() { var el = document.getelementsbytagname('button'); for(var i=0; i<el.length; i++){ el[i].onclick = function (e) { // capturing event e = e || window.event; var targ = e.target || e.srcelement; on = (targ.name == 'on') ? true: false; var form = document.getelementbyid(targ.id); url = form.action; stnz = form.stnz.value; opz = form.opz.value; makerequest(); return false; }; } } function makerequest(){ if (window.xmlhttprequest) { xhr = new xmlhttprequest(); }else { if (window.activexobject) { try { xhr = new activexobject("microsoft.xmlhttp"); } catch (e) { } } } if (xhr){ var data = "stnz=" + stnz + "&opz=" + opz + "&act="; if(on){ data = data + "1"; } else { data = data + "0"; } xhr.onreadystatechange = showcontents; xhr.open("post", url, true); xhr.setrequestheader("content-type", "application/x-www-form-urlencoded"); xhr.setrequestheader("content-length", data.length); xhr.setrequestheader("connection", "close"); xhr.send(data); } } function showcontents(){ if(xhr.readystate == 4 && xhr.status == 200) { var return_data = xhr.responsetext; console.log(return_data); } else { var return_data = "sorry, couldn't create xmlhttprequest"; console.log(return_data); } /*document.getelementbyid("responsearea").innerhtml = return_data;*/ } the test.php file just:
<?php if (isset($_post['stnz'],$_post['opz'],$_post['act'])){ $stnz= $_post['stnz']; $opz = $_post['opz']; $act = $_post['act']; echo "stnz: " . $stnz . ", opz: " . $opz . ", azt: " . $act; } ?> please, me fixit thing chrome, ie , safari.... also, there better way same functionality? (maybe not using forms?) lot!
each browser has own event handling method , use library jquery able handle browsers .
$(el[i]).click(function(e){}); using jquery isn't solution can optimize code every browser adding browser specific codes recipe disaster.same goes ajax request(cross browser problems).
jquery designed browsers in mind , write 1 code , jquery handles browser specific stuff .
example ajax jquery : https://api.jquery.com/jquery.ajax/
$.ajax({ url : url, type:'post', data:{"stnz" : stnz , "opz" : opz , "act" : (on ? 1 : 0)} success : function (data){ }, error:function(){} });
Comments
Post a Comment