html格式的jQuery对话框表格

我有一个简单的HTML表单提交按钮，点击后会转到操作page1.php。我在这张表格里有一张桌子。现在我想要提供按钮的表中的每一行打开点击jQuery对话框。在此对话框中，用户输入一些详细信息，然后按确定，然后将该详细信息复制到该表的相应行中。html格式的jQuery对话框表格

我面临的问题是，当我按下打开的对话框按钮，然后整个表单被提交和page1.php被调用。如何区分同一表单上的（提交和打开对话框）按钮的调用。

<html> 
<head> 
<script type="text/javascript" src="Validators/ClientSideValidator.js"></script> 
<script type="text/javascript" src="Scripts/row.js"></script> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- 
ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<title>title</title> 
<link href="Style.css" rel="stylesheet" type="text/css" media="screen" /> 


<script> 

$(function() { 
$("#dialog").dialog({ 
    autoOpen: false, 
    show: { 
    effect: "blind", 
    duration: 1000 
    }, 
    hide: { 
    effect: "blind", 
    duration: 1000 
    } 
}); 

$("#opener").click(function() { 
    $("#dialog").dialog("open"); 
}); 
}); 

function PopulateDetails(wt,lng,wid,ht){ 
    document.getElementById("wt").value=wt; 
    document.getElementById("lgt").value=lng; 
    document.getElementById("wdt").value=wid; 
    document.getElementById("ht").value=ht; 
} 
//onclick="CallDialog()" 
function PopulateForm(){ 
document.getElementById("weight" +  
document.getElementById("pkg").value).value=document.getElementById("wt").value; 
document.getElementById("length" + 
document.getElementById("pkg").value).value=document.getElementById("lgt").value; 
document.getElementById("width" +  
document.getElementById("pkg").value).value=document.getElementById("wdt").value; 
document.getElementById("height" + 
document.getElementById("pkg").value).value=document.getElementById("ht").value; 
$("#dialog").dialog("close"); 
} 

function disappear(){ 
    document.getElementById("dialog").style.display = "hidden"; 
} 

</script> 


<form name="GetQuotesForm" action="page1.php" method="POST"> 

<div id="Body"> 
<table width="740" border="1"> 
<tr> 
<font size="5">PARCEL DETAILS</font> 
<TABLE id="dataTable0" width="740px" border="1"> 
    <TR> 
    <TD width="30" align="center"><b> Pkg </b></TD> 
    <TD width="171" align="center"><b> Weight (kg) </b></TD> 
    <TD width="171" align="center"><b> Length (cm) </b></TD> 
    <TD width="171" align="center"><b> Width (cm) </b></TD> 
    <TD width="171" align="center"><b> Height (cm) </b></TD> 
<!-- <TD width="20" align="center"> Sel </TD>--> 
    </TR> 
    </TABLE> 
    <TABLE id="dataTable" width="740px" border="1"> 
    <tr> 
    <TD width="32"> 1 </TD> 
    <td width="171" ><div> 
     <input id="weight1" type="text" name="weight1" placeholder="00.000" 
autofocus="autofocus"> 
</div> </td> 

    <td width="171" ><div> 
    <input id="length1" placeholder="000.00" type="text" name="length1"> </div></td> 

    <td width="171" ><div> 
    <input id="width1" placeholder="000.00" type="text" name="width1"> </div></td> 

    <td width="171" ><div> 
    <input id="height1" placeholder="000.00" type="text" name="height1"> </div></td> 

    <td width="171" ><div> 
    <button id="opener">Open Dialog</button> </div></td> 
    </tr> 
    </TABLE> 

</div> 
<INPUT name="submit" type="submit" id="submit" value="Get Quotes"> 
</form>

对话内容

<div id="dialog" title="Basic dialog"> 
Weight<input type="text" id="wt" name="weight" title="Weight"/> 
Length<input type="text" id="lgt" name="length" title="Length"/> 
Width<input type="text" id="wdt" name="width" title="Width"/> 
Height<input type="text" id="ht" name="height" title="Height"/> 
<ul id="categories"> 
    <li id="cat-1"> 
    <img src="Images/download.jpg" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(1,1,1,1)"> 

    </li> 
    <li id="cat-2"> 
    <img src="Images/Fedex_express.gif" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(2,2,2,2)"> 
    </li> 
    <li id="cat-3"> 
    <img src="Images/download.jpg" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(3,3,3,3)"> 
    </li> 
    <li id="cat-4"> 
    <img src="Images/Fedex_express.gif" alt="Smiley face" width="42" height="42" 
onclick="PopulateDetails(4,4,4,4)"> 
    </li> 
</ul> 
<button name="OK" onclick="PopulateForm()">OK</button> 

</div>

来源

2013-12-23 Praveen

阻止默认的形式提交：

$("#opener").click(function(e) { 
    e.preventDefault(); 
    $("#dialog").dialog("open"); 
});

来源

2013-12-23 18:10:58 Barmar

您的形式大干快上单击打开对话框提交..

尝试添加返回FALSE。

$("#opener").click(function(e) { 
    e.preventDefault(); 

     $("#dialog").dialog("open"); 
    });

为每行更新部分。你可以把它简单..

添加一个id来每个表行

上点击开门红。获取父TR的“id”属性和substr以获取行ID。

从弹出的对话框中点击“确定”。更新输入字段从TR＃ID

来源

2013-12-23 18:14:42

请阅读RE'返回false' http://stackoverflow.com/a/5927706/822711 – Popnoodles

您的函数“PopulateForm”中的代码将是复杂或可能无法正常工作，如果有在你的表中是多于1行 –

@popnoodles，同意！但在这种情况下不会有问题 –

html格式的jQuery对话框表格

回答

相关问题