CODEWITHSUNDEEP
javascripthtmlforms
nickf
nickf

Reputation: 546015

How best to make a link submit a form

What's the best way to get a regular anchor (<a href="...">) to submit the form it is embedded in when clicked?

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="?">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>

I know that the easiest way using jQuery would be

$('#myLink').click(function() {
    $(this).parents('form:first').submit();
});

...but I'm trying to find a way to do this without using a library.

Edit: I'm really trying to find a method which doesn't require knowledge of the form (eg: its name, id, etc). This would be similar to how you could put this on an input element: <input onclick="this.form.submit()" />

Upvotes: 37

Views: 92235

Answers (13)

Ionut Bajescu
Ionut Bajescu

Reputation: 1317

<form>
<input type="submit" id="submit" style="display:none;"/>
<a href="#" onclick="$('#submit').click();">Sample Submit Trick</a> 
</form>

Upvotes: 1

Mario
Mario

Reputation: 61

Turn a submit button into a link using markup like this:

<input id="submitlink" type="submit" value="Text" />

And CSS like this:

input#submitlink {
    background: transparent;
    border: 0;
    cursor:pointer;
    margin: 0;
    padding: 0;
    color: #034af3;
    text-decoration: underline;
}

input#submitlink:visited {
    color: #505abc;
}

input#submitlink:hover {
    color: #1d60ff;
    text-decoration: none;
}

input#submitlink:active {
    color: #12eb87;
}

Upvotes: 6

Tom
Tom

Reputation: 12659

To follow on from the answer above How best to make a link submit a form, the way I've been doing it recently is 

<button class="submit" type="submit"><a href="#" onclick="return false;">Link Text</a></button>

and CSS

.submit {
    background: transparent;
    border:0;
    display: inline;
    margin: 0;
    padding: 0;
    cursor:pointer;
}
.submit a 
{
    color: #CEA249;
}
.submit:hover a
{
    color: white;
}

I posted this since I couldn't find an example of the html / css done. If anyone has any improvements will update.

Upvotes: 1

Graham King
Graham King

Reputation: 5720

As long as the link is a direct child of the form, you can use this. You don't need to know the name of the form. Works in at least Firefox and Chrome.

<form action="">
    <a href="" onclick="parentNode.submit();return false;">Submit</a>
</form>

quirksmode.org tells me x.parentNode works in all browsers, so this should work everywhere.

Upvotes: 12

Jef
Jef

Reputation: 869

I am using this now every time. Because the submit button in my project usually a link (by wrap an image or CSS), so I use this:

<a href="#" onclick="$(this).closest('form').submit(); return false;">Submit</a>

Don't forget it is using jQuery too.

You can wrap in your own function. So it always submit the parent element (form) on that link.

Upvotes: 14

Gav
Gav

Reputation: 11460

$(document).ready(function(){$('#submit').click(function(){$('#signup').submit();});});

Using Jquery, we check the document has loaded, then we wait for an anchor tag with an id of 'submit' to be clicked. It then submits the form with an id of 'signup'. Change 'submit' and 'signup' to suit.

Upvotes: 1

PhiLho
PhiLho

Reputation: 41132

Personally, I prefer to use the javascript: protocol in the href instead of using onclick event... If there is any issues with this, I would be happy to be corrected.

If you have only one form in the page, a quite common case, you can do simply:

<li><p><a href="javascript:document.forms[0].submit();">Click here to submit</a></p></li>

Otherwise, bubbling up the elements as above is a solution.

[EDIT] I keep the answer, even if it is downvoted, as a reference (the info given in comments is interesting).
Another drawback of the protocol technique: it doesn't generate an event object. Not a problem in the snippet I gave, but annoying when calling a handler.

Upvotes: 1

Borgar
Borgar

Reputation: 38644

You should use a button (and input or button of type submit) to submit a form.

If you need any additional features that a link has but input elements don't have (such as hover), then it is easier to implement those with javascript, than it is the submission of the form. It will also degrade more gracefully for people without javascript.

You can even solve this with MSIE specific code (and use :hover for other browsers):

<input type="submit" value="send" class="linkstyles"
       onmouseenter="this.className+=' hovered';"
       onmouseleave="this.className=this.className.replace(/(^|\s)hovered(\s|$)/g, '');" />

If you still really really want to do it backwards then here's how I wouldn't do it:

function submitByLink ( elm ) {
  // Move up domtree until we hit no parentNode or find a form
  while (elm) {
    elm = elm.parentNode;
    if (elm && elm.tagName == 'FORM') {
      // First chance we get, we submit the form and exit.
      // The return on the node it kills the event bubble by forwarding false to browser
      elm.submit(); 
      return false;
    }
  }
  // If we got here then there is no form parent and user will be sent to link href
}

And the HTML would look like this:

<a href="aPageExplainingWhyYouNeedJavascript.html" onclick="return submitByLink(this);">Send</a>

Upvotes: 1

enobrev
enobrev

Reputation: 22532

Similar solution to hasen j, but using a recursive function to traverse the document.

function findParentForm(element) {
    if (element.parentNode.tagName.toLowerCase() == 'html') {
        throw('No Parent Form Found');
    } else if (element.parentNode.tagName.toLowerCase() == 'form') {
        return element.parentNode;
    } else {
        return findParentForm(element.parentNode);
    }
}

And the form, of course...

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="findParentForm(this).submit(); return false;">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>

Upvotes: 1

hasen
hasen

Reputation: 166122

loop through parent nodes until you find an element with tagname that indicates it's a form!

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="get_form(this).submit(); return false">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>



<script type="text/javascript">
    //<![CDATA[
    function get_form( element )
    {
        while( element )
        {
            element = element.parentNode
            if( element.tagName.toLowerCase() == "form" )
            {
                //alert( element ) //debug/test
                return element
            }
        }
        return 0; //error: no form found in ancestors
    }
    //]]>
</script>

Upvotes: 10

Andrew G. Johnson
Andrew G. Johnson

Reputation: 26993

best way is

<a href="#" onclick="document.forms[0].submit();return false;">Submit Form</a>

however you probably DON'T want to do that as it will make submitting impossible for users with JS disabled

Upvotes: 3

Vinny Carpenter
Vinny Carpenter

Reputation: 565

The simplest way to do that would be use something like this:


<a href="#" onclick="document.formName.submit();">

Upvotes: 20

ypnos
ypnos

Reputation: 52337

Why don't you use an <input> or <button> element and just tweak it with CSS? Then it works without Javascript and is therefore more reliable.

Upvotes: 29

Related Questions