在JQuery菜单中的表单

Question

我有一个表单，它有两个隐藏的参数，我想传递给函数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>

如果我使用一个简单的按钮，一切正常。我想要做的是创建一个Jquery菜单：

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();

});

并在用户单击此Jquery菜单上的一个Add New Product时提交表单。我试图将表单放在li标签内，但它不起作用。知道我该怎么办？

Answer 1

使用form.submit()通过jQuery手动触发表单提交。

.submit（）上的文档：

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

因此，只需在包含“添加产品”菜单项的锚点上附加.click()事件，然后触发.submit()事件。

您的解决方案：

菜单HTML代码：

<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>

表单HTML代码

<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代码：

$（document）.ready（function（）{

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

}）;

Answer 2

尝试这样的事情。

<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>View All Products</a></li>
  <li><a href="http://localhost/tddd27/index.php/AddProduct/LoadView?ID="<?=$ID?>&Name="<?=$Name?>"><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>

Answer 3

// give an id attribute to form tag
<form id="frm1" 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>

Now on the click event of <li>add new product</li> do $('#frm1').submit();