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對話框表格

回答

相關問題