Question

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?

Answer 1

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.