<a href> instead of <input submit> button

Question

Hello all! Quick question

I originally had a submit button.

<input class="submit" type="submit" class="input" value="Add" name="command" />

but now I would like to use a <a href> instead. The issue is, the value="Add" is very important.

I'm currently making the <a href> like this.

<a href="javascript:document.register.submit();">submit</a>

Any suggestions? Issue is, the site is not picking up that this specific <a href> was clicked, and therefore won't run my php code.

Answer 1

Add a hidden field, and an extra line into the javascript:

<input type="hidden" name="command" />
<a href="javascript: document.register.command.value='Add'; document.register.submit();">
    Submit
</a>

That said, you might be better off using CSS to style the submit button to look how you want it to.

Answer 2

First off I highly recommend jquery. It makes a world of difference when working with javascript and simplifies a number of issues especially cross different browsers.

What I suggest is that you create a hidden input to set the value with.

<script type="text/javascript">
function submitFormWithValue(val){
  document.getElementById('command').value = val;
  document.forms["test"].submit();
}
</script>

<form id="test" name="test" action="#" method="post">
<input type="hidden" name="command" value="" />
</form>

<a href="javascript:submitFormWithValue('foo')">Submit</a>

I didn't test my code but it should be close enough to see how it works. Again check out jquery it will make dealing with javascript a lot easier!

Answer 3

As Pekka suggests: Don't do this. It will make your form unnecessarily be dependent on JavaScript!

The best thing to do is use CSS to style the button to look like a link:

input.submit {
  margin: 0;
  padding: 0;
  border: none;
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}