Question

我有一个带提交按钮的简单html表单，点击后会转到操作page1.php。我在这张表格里面有一张桌子。现在我想要提供按钮的表的每一行在单击时打开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>

Answer 1

阻止默认表单提交：

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

Answer 2

点击打开的对话框即可提交您的表单..

尝试添加return false。

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

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

表示每行更新部分。你可以让它更简单..

为每个Table行添加一个id

点击开启者。获取父TR的“id”属性和substr以获取行ID。

从弹出对话框中点击“确定”。更新TR＃ID

中的输入字段

html表单中的jQuery对话框表单

2 个答案: