join two html block variables in javascript

Question

I am trying to join two blocks of html code with javascript and call a dialog afterwards. I have done some research and tried concat and + but that doesnt work. Here is a simplified version of my code:

   var html =
      "<div class=\"dialog-form\" title=\"Edit\">" +
   "<form class=\"insertaplato\" method=\"POST\" action=\"edit.php\">" +
    "<fieldset>" +
        "<label>Plate: </label> <input  type=\"text\"  value=\"" + plate + "\" >" +
        "<label>Price: </label><input  type=\"text\"  value=\""+ price +"\" >";     

    "Spicy: <br>    ";
if (spicy==1)
{var varP=
        "<label> Yes </label><input  value= \"yes\" type=\"radio\" checked>"+ 
        "<label> No </label><input  value=\"no\"><br><br>";
} else {
    var varP=
        "<label> Yes </label><input  value=\"yes\" type=\"radio\">"+ 
        "<label> No </label><input value=\"no\" checked type=\"radio\"><br><br>";   
}


 var html2 = "<br>"+ 
    "<br><input id=\"insert\" type=\"submit\" value=\"Edit\" name=\"send\"> " + 
    "</fieldset>"+ 
    "</form>"+ 
    "</div>";

var div = $(html)+$(varP)+$(html2);

      div.dialog(
{
    title:"Edit Plate",
    close: destroy_this_dialog
});

As it is right now the dialog doesnt come up. If I do this with only the first html variable it come up Ok but when I try to add or concatenate the others nothing happens. I am evidently not using these variables as I should. Any ideas?

Answer 1

Remove the $ where you're appending the pieces together. You want to append the strings into a single object.

 var div = $(html + varP + html2);