jQuery dialog form in a html form

Question

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>

score 1 · Answer 1 · answered Dec 23 '13 at 18:10

1

Prevent the default form submission:

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

answered Dec 23 '13 at 18:10

Barmar

741,623
53
500
612

Varun Nambiar · Answer 2 · 2013-12-23T18:39:21.957

0

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

edited Dec 23 '13 at 18:39

answered Dec 23 '13 at 18:14

Varun Nambiar

76
1
7

the code in your function "PopulateForm" will be complicated or may not work if there is more than 1 row in your table – Varun Nambiar Dec 23 '13 at 18:18
@popnoodles, Agreed!, but in this case there will be no issue – Varun Nambiar Dec 23 '13 at 18:19
You don't know there will be no issue. How can you be so sure that there won't be an event bound to an element higher up that performs a less obvious task when it receives that bubbled-up click event? – Popnoodles Dec 23 '13 at 18:23
I had read his question and what all hs requirement was :) and the link you provide states that return false called 3 code . preventDefault (we can do this), stopPropogation and return false will exit the callback. (no harm) – Varun Nambiar Dec 23 '13 at 18:30
Ok I get that. But you can't see that something won't be added in the future. My coding isn't perfect but there are pitfalls you can avoid and `return false` is one of them. – Popnoodles Dec 23 '13 at 18:32
title Click Me I see my both event got triggered – Varun Nambiar Dec 23 '13 at 18:34
I'm wasting my time trying to educate you. – Popnoodles Dec 23 '13 at 18:35
I am using js to add the the rows dynamically to the table. The id 'opener' is not working to populate the dynamically generated rows. – Praveen Dec 23 '13 at 18:41

jQuery dialog form in a html form

2 Answers2