【发布时间】：2026-02-02 16:50:01
【问题描述】：
我有一个带有提交按钮的简单 html 表单，单击它会转到操作 page1.php。我在这个表格中有一张桌子。现在我希望表格的每一行都带有按钮，以便在单击时打开 jquery 对话框。在此对话框中，用户输入一些详细信息，然后按 OK，然后该详细信息将复制到该表的相应行。
我面临的问题是，当我按下打开对话框按钮时，整个表单都被提交并调用 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>
【问题讨论】：
标签： javascript jquery html dialog