Question

Inside our web application, we have some messaging functionality for messaging other members. This form is receiving a facelift, and I need to replace some functionality:

<input type="image" name="cancel" src="/rpc/button/?text=Cancel" />
<input type="image" name="delete" src="/rpc/button/?text=Delete Draft" />
<input type="image" name="send" src="/rpc/button/?text=Send Message" />
<input type="image" name="save" src="/rpc/button/?text=Save Draft" />

I need to change those buttons to use the new CSS buttons we have:

<a href="" class="button">Cancel</a>

I have tried doing this, which does submit the form, but it seems as though the name="cancel" is being lost, and the form simply submits without :

<a class="button" name="cancel" href="javascript:" onclick="$('#frmCompose').submit();">Cancel</a>

Because we are under a deadline, there is no time for rewriting the backend functionality for this.

How can I replace these old <input type="image" /> with <a> tags and still pass along a name attribute? I would like to avoid having to create new CSS styles for <button> or <input type="submit" /> if at all possible.

Answer 1

If adding name=”cancel” to your doesn’t work, it sounds like you might have to get a little fancy with your javascript. Something like:

<input type="hidden" name="placeholder" value="true" />
<a class="button" name="cancel" href="javascript:" onclick="$(this).prev().attr('name', 'cancel'); $('#frmCompose').submit();">Cancel</a>