Display image when submit button is pressed

Question

I have a multi-page form that was created for me. All of the pages on the form have submit button that saves the data to a database, a previous button that goes to the previous page and a next button. How do I display an image when the save button (id="save") is pressed? Right now the image pops up when either one of the buttons are pressed. I am a jQuery rookie so any help is greatly appreciated. Thanks!

The jQuery

<script>
jQuery(document).ready(function($) {
  $('form').submit(function (e) {
   var form = this;
   e.preventDefault();
   setTimeout(function () {
    form.submit();
  }, 5000); // in milliseconds

  $("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
   });
});
</script>

The PHP

<div id="target"></div>
<input type="submit" name="status" value="Prev" />
<input type="submit" name="status" id="save" value="Save" />
<input type="submit" name="status" value="Next" />

<?php

if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Prev'){
  //save data and redirect to previous page using header();
}

if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Next'){
  //save data and redirect to next page using header();
}

if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Save'){
  //save data and do whatever you want
}


?>

Based on your jQuery code, it looks to me like the same thing would happen for any of the three buttons. An image should pop up and there should be a 5 second delay, and then the form will be submitted. Is that not what's happening? — Travesty3, Apr 15 '13 at 13:09
Also, it doesn't seem like a good idea to me to make the user wait 5 seconds just so they can read the "saving" message. — Travesty3, Apr 15 '13 at 13:11
I just want the image to pop up when the save button is pressed. I'm not sure how to do that. Regarding your 2nd comment, That's what I was thinking, but the 'boss-man' wants it. — this_guy, Apr 15 '13 at 13:16
Take a look at [this jsFiddle](http://jsfiddle.net/aABNH/). It has nearly your exact code. There should be no difference between the three submit buttons. If it works on the prev and next buttons, it should work on the save button. Are you asking to show a ***different*** image on the Save button? What are you seeing right now? — Travesty3, Apr 15 '13 at 13:28
Ok, I get it. The problem is that the image pops up for all three buttons, but you want it to only show up for the Save button. I will post a solution. — Travesty3, Apr 15 '13 at 13:47

score 0 · Answer 1 · answered Apr 15 '13 at 13:19

0

In your code all buttons have the type submit, hence it causes the form to submit irrespective of the button you click.

make type="submit" only to that button for which you want to submit the form and show the image.

answered Apr 15 '13 at 13:19

Ankit Khedekar

924
1
7
26

The issue in the question has nothing to do with stopping the form from submitting. It sounds like they want the form to submit when any of the three buttons are pressed. Pressing a different submit button will cause a different value for the 'status' parameter, so that tells the server which submit button was pressed. – Travesty3 Apr 15 '13 at 13:22
http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission i made changes to the fiddle you submitted http://jsfiddle.net/aABNH/1/ – Ankit Khedekar Apr 15 '13 at 13:35

score 0 · Answer 2 · answered Apr 15 '13 at 13:39

Demo: http://jsfiddle.net/esMn2/1/

Here's a working demo of a quick mockup, not using jQuery, but to give you an idea of how it could be done.

prev = document.getElementById('prev');
save = document.getElementById('save');
next = document.getElementById('next');
form = document.getElementById('form');

prev.addEventListener('mousedown', function(e) {
    e.preventDefault();
    alert('Did nothing');
});

save.addEventListener('mousedown', function(e) {
    e.preventDefault();
    showLoading();
});

next.addEventListener('mousedown', function(e) {
    e.preventDefault();
    alert('Did Nothing');
});

function showLoading() {
    var load = document.createElement('img');
    load.src = "http://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif";

    document.getElementById('target').appendChild(load);

    setTimeout(function() {
        form.submit();
    }, 5000);
}

Using jQuery though you will support IE<9, as they know to use attachEvent and not addEventListener

Travesty3 · Answer 3 · 2013-04-15T13:57:50.243

To get the image to only show up for the Save button, just bind the event to that button, not to the form's submit event.

jsFiddle

$('#save').click(function(e) {
    e.preventDefault();
    var form = $(this).closest('form');

    setTimeout(function () {
        form.submit();
    }, 5000); // in milliseconds

    $("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
});

This way, there will be no delay on submitting the form for the prev and next buttons, and the image and delay will only show for the Save button.

Display image when submit button is pressed

3 Answers3

jsFiddle