CODEWITHSUNDEEP
jqueryhtmlforms
Andrew Gray
Andrew Gray

Reputation: 3790

Form Submission via an a href tag not working

In our app, we recently adopted an improved GUI style. Originally, our form submit links were similar to the following:

<input type=submit class="some-style" name="Command" value="Save" />

However, we're trying to use the following instead:

<input id='hiddenSaver' type="hidden" name="Command" value="Save" />
<a id='saveButton' href="#" class="some-style"><i class="some-icon"></i> Save</a>

<!-- SNIP: Extraneous other stuff -->

<script>
var $saveButton = $('saveButton'),
    $hiddenSaver = $('hiddenSaver');

$(document).ready(function () {
  $saveButton.click(function () {
    $saveButton.preventDefault();
    $hiddenSaver.submit();
  });
});
</script>

Yet our forms do not submit...in fact, they just don't do anything. What are we missing?

Upvotes: 0

Views: 1363

Answers (3)

Adil
Adil

Reputation: 148110

You are not correctly using id selector and missed the # before id in selector.

var $saveButton = $('#saveButton'),
$hiddenSaver = $('#hiddenSaver');

Call submit on form object not on button

$hiddenSaver.closest('form').submit();

Or 

$hiddenSaver = $('hiddenSaver').closest("form");
$hiddenSaver.submit();

Upvotes: 1

Sparky
Sparky

Reputation: 98718

This answer fully solves the original question as posted including a working demo...

Title: "Submission via an a href tag"

Several issues with your code as follows...

1) Your jQuery ID selectors were missing the # sign.

2) You failed to pass the event variable e to .preventDefault() using function(e) and e.preventDefault()

3) submit() gets attached to the form itself, not an input element.

I corrected your code below:

<form id="myform">
    <input id='hiddenSaver' type="hidden" name="Command" value="Save" />
</form>

<a id='saveButton' href="#" class="some-style"><i class="some-icon"></i> Save</a>

<!-- SNIP: Extraneous other stuff -->

<script>
var $saveButton = $('#saveButton'),
    $hiddenSaver = $('#hiddenSaver'),
    $myform = $('#myform');

$(document).ready(function() {
    $saveButton.click(function(e) {
        e.preventDefault();
        $myform.submit();
    });
});
</script>

Working Demo: http://jsfiddle.net/sBueS/

I included the jQuery Validate plugin in the jsFiddle only to prove that the form is indeed submitted using the submit() event triggered by the anchor tag <a>.

Upvotes: 1

War10ck
War10ck

Reputation: 12508

You are calling the .submit() on an input field not a form. Below is an excerpt from the jQuery documentation:

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.

Refer to the jQuery API page for .submit() here:

jQuery .Submit()

Try attaching the .submit() to the form you're submitting. Also take not of what inputs, they recommend for submitting a form. I'm not sure if you can do it with your anchor tag. You could certainly use:

<button type="submit">Submit</button>

I know you are using a new GUI but with some CSS styling you could get the button to look pretty nice.

Hope this helps.

Upvotes: 1

Related Questions