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:
in pure JavaScript: (http://jsfiddle.net/4enf7/)
<a href="javascript:document.getElementById('add-product-form').submit();">Send form</a>
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>
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;
});
});
$("#button").click(function(e){
$.post('url.php', $("#form").serialize(), function(data){
