0

I'm trying to change the src of an iframe upon submitting a form.

The iframe src won't change unless I hit the submit button twice. However, if I just change the input 'type' for my submit button to 'text', it works on the first click - but obviously doesn't submit the form.

<script>

$(document).ready(function() { 
    $("#form1").submit(function() {
            $('#upload_frame').attr('src','upload-test.php');
    });
});

</script>

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <input id="file" type="file" name="file" />
  <input name="Submit" id="submit" type="submit" value="Submit" />
<br />
  <iframe id="upload_frame" name="upload_frame"> </iframe>
</form>
nwalke
  • 3,170
  • 6
  • 35
  • 60
johnboy
  • 77
  • 1
  • 2

3 Answers3

1

I figured out the issue I was having. Resolved it with the setTimeout function.

    //show iframe on form submit
        $("#form1").submit(function(){

            if (show_bar === 1) { 
                $('#upload_frame').show();
                function set () {
$('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>');
                }
                setTimeout(set);
            }
        });
    //

The project in which I'm using this form can be found here:

http://www.johnboy.com/php-upload-progress-bar

johnboy
  • 77
  • 1
  • 2
0

You can change the type to button and do this...

$(document).ready(function() { 
    $("#submit").click(function() {
        $('#upload_frame').attr('src','upload-test.php');
        $("#form1").submit();
    });
});
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Nick - sounds like a good idea, but the form doesn't submit at all with this code. I'm looking to submit the form normally, with a page refresh. Thanks for the quick response and let me know if you have any more ideas. – johnboy Jan 16 '10 at 23:09
  • If the form submits and does a full page refresh...anything you do in jQuery to the iframe will be lost anyway, maybe I'm misunderstanding what you're after? – Nick Craver Jan 16 '10 at 23:12
  • Here's what I'm working on: http://www.johnboy.com/php-upload-progress-bar/ The only problem is that when the page loads - jQuery automatically starts making calls to a URL to get the file status/progress. I'd like the iframe to be called only when the form is submitted - so it starts making the calls to update the progress, only when the form is actually submitted. Form http://www.johnboy.com/php-upload-progress-bar/upload.phps iframe http://www.johnboy.com/php-upload-progress-bar/upload_frame.phps – johnboy Jan 16 '10 at 23:21
0

Why don't you use the target attribute of the form ?

<form ... target="upload_frame">

should do it ..

And you would not need to resort to jQuery for standard and supported functionality of the browser..

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317