Using jQuery to submit form from link outside of form

javascript jquery forms hyperlink

40,692

Solution 1

in pure JavaScript: (http://jsfiddle.net/4enf7/)

<a href="javascript:document.getElementById('add-product-form').submit();">Send form</a>

Solution 2

Link:

<a href="#" id="add-product-save-link" class="icon-plus" ><i>Save</i></a>

jQuery:

$(document).ready(function() { 
    $('#add-product-save-link').click(function() {
        $('#add-product-form').submit();
    });
});

You don't need the e.preventDefault(), because your anchor tag isn't going anywhere (the href is #).

Because your <form> tag's action attribute is blank, that means that the form will submit itself to this same document. If that is what you want to do, then you can put the logic for that at the top of your document:

<?php
    if (isset($_POST)) {
        //do your form processing here
    }else{
        //your normal page is here.
    }
?>

Finally, because this answer uses jQuery, ensure that you reference the jQuery library somewhere, such as in the <head> tags:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>

Solution 3

You are clicking in the "A", not in the Italic (With ID). Supposing you will not change the HTML to that work out you should use this:

$(document).ready(function() {  
    $('#add-product-save-link').parent().click(function(e) {
        $('#add-product-form').submit();
        return false;
    });
});

Solution 4

$("#button").click(function(e){

        $.post('url.php', $("#form").serialize(), function(data){

View more solutions

40,692

Author by

bbrooke

Updated on July 03, 2020

Comments

bbrooke almost 4 years
I'm trying to submit a form from a link that is located in my nav bar.

I'm new to javascript.jQuery and unsure why this won't execute.

I have a feeling there I need to put something else in the link's href but I'm not sure what it is? I appreciate the feedback and expertise.

LINK
```
<li><a href="#" id="add-product-save-link"><i class="icon-plus"></i> Save</a></li>
```
FORM
```
<form class="form" action="" method="post" id="add-product-form">
```
JAVASCRIPT (this code in an external separate file I have linked to the template)
```
$(document).ready(function() { 
    $('#add-product-save-link').click(function(e) {
        e.preventDefault();
        $('#add-product-form').submit();
    });
});
```
I've linked to jQuery with:
cssyphus over 10 years

I think you mean jQuery (not just javascript).
bbrooke over 10 years

Your correct I meant jQuery. I changed the link so the id in the "A" but am still not able to execute the code. Any other thoughts? I appreaciate your feedback.
bbrooke over 10 years

This worked great! Not sure why I couldn't get it execute the other way. Thanks for the feedback.
β.εηοιτ.βε almost 9 years

1/ Consider adding at least some words to your code snippet so the OP and future reader of your answer may understand it clearly. 2/ I think this answer is really missing some code, that code would definitely end with a parse error.