I have a webpage which contains iFrame. This webpage auto-submits a form to third party url which loads the content in iFrame. I am currently doing the auto-submit of the form on document.ready() through jQuery and it looks like chrome is not submitting this form intermittently.
Below is the sample html in my webpage.
<form id="form_init" target="myFrame" action="https://somethirdpartyurl.com/req.jsp?queryParam=value" method="post" class=" edit accessAid"> <input name="_cs" id="_cs2" value="blah" type="hidden"> <input name="cs" id="cs2" value="blah" type="hidden"> <input type="hidden" name="howdy" value="oneMoreBlah"> <input type="hidden" name="myUrl" value="http://localhost:8000/myapp?_eventId=processing&sessionId=123"> <input type="hidden" name="MD" value="1234567891234567"> <div id="submit_button"> <p>Attention: This form can't be displayed because JavaScript is disabled in your browser.</p> <p class="buttons"> <span class="buttonAsLink"> <input type="submit" name="" class="button autoSubmit" value="Click here to continue"> </span> </p> </div> </form> <iframe name="myFrame" id="myFrame" width="625px" height="480px" frameborder="0" marginheight="0" scrolling="auto" src="https://www.mywebsite.com/grey_spacer.gif"></iframe> <script src="http://www.localhost:8000/myapp/webstatic/js/loadFrame.js" type="text/javascript"></script> Below is the snippet for loadFrame.js file.
$(document).ready(function() { $("#submit_button").length && ($("#submit_button").hide(), $("#submit_button input").hasClass("autoSubmit") && $("#submit_button input")[0].form.submit()); }); Note that all the conditions before $("submit_button input")[0].form.submit() command are success.I have confirmed it through console logs.
The problem I am facing now is, chrome is not submitting the above form intermittently. This issue is not present in other browsers like FireFox and Safari.
One observation is that, when I open developer tools and checking the disable cache option, most of the times form is not getting submitted. If I uncheck the option, mostly the form is getting submitted. (This is true for majority of the times, not all)
One more thing is, when I manually execute the same command $("submit_button input")[0].form.submit() in console, chrome is submitting the form and everything working fine.
Can someone tell me why this issue is coming or at least an alternative solution for this issue? I am hoping that all the required information is provided. Let me know, if you need any other details.
3 Answers
Answers 1
Load about:blank in the iframe or do the form submit on the iframe's onload function.
It could be that the image load given in the src of the iframe is interrupting the form submit.
Answers 2
try below snippet.
$(document).ready(function() { if($("#submit_button").length){ $("#submit_button").hide(); if( $("#submit_button input").hasClass("autoSubmit")){ $("#form_init").submit(); } } }); Answers 3
Try taking Syed's advice by changing this
$(document).ready(function() { $("#submit_button").length && ($("#submit_button").hide(), $("#submit_button input").hasClass("autoSubmit") && $("#submit_button input")[0].form.submit()); }); to this
$(top.myFrame).load(function() { $("#submit_button").length && ($("#submit_button").hide(), $("#submit_button input").hasClass("autoSubmit") && $("#submit_button input")[0].form.submit()); }); not sure if that will work if the iframe is from different origin tho..
0 comments:
Post a Comment