How to submit an XForm by clicking on a hyperlink??

I would like to submit an XForm by clicking on a hyperlink, instead of a regular submit button. Does anyone know if this is possible?

This works in HTML, like this (there is no button shown, only a hyperlink) :

<style type="text/css">

.submitLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: Bold;
color: #CCCC88;
background-color: transparent;
text-decoration: underline;
border: none;
cursor: pointer;
cursor: hand;
}
</style>

<FORM action="http://somesite.com" method="post">
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<INPUT type="submit" class="submitLink" value="Submit Button"/>
</FORM>

How could this be achieved in XForms? I tried to add a "class"-attribute to the trigger that sends the form, but to no avail. The font has a pretty color, and is underlined, but the button is still shown.

This is my xforms-code (it's not what I want) :

<xforms:trigger class="submitLink" style="display:block">
<xforms:label>Login</xforms:label>
<xforms:action ev:event="DOMActivate">
<xforms:send submission="getLogin" />
</xforms:action>
</xforms:trigger>

So I'm thinking that Javascript is the way to go, perhaps like this:

a href="javascript:login()">Login</a>

and then

<SCRIPT LANGUAGE="JavaScript">
function login(){
var theModel = document.getElementById("LoginFormModel");

//var theInstance = theModel.getInstanceDocument("loginInstance");
//this works, I've used it to add and read nodes to and from the instance

//So how do I access the submission element of the model?
//And how can I submit it then?

//var theSubmit = theModel.getSubmission(); --> this does not work

var theSubmit = document.getElementById("getLogin"); // --> this doesn't give an
// error

theSubmit.submit(); // this does not work :(
}
</SCRIPT>

So how can I submit a XForm by clicking on a hyperlink, instead of a regular button?

I really need this, so I'd really appreciate all the help.

thanks in advance
Matt
Belgium

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

wow it worked!

hi,

wow it worked! Thanks alot! Here is the final code:

.submitLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: transparent;
text-decoration: underline;
border: none;
cursor: pointer;
cursor: hand;
}

<xforms:trigger class="submitLink" appearance=minimal>
<xforms:label>Login</xforms:label>
<xforms:action ev:event="DOMActivate">
<xforms:send submission="getLogin"/>
</xforms:action>
</xforms:trigger>

thanks again!

Mark Birbeck's picture

Use @appearance="minimal"

Hi Matt,

It's actually easier than calling script--just style the submit to look like a link using the CSS that you mentioned. The only bit you need to add is @appearance="minimal" on the button so that it doesn't get styled to look like an operating system button.

Hope that helps.

Mark

wow it worked

hi,

wow thanks man, it worked!

This is the final code:

.submitLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: transparent;
text-decoration: underline;
border: none;
cursor: pointer;
cursor: hand;
}

<xforms:trigger class="submitLink" appearance=minimal >
<xforms:label>Login</xforms:label >
<xforms:action ev:event="DOMActivate">
<xforms:send submission="getLogin"/>
</xforms:action>
</xforms:trigger>

thanks again!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.