0

I'm trying to submit forms programatically when the user leaves the page, regardless of whether or not they've clicked on the 'Submit' button. I've used this method in the past to submit forms from within a function, but for some reason I can't get it to work with onclick.

The form is being submitted properly when the user clicks on the 'Submit' button, so the html form and php are definitely set up correctly. I'm using jquery-1.8.2

<form name="form2" id="form2" method="post" action="form2-exec.php">
    <!-- Form Elements -->
    <a class="back" href="form1.php" onClick="submitForm()">BACK</a>
    <a href="#" class="next"><input type="submit" value="SUBMIT" /></a>
</form>

<script language="javascript" type="text/javascript">
function submitForm() {
    $("#form2").submit();
}
</script>

I've also tried using a click function 

$(".submitForm").click(function () {
$("#taste").submit();
});

And replacing this line in the HTML:

<a class="back" href="form1.php" onClick="submitForm()">BACK</a>

With:

<a class="back submitForm" href="form1.php">BACK</a>
Improve this question

3 Answers 3

Reset to default
1

#Whizkid is right clicking the back buttn after submission will not work, try the following method ,it utilises the jquery onbeforeunload event to test if the form has been submitted yet or not ;if not it reveals the message ,notifying the user of unsaved data in their form:

$(function() {
        // Set the unload message whenever any input element get changed.
        $('input').change(function() {
            setConfirmUnload(true);
        });

        // Turn off the unload message whenever a form get submitted properly.
        $('form').submit(function() {
            setConfirmUnload(false);
        });
    });

    function setConfirmUnload(on) {
        var message = "You have unsaved data. Are you sure to leave the page?";
        window.onbeforeunload = (on) ? function() { return message; } : null;
    }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Is there a way to combine this with submit so that they can click to save it within the message which pops up? Also, since there are both Input and Select elements I just wanted to verify if I should have two separate change functions, or of there is a way to combine both into one function?
Kindly rephrase the 1st question to make it clearer for me but on the second one u dnt have to put introduce a 2nd function ,all you do is $('input' ,'select').change(function() { setConfirmUnload(true);}
In terms of the 1rst question - When the message pops up there are 2 buttons 'Leave this page' and 'Stay on this page', and the user would have to click on 'Stay on this page' and then click on the 'Submit' button. I was wondering if there's a way to change it to only require 1 click (maybe with a jquery dialog message?) so instead of 'Stay on this page' it would be a 'Submit button? For the 2nd question - that looks much better than what I was doing ;-)
I've tried using the jQuery Modal Message, but I haven't been able to properly combine it with the function setConfirmUnload(on) {} because the Modal Message pops up every time a field is changed
1

its a tricky situation. if you submit the form, then your back button's redirection wont work. And if you redirect on backbutton click using href,your submit wont work as by the time click function works, your next page will load. How about firing an ajax call using jquery to send your form's data to your server and in the call back function you redirect the page to the previous page?

For details on how to do that, check out this posting: Submit form using AJAX and jQuery

Improve this answer

5 Comments

Now it's at least making sense why it wasn't working :-) Would you mind showing me how to do that? I'm not really familiar with ajax.
Here is the answer to your question: stackoverflow.com/questions/425095/… .
I can't seem to get the code in that posting to work. I happen to be using the plugin mentioned in the 2nd answer, but that was only doing an INSERT but doesn't work for UPDATE functions. Any chance that you can show me how to submit a it with AJAX? (I don't need to validate the form).
Can you explain in detail what do you mean by Insert is working and not update? The solution is for doing a POST to the server and its up to you if you wanna do an INSERT, UPDATE or DELETE using the posted data on the server .
I tried both Rfunduk and Darin's solutions. I couldn't get Rfunduk's code to work. Darin's solution uses the jquery form plugin to POST it, and for some reason the plugin works with my INSERT statement but not my UPDATE statement (the statements work properly without the plugin), so I'd love your help getting the code from Rfunduk's solution to work.
0

I solved this problem by changing all the necessary links in the HTML into submit buttons with name attributes, and adding a statement in the PHP which redirects the user based on the button they've clicked.

HTML

<input type="submit" name="whereto" value="BACK" />
<input type="submit" name="whereto" value="SUBMIT" />

PHP

// Insert Statement
if ($_POST['whereto'] == 'BACK') {
    header("location: form1.php");
} elseif ($_POST['whereto'] == 'SUBMIT') {
    header("location: form3.php");
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.