Reset html form after submitting form and use it again without page refresh

Question

I have html form in PHP page which offers image download in different sizes.

<form action='download.php' method='post'>
     <select name='size'>
          <option value='1'>Small</option>
          <option value='2'>Medium</option>
          <option value='3'>Large</option>
     </select>
     <button type='submit'>Download</button>
</form>

And in "download.php" page there is code which generate image and start downloading automatically using header.

header('Content-type: image/jpeg');
header('Content-Disposition: attachment; filename="'.$filename.'"');        
imagejpeg($image, null, 100);

When I click on download button, form submits successfully and image starts downloading. Because I am using header in download.php file, current page not redirects to download.php file, and form remains as it is. Everything works till now.

Now if I click on download button again, form redirects to download.php file, with no image downloading.

Is there any way to work download button more than one time, without refreshing my index page?

Notes:

1.) I am using jquery on index page.

2.) Instead of <input type='submit' />, I am using <button type='submit'></button> because I am using font-awesome jquery plugin to put icon in button. Which is not possible in input tag.

Ganesh RJ · Accepted Answer · 2013-03-11 15:30:10Z

1

You have use jquery ajax to do what you are asking.

You can find the ajax Tutorial here.

Step 1: You need to post the data using ajax

Step 2: For resetting the field you can jquery to reset the field using their IDs

Ajax jquery download script

edited Mar 11, 2013 at 15:30

answered Mar 11, 2013 at 15:08

Ganesh RJ

9422 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1995997 Over a year ago

Form can be submit using ajax but downloading not starts automatically.

user1995997 Over a year ago

Ajax jquery download script will work with little modification, thanks.

user1995997 Over a year ago

Thanks a lot, Ajax jquery download plugin is working like a charm. It doesn't even need form, simple <a> tag will do the trick. Thanks again..

Collectives™ on Stack Overflow

Reset html form after submitting form and use it again without page refresh

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related