After a user submits a form, my script shows 2 divs and hides 1 div. The form's target is an Iframe on the same page.
I am looking to delay the Hide/Show events until the Iframe loads. I was successful in accomplishing this with a loading animation, but I am unsure of how to do it with the Hide/Show script.
The current script for submit function:
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
However, when attempting to use the load function as shown below, it does not work for the Hide/Show script:
$(document).ready(function () {
$('#iframe1').load(function(){
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
The loading animation script that works:
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
/ in ready()
$('#form_710370').submit(function(){$('#loader1').show();return true;});
Below is the HTML:
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>
<iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
</div>
And here is the CSS:
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}