Form inside JQuery menu

I have a form which has two hidden parameters that I want to pass to the function LoadView

<form name="frm1" action="http://localhost/tddd27/index.php/AddProduct/LoadView">
<input type="text" name="ID"  value="<?php echo $ID; ?>" hidden="true" >
<input type="text" name="Name"  value="<?php echo $Name; ?>" hidden="true">
<button id="add_product_button">Add product</button>
</form>

If I use a simple button everything works fine. What I want to do is to create a Jquery menu:

Html:

<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>View All Products</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>Add New Product</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>View Profile</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Edit Profile</a></li>
</ul>

Jquery:

$(document).ready(function() {

    $( "#menu" ).menu();

});

and the form be submitted when the user click on one Add New Product on this Jquery Menu. I tried to put the form inside an li tag but it didn't work. Any idea how can I do that?

Answers


Use form.submit() to trigger form submission manually through jQuery.

Documentation on .submit():

Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

Therefore, simply attach a .click() event on the anchor wrapping the 'Add product' menu item and trigger the .submit() event.

Your Solution:

Menu HTML Code:

<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>View All Products</a></li>
  <li><a href="#" id="addNewProduct"><span class="ui-icon ui-icon-zoomin"></span>Add New Product</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>View Profile</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Edit Profile</a></li>
</ul>

Form HTML Code

<form name="frm1" id="frm1" action="http://localhost/tddd27/index.php/AddProduct/LoadView">
<input type="text" name="ID"  value="<?php echo $ID; ?>" hidden="true" >
<input type="text" name="Name"  value="<?php echo $Name; ?>" hidden="true">
<button id="add_product_button">Add product</button>
</form>

jQuery Code:

$(document).ready(function() {

$( "#menu" ).menu();
$("#addNewProduct").click(function(){
   $("#frm1").submit();
});

});


Need Your Help

HTML 5 2D Canvas Animation Clearing

html5 canvas 2d automatic-ref-counting

I've been following various guides and have the base code up for a simple animation but for the life of me I cannot get the canvas to reset correctly. The clearRect() function is working perfectly ...

Unable to connect to Remote Server Using Hbase

java hadoop mapreduce hbase

I am very New to Hadoop and Hbase. I am trying to create a table from java Code and connect to my remote Server (Hbase)which is (172.80.72.86). Its a linux machine (172.80.72.86). I tried the abov...