Does creating <a> behave the same way as <input type = "image" / ">?

Question

In our web application, we have a messaging function for exchanging messages with other participants. This form gets a facelift, and I need to replace some functions:

<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 these buttons to use the new CSS buttons that we have:

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

I tried to do this, which represents the form, but it seems that name="cancel" is lost and the form just submits without:

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

Since we are in the deadline, there is no time to rewrite the backend functionality for this.

How to replace these old <input type="image" /> tags with <a> tags and still pass the 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 yours does not work, it looks like you might have to take a little look at your javascript. Sort of:

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

Answer 2

Horrible, but use a hidden form field:

 <input type="hidden" id="clickedname" name="" value="" /> 

and

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

Adjust the name / value assignments to fit - I can't remember exactly how the images are inserted.

Answer 3

You need to use JS to, for example, put a value in a hidden field to send and send.

I would recommend writing a small utility function that replaces your onclick attribute value. Better yet, add functionality after the DOM is ready and keep things unobtrusive and localized.

 <a class="button" href="#" onclick="submit('cancel')">Cancel</a> 

And submit does what you expect, fills the hidden field and submits the form. If you really cannot completely change the back end, you can also change the name of the hidden field, but ugh; It’s like changing the back end to check the “action” field or something cleaner.

Answer 4

Only form elements ( <input> , <button> , <textarea> , <select> , etc.) represent the values ​​in the form. For the <a> tag to do this, you will need to use JavaScript to add the value to the form.

One way is to add a hidden form element and set its name / value.

 <a class="button" name="cancel" href="#">Cancel</a> <input type="hidden" id="buttonClicked" /> 

Then using JavaScript (jQuery):

 $(function(){ $('a.button').click(function(e){ e.preventDefault(); $('#buttonClicked').prop({ name: $(this).prop('name'), value: $(this).prop('name') }); $('#frmCompose').submit(); }); }); 

Answer 5

You can add one hidden field to the form.

 <input type="hidden" id="action" value=""/> 

Then set the action value to onclick

 $("#action").attr("name","---ActionHere---"); 

So the cancellation will be:

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

And send will be:

 <a class="button" href="javascript:" onclick='$("#action").attr("name","send");$("#frmCompose").submit();'>Send</a> 

Hope this helps

Answer 6

I think the easiest way is to create <input type="hidden" /> with the name you want:

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

Answer 7

Perhaps you do not need to use <a> ?

html:

 <button class="alike">Test</button> <a href="#">Test</a>​ 

css:

 button.alike,a { border: 0px; text-decoration: underline; color: #00E; width: auto; cursor: pointer; background-color: inherit; font-family: 'Times New Roman'; font-size: 16px; }​