Text Hyperlink as submit button

P

PHTech

Senior Member
Joined
Aug 21, 2006
Messages
588
Reaction score
0
Location
Witbank
Hi there...

Is there a way for me to make a text / hyperlink a submit button...? I don't really like the standard HTML buttons, so I want to use use my own graphical buttons...

If there is any basic code for that, so when I click on a specified text, it will submit the form...?

Thanx...!
 
Have you tried adding an "onclick" event handler to the link/div/span/whatever which calls a Javascript function to submit the form? To submit a form from Javascript, do the following (supposing your form's ID="form1"):

Code: 
function SubmitForm()
{
      form1.submit();
}

You can either add the event handler unobtrusively (the new web standard) or, if you prefer the old-school way, declare it directly in the tag itself, i.e.:

Code: 
<a ID="somelink" href="#" onclick="SubmitForm();">Click to submit!</a>

Hope it helps!

DISCLAIMER: I haven't actually tested it and there may be an error or two, but in principle it should work.

EDIT: Remember, you can add an onclick event handler to just about any DOM object on the page (IMG/DIV/SPAN/A etc.).
 
Thanx for this code... It looks simple enough though...

Will keep posting on this thread, for further questions / opinions.

Thanx...
 
A huge pleasure!

(BTW: I like your sig. Also try www.blueletterbible.org ;))

EDIT: Just a side-note, if you're using ASP.NET, you can force a postback on the page by calling:

Code: 
__doPostBack("control_to_postback","argument");

Note that there are TWO underscores, not one.
 
Last edited:
Code: 
<a href="engSearchCOY.php" class="navigationHor" ID="form2" onclick="SubmitForm();">Click to submit!</a>

This is a "Button" to submit a form... The form's name is "Form2". When I click on the submit button, it goes to the specified link, but no records have been submitted / updated... Am I doing something wrong...?
 
Well, what do you want the SubmitForm() handler to to? You should first perform any logic you want in the SubmitForm() handler before transferring to the new page. Try setting the href="#" and then to check what happens. Do you have any code that handles the server-side processing (inserting into the DB etc) after the page is submitted?
 
Code: 
<form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
          <table align="center">

            <tr valign="baseline">
              <td nowrap="nowrap" align="right">Module:</td>
              <td><label><strong><?php echo $row_rs_UpdateModule['Module']; ?></strong></label></td>
            </tr>
            <tr valign="baseline">
              <td nowrap="nowrap" align="right">Completed:</td>
              <td><label>
                <input type="checkbox" name="Completed" id="Completed" />
              </label></td>
            </tr>

            <tr valign="baseline">
              <td nowrap="nowrap" align="right">&nbsp;</td>
              <td class="smallDescription">Currently: <span class="footnote"><?php echo $row_rs_UpdateModule['Completed']; ?></span></td>
            </tr>
            <tr valign="baseline">
              <td nowrap="nowrap" align="right"><input name="Module" type="hidden" id="Module" value="<?php echo $row_rs_UpdateModule['Module']; ?>" /></td>
              <td>&nbsp;</td>
            </tr>
            <tr valign="baseline">
              <td nowrap="nowrap" align="right"><input name="FromDB" type="hidden" id="FromDB" value="<?php echo htmlentities($row_rs_UpdateModule['FromDB'], ENT_COMPAT, 'utf-8'); ?>" />
                <input name="AddedBy" type="hidden" id="AddedBy" value="<?php echo $row_rs_USERAUTH['NAME']; ?>" />
<input name="COYNo" type="hidden" id="COYNo" value="<?php echo htmlentities($row_rs_UpdateModule['COYNo'], ENT_COMPAT, 'utf-8'); ?>" /></td>
              <td[B]><a href="engSearchCOY.php" class="navigationHor" ID="form2" onclick="SubmitForm();">Click to submit!</a>[/B]</td>
            </tr>
          </table>
          <input type="hidden" name="MM_update" value="form2" />
          <input type="hidden" name="ID" value="<?php echo $row_rs_UpdateModule['ID']; ?>" />
      </form>

Well, this is the Code for the FORM... Just to tell you, I am not TOO good with coding, thats why I do use Dreamweaver, but looks like code is VERY important to do the stuff I want to...
 
Ok, first of all, change the HREF of your anchor to read HREF="#".

Secondly, what does your SubmitForm() event handler look like? Somewhere you should have a <script> tag containing the javscript SubmitForm() method.

My suggestion is that your SubmitForm() method looks something like this:

Code: 
<script language="javascript" type="text/javascript">

function SubmitForm()
{
    var theForm = document.getElementById("form2");
    theForm.submit();

    document.location.href = "engSearchCOY.php";
}

</script>

The last part in the function will transfer your page to the specified URL, without having to specify it in the HREF of the anchor.
 
Ok... I wil play a bit with something like that, and see what will the end result be... I want to do so much with web-development and want to find out as much as possible...

Thanx for all your help...
 
PHTech said:
Hi there...

Is there a way for me to make a text / hyperlink a submit button...? I don't really like the standard HTML buttons, so I want to use use my own graphical buttons...

If there is any basic code for that, so when I click on a specified text, it will submit the form...?

Thanx...!
Click to expand...
Have you tried the button tag? it can include an image quite easily, and doesn't require Javascript (Always good :))...
Code: 
<button type="submit">
   <img src="..." alt="Submit" title="Submit this page" />
</button>
 
Raithlin said:
Have you tried the button tag? it can include an image quite easily, and doesn't require Javascript (Always good :))...
Code: 
<button type="submit">
   <img src="..." alt="Submit" title="Submit this page" />
</button>
Click to expand...

The thing is, I want to move away from the standard buttons, and want to create my own buttons... But I will play around in Dreamweaver CS3 and see what I can do...

Thanx man...!
 
PHTech said:
The thing is, I want to move away from the standard buttons, and want to create my own buttons... But I will play around in Dreamweaver CS3 and see what I can do...

Thanx man...!
Click to expand...
That's exactly it! You want to move away from
Code: 
<input type="submit"...
to
Code: 
<button type="submit"></button>
as the latter allows you to include images, text, whatever! Much easier (and better semantics) than using Javascript on a link, etc.
 
Raithlin said:
That's exactly it! You want to move away from
Code: 
<input type="submit"...
to
Code: 
<button type="submit"></button>
as the latter allows you to include images, text, whatever! Much easier (and better semantics) than using Javascript on a link, etc.
Click to expand...

OH... Now I see...! Cool man...! Will give it a shot...! I agree it could be better than the Javascripting on links, as sometime or another it will become a bit complex. Also for people who is not TOO good with code (like me) Javascript is a bit too much if you don't understand it too good...!
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X