CODEWITHSUNDEEP
javascriptjqueryhtmldialog
Praveen
Praveen

Reputation: 1

jQuery dialog form in a html form

I have a simple html form with submit button, which on clicking will go to action page1.php. I have a table inside this form. Now I want each row of the table provided with button to open the jquery dialog box on clicking. In this dialog user enters some details then press OK then that detail is copied to the corresponding row of that table.

The problem I am facing is, when i press the open dialog button then whole form is being submitted and page1.php is called. How do I differentiate the calls on both (submit and open dialog) buttons with the same form.

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

dialog content

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

Upvotes: 0

Views: 1181

Answers (2)

Varun Nambiar
Varun Nambiar

Reputation: 76

Your form gets submitted on clicking open dialog..

try adding return false.

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

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

for the each row update part. you can make it simpler..

Add a id to each Table row

on clicking opener. get the parent TR's "id" attribute and substr to get the row ID.

on hitting "OK" from the popup dialog. update the input fields from the TR#ID

Upvotes: 0

Barmar
Barmar

Reputation: 780984

Prevent the default form submission:

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

Upvotes: 1

Related Questions