CODEWITHSUNDEEP
phponclickanchor
Charlotte
Charlotte

Reputation: 21

Can a submit button in a php form also be an anchor?

In order to customize a product before adding to the cart, I'm using a php form with two submission points - upload an image & attach text. Instead of having the page refresh to the top after each button click, I want to set an anchor closer to the next step and use the button as the <a href="#"></a>.

This is the upload button code:

    <div id="virtueupl_form" style='width:100%'>
    <form id="adminForm" name="adminForm"  action="<?php echo JRoute::_('index.php?option=com_virtueupload&view=form'); ?>" method="post" enctype="multipart/form-data" onSubmit="return checkForm();">
    <table width="130px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70px" colspan="2" valign="top">
    <label for="file"><?php echo VUOutput::_('YLANG_FORM_LBL_FILE'); ?></label>     <br/>
    <input name="file" type="file" />
    <input id="upload_button" class="button" type="submit" value="<?php echo VUOutput::_('YLANG_UPLOAD'); ?>" onclick="this.form.status.value = '<?php echo VUOutput::_('YLANG_STAT_INITUPL'); ?> '; $('spinner').style.display = 'block';  this.form.status.style.color = '#339900'; " />   
</td>
</tr>

Where does the anchor tag belong to send it to a place further down the same form once the button is clicked? Similarly, after 'attaching text' I would like to avoid requiring the user to scroll down from the top of the page to the next part of the form. I have tried various arrangements but without really knowing what I'm doing, I haven't been successful.

When I searched through this forum (and others) I was only able to find the simple html anchor structure or discussions about using a submit button versus a text link. I think I understand how anchors work, I just can't figure out how to configure it within a form with other events triggered by the same button. From what I read it seems that the 'onclick' command is also important but I couldn't find anything obvious for my limited experience. Perhaps I am not searching the right terms?

Thank you.

Upvotes: 2

Views: 4602

Answers (1)

Yanick Rochon
Yanick Rochon

Reputation: 53516

Submit buttons are special buttons that will automatically trigger the submit event of a form. Using any other way, you have to manually trigger the event from Javascript.

For example, using an anchor, you would have something like

<form id="frm" name="frm" action="" method="get">
  <input type="hidden" name="someinput1" value="hello" />
  <input type="hidden" name="someinput2" value="world" />
  <a href="#" onclick="document.forms['frm'].submit();">Submit</a>
</form>

Usually, using a submit button is preferable as opposed to any other method as it does not depend on Javascript and is by default localized to the browser's locale. You can actually have a submit button and simply style it with CSS. And having more than one submit buttons within a same form is just fine as well.

Also, note that some examples will trigger the event from the href attribute, but I do not recommend this IMO, as it exposes Javascript to the user's anchor hint (when the mouse hover's a link, you can see the content of it's href attribute at the bottom of the page).

Finally, you may use just about any element to trigger a form submit event! Consider this for example (using jQuery) :

<form id="frm" name="frm" action="" method="get">
  <input type="hidden" name="someinput1" value="hello" />
  <input type="hidden" name="someinput2" value="world" />
  <div id="elemSubmit" style="text-align:center; border:1px solid black;">Submit</div>
</form>
<script type="text/javascript">
   $(function() {
      $('elemSubmit').click(function() { $('#frm').submit(); });
   });
</script>

Upvotes: 5

Related Questions