Trouble submitting form programatically using jQuery

Question

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>

score 1 · Answer 1 · edited May 23 '17 at 11:49

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

edited May 23 '17 at 11:49

Community

1
1

answered Mar 10 '13 at 19:22

Nishanth Nair

2,975
2
19
22

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. – Chaya Cooper Mar 10 '13 at 19:35
1

Here is the answer to your question: http://stackoverflow.com/questions/425095/submit-form-using-ajax-and-jquery . – Nishanth Nair Mar 10 '13 at 19:42
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). – Chaya Cooper Mar 11 '13 at 01:26
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 . – Nishanth Nair Mar 11 '13 at 15:04
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. – Chaya Cooper Mar 12 '13 at 15:41

score 1 · Answer 2 · answered Mar 10 '13 at 19:42

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;
    }

answered Mar 10 '13 at 19:42

PowerK

11
3

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? – Chaya Cooper Mar 11 '13 at 01:42
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);} – PowerK Mar 11 '13 at 07:39
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 ;-) – Chaya Cooper Mar 11 '13 at 07:48
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 – Chaya Cooper Mar 12 '13 at 16:44

score 0 · Accepted Answer · answered Mar 12 '13 at 18:46

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");
}

Trouble submitting form programatically using jQuery

3 Answers3