Hide People Picker fields in SharePoint Designer 2010 - javascript

I am trying to use some custom javascript in a CEWP to hide and show some fields when a dropdown value is selected. I have managed to hide the TextBox ("Your Name") but cannot hide the "Select Name" or "Supervisor's Name" fields - these two are people pickers. I have tried to apply some logic found elsewhere, but i still cannot find the controls.
Here is my Javascript code :
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("hideFieldsOnStart");
function hideFieldsOnStart() {
//hide the control at start
var nameID = getTagFromIdentifierAndTitle("input","TextField","Your Name");
var control = getTagFromIdentifierAndTitle("Textarea","UserField_downlevelTextBox","Select Name");
var supername = getTagFromIdentifierAndTitle("Textarea","UserField_downlevelTextBox","Supervisor Name");
//Hide the Course Material field by default
nameID.parentNode.parentNode.parentNode.style.display="none";
control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
//supername.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
//add an onchange event to the dropdown
getTagFromIdentifierAndTitle("select","DropDownChoice","Do you have access to Email?").attachEvent("onchange", ChangeEvent);
}
function ChangeEvent()
{
//get the dropdown
var dropDown = getTagFromIdentifierAndTitle("select","DropDownChoice","Do you have access to Email?");
//get the selected value
var option = dropDown.options[dropDown.selectedIndex].text;
//get the control
var txtName = getTagFromIdentifierAndTitle("Input","TextField","Your Name");
//var selectSuper = getTagFromIdentifierAndTitle("div","People Picker","Supervisor Name");
//var selectName = getTagFromIdentifierAndTitle("div","People Picker","Select Name");
//show hide based on your condition
if(dropDown.options[dropDown.selectedIndex].text == "No")
{
//selectSuper.parentNode.parentNode.parentNode.style.display="";
txtName.parentNode.parentNode.parentNode.style.display="";
//selectName.parentNode.parentNode.parentNode.style.display="none";
}
else
{
//selectSuper.parentNode.parentNode.parentNode.style.display="none";
txtName.parentNode.parentNode.parentNode.style.display="none";
//selectName.parentNode.parentNode.parentNode.style.display="";
}
}
//this gets the field based on title identifier and tagname
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}
}
return null;
}
</script>
And here is the code for my page :
<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param name="dvt_apos">&apos;</xsl:param>
<xsl:param name="ManualRefresh"></xsl:param>
<xsl:variable name="dvt_1_automode">0</xsl:variable>
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
<xsl:choose>
<xsl:when test="($ManualRefresh = 'True')">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<xsl:call-template name="dvt_1"/>
</td>
<td width="1%" class="ms-vb" valign="top">
<img src="/_layouts/images/staticrefresh.gif" id="ManualRefresh" border="0" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel')}" alt="Click here to refresh the dataview."/>
</td>
</tr>
</table>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="dvt_1"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">ListForm</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<div>
<span id="part1">
<table border="0" width="100%">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</table>
</span>
<SharePoint:AttachmentUpload runat="server" ControlMode="New"/>
<SharePoint:ItemHiddenVersion runat="server" ControlMode="New"/>
</div>
</xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<tr>
<td class="ms-toolbar" nowrap="nowrap">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap">
<SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1"/>
</td>
<td class="ms-separator">
<xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:nbsp-preserve="yes" disable-output-escaping="yes">&nbsp;</xsl:text>
</td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ms-toolbar" nowrap="nowrap">
<SharePoint:FormToolBar runat="server" ControlMode="New"/>
</td>
</tr>
<xsl:call-template name="dvt_1.rowedit">
<xsl:with-param name="Pos" select="concat('_', position())" />
</xsl:call-template>
<tr>
<td class="ms-toolbar" nowrap="nowrap">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap">
<SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton2"/>
</td>
<td class="ms-separator">
<xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:nbsp-preserve="yes" disable-output-escaping="yes">&nbsp;</xsl:text>
</td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton2"/>
</td>
</tr>
</table>
</td>
</tr>
</xsl:template>
<xsl:template name="dvt_1.rowedit">
<xsl:param name="Pos" select="position()"/>
<tr>
<td>
<table border="0" cellspacing="0" width="100%">
<tr><td width="190px" valign="top" class="ms-formlabel"><span id="part2"><H3 class="ms-standardheader"><nobr>Do you have access to Email?<span class="ms-formvalidation"> *</span></nobr></H3></span></td>
<td width="400px" valign="top" class="ms-formbody"><span id="part8"><SharePoint:FormField runat="server" id="FormField1" ControlMode="New" FieldName="Do_x0020_you_x0020_have_x0020_ac" __designer:bind="{ddwrt:DataBind('i',concat('ff13',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Do_x0020_you_x0020_have_x0020_ac')}" /></span></td>
</tr>
<tr><td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader"><nobr>Name<span class="ms-formvalidation"> *</span></nobr></H3></td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Your_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Your_x0020_Name')}" /></td>
</tr><tr><td width="190px" valign="top" class="ms-formlabel"><span id="part10"><H3 class="ms-standardheader"><nobr>Name<span class="ms-formvalidation"> *</span></nobr></H3></span></td><td width="400px" valign="top" class="ms-formbody"><span id="part11"><span id="part9"><SharePoint:FormField runat="server" id="FormField2" ControlMode="New" FieldName="Select_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff14',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Select_x0020_Name')}" /></span></span></td></tr><tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Supervisor&apos;s Name<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Supervisor_x0027_s_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Supervisor_x0027_s_x0020_Name')}"/><SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Supervisor_x0027_s_x0020_Name" ControlMode="New" /></td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Department<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="NewColumn1" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#NewColumn1')}"/></td>
</tr>
<tr><td width="190px" valign="top" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>Incident Option<span class="ms-formvalidation"> *</span></nobr></H3></td><td width="400px" valign="top" class="ms-formbody"><SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="New" FieldName="Incident_x0020_Option" __designer:bind="{ddwrt:DataBind('i',concat('ff5',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Incident_x0020_Option')}" /><SharePoint:FieldDescription runat="server" id="ff5description{$Pos}" FieldName="Incident_x0020_Option" ControlMode="New" /></td></tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Department Location<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="NewColumn10" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#NewColumn10')}"/>
<SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="NewColumn10" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Location of Incident<span class="ms-formvalidation"> *</span></nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="New" FieldName="Incident_x0020_Location" __designer:bind="{ddwrt:DataBind('i',concat('ff7',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Incident_x0020_Location')}"/>
<SharePoint:FieldDescription runat="server" id="ff7description{$Pos}" FieldName="Incident_x0020_Location" ControlMode="New"/></td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Description
</nobr>
</H3></td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff8{$Pos}" ControlMode="New" FieldName="Description" __designer:bind="{ddwrt:DataBind('i',concat('ff8',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Description')}"/>
<SharePoint:FieldDescription runat="server" id="ff8description{$Pos}" FieldName="Description" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Severity<span class="ms-formvalidation"> *</span></nobr>
</H3><p class="ms-standardheader">
<xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:nbsp-preserve="yes" disable-output-escaping="yes">&nbsp; </xsl:text> </p><table><tr><td style="width: 21px; height: 21px"><img alt="" src="../../SiteAssets/Information_icon1.gif" width="20" height="20" /></td><td style="width: 130px"><span id="part5" style="font-weight: normal">Click here f<span style="color: #0072BC">or a guide</span></span></td></tr></table></td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff9{$Pos}" ControlMode="New" FieldName="Risk_x0020_Severity" __designer:bind="{ddwrt:DataBind('i',concat('ff9',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Risk_x0020_Severity')}"/>
<SharePoint:FieldDescription runat="server" id="ff9description{$Pos}" FieldName="Risk_x0020_Severity" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Likelihood<span class="ms-formvalidation"> *</span>
</nobr>
</H3><p class="ms-standardheader">
<xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:nbsp-preserve="yes" disable-output-escaping="yes">&nbsp;
</xsl:text> </p><span id="part6"><table><tr><td style="width: 21px; height: 21px"><img alt="" src="../../SiteAssets/Information_icon1.gif" width="20" height="20" /></td><td style="width: 130px"><span id="part7" style="font-weight: normal">Click here f<span style="color: #0072BC">or a guide</span></span></td></tr></table></span></td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff10{$Pos}" ControlMode="New" FieldName="Likelihood" __designer:bind="{ddwrt:DataBind('i',concat('ff10',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Likelihood')}"/>
<SharePoint:FieldDescription runat="server" id="ff10description{$Pos}" FieldName="Likelihood" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader"><nobr>Status<span class="ms-formvalidation"> *</span></nobr></H3></td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff11{$Pos}" ControlMode="New" FieldName="Status" __designer:bind="{ddwrt:DataBind('i',concat('ff11',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Status')}"/>
<SharePoint:FieldDescription runat="server" id="ff11description{$Pos}" FieldName="Status" ControlMode="New" /></td>
</tr><tr id="idAttachmentsRow"><td width="20%" valign="top" class="ms-formlabel" nowrap="true"><SharePoint:FieldLabel ControlMode="New" FieldName="Attachments" runat="server" /></td><td width="80%" valign="top" class="ms-formbody"><SharePoint:FormField runat="server" id="AttachmentsField" ControlMode="New" FieldName="Attachments" __designer:bind="{ddwrt:DataBind('i','AttachmentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Attachments')}" /><script>
var elm = document.getElementById("idAttachmentsTable");
if (elm == null || elm.rows.length == 0)
document.getElementById("idAttachmentsRow").style.display=&apos;none&apos;;
</script></td></tr>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<tr>
<td colspan="99" class="ms-vb">
<span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(#ID))" ddwrt:ammode="view"></span>
</td>
</tr>
</xsl:if>
</table>
</td>
</tr>
</xsl:template>
</xsl:stylesheet> </Xsl>
If someone could point me in the right direction with how to hide these two fields and show them when "Yes" is selected, then i would really appreciate it.
Thanks.

I see this is an old post but I thought it might be good to provide an answer since I'm sure many people have this issue.
First, I am quoting from my blog so for more information see here - SharePoint Gypsy - How to Manipulate the People Picker Control
Here is the entire code block:
//This runs the function when the form first loads
spBodyOnLoadFunctionNames.push("validatePeoplPicker");
function validatePeoplPicker()
{
var assignedToSubmitter = getSPPeoplePicker("MyPeoplePicker");
//This function finds and returns the proper SharePoint control's HTML
getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i = 0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == ""
tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}}
return null;
}
//This function finds the People Picker control's Parent element
function getParentElementByTagName(baseNode, tagName) {
var currNode;
if (baseNode !== null) {
currNode = baseNode.parentNode;
while ((currNode !== null) && (currNode.nodeName != tagName)) {
currNode = currNode.parentNode;
}
return currNode;
}
else {
return null;
}}
//This function finds the People Picker control's Cell element
function getPeoplePickerCell(columnName) {
var search = 'FieldName="' + columnName + '"';
var nodes = document.getElementsByTagName("TEXTAREA");
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].title == "People Picker") {
var outerCell = getParentElementByTagName(nodes[i], "SPAN").parentNode.parentNode;
if (outerCell.innerHTML.indexOf(search) > 0) {
return nodes[i].parentNode;
}}}
return null;
}
//This function returns the People Picker object
function getSPPeoplePicker(columnName)
{
var cell = getPeoplePickerCell(columnName);
if(cell !== null)
{
return cell.childNodes[0].innerHTML;
}
else
{
return null;
} } }
I hope that helps!
Tom Molskow
SharePoint Gypsy

Related

Refresh partial page on user control text change event

I have one Usercontrol Textbox with some radio buttons.
I want to refresh some of these buttons when I change the usercontrol textbox value.
In short, when I select Specific button it displays RM row & for All radio button selection it hides RM row. After selecting RM & checking Client radio button, it again displays two radio button below. By checking any of radio it displays the grid data below. For Prospect & Closed button it displays grid data below after checking it.
For all radio all the functionality is same except RM selection.
My all functionality is working as expected just need to add one more addition in it.
Now I want to refresh 5 radio buttons(Client, Prospect, Closed, Client, Family) which are below RM user control screen when I change the RM name from usercontrol textbox.
I tried using update panel but it couldn't work as it got mess for me so reverted all that changes. My current working code is as below:
<script type="text/javascript">
$110 = $;
$110(document).ready(function () {
//intial setting of panel
rdoBtnShowHidePanels();
$110("#trClient").hide();
$110("#btnSendSms").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='SelectRM']").change(function () {
$110("#trClient").hide();
$110("#jqxContact").hide();
$110("#trCommMode").hide();
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("#trRM").show();
$("input[id$=mcscRMSearch_txtSearch]").val('');
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
if (ValidateRMSelection() == true) {
$110("#trRM").show();
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
}
}
else {
alert("Select RM");
$110("#trClient").hide();
$110("#trCommMode").hide();
$110("#jqxContact").hide();
return;
}
}
})
}
else {
$110("#trRM").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#jqxContact").hide()
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
}
})
}
})
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="scmPhoneBook" runat="server">
</asp:ScriptManager>
<table id="Table1" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clsTitle" align="center" style="height: 25px">Contacts
</td>
</tr>
<tr>
<td class="clstd" align="left" style="width: 100%" colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="RdoSpecific" runat="server" GroupName="SelectRM" Text="Specific"></asp:RadioButton>
<asp:RadioButton ID="RdoAll" runat="server" GroupName="SelectRM" Text="All"></asp:RadioButton>
</td>
</tr>
<tr id="trRM">
<td class="clstd" width="2%">RM
</td>
<td class="clstd" width="98%">
<mwimcs:MultiColumnSearchControl
runat="server"
ID="mcscRMSearch"
CssClass="clsTextbox"
Width="300"
ControlType="137"
DataTextField="usr_name"
DataValueField="usr_id"
Top="-15px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdoClientAll" runat="server" GroupName="First" Text="Client"></asp:RadioButton>
<asp:RadioButton ID="RdoProspect" runat="server" GroupName="First" Text="Prospect"></asp:RadioButton>
<asp:RadioButton ID="RdoClosed" runat="server" GroupName="First" Text="Closed"></asp:RadioButton>
</td>
</tr>
<tr id="trClient">
<td class="clstd" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdofamily" runat="server" GroupName="a" Text="Family"></asp:RadioButton>
<asp:RadioButton ID="rdoclient" runat="server" GroupName="a" Text="Client"></asp:RadioButton>
</td>
</tr>
<tr>
<td valign="top">
<div id="jqxContact"></div>
<asp:Panel ID="PnlClient" runat="server" Width="100%">
</asp:Panel>
</td>
<asp:DataGrid ID="dgCompany" runat="server" Width="100%" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="True" PageSize="25">
</asp:DataGrid>
</tr>
</table>
<br />
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr height="10px">
<td class="clsLabel_err" colspan="2">
<asp:Label ID="lblErrorMsg" runat="server" CssClass="clsLabel_err"></asp:Label>
</td>
</tr>
<tr style="width: 100%" id="trCommMode">
<td class="clstdnext" style="width: 25%">Communication Mode:</td>
<td class="clstdnext" align="left" valign="middle">
<asp:RadioButtonList ID="rbtnlistSmsMail" runat="server" RepeatDirection="Horizontal"
Font-Names="Verdana" Font-Size="11px">
<asp:ListItem>
SMS
</asp:ListItem>
<asp:ListItem>
E-Mail
</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td colspan="2" id="pnlEmailDtls" runat="server">
<asp:Panel ID="pnlpnlEmailDtls" runat="server" Width="100%">
<table id="Table3" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">Email From</td>
<td class="clsTd" style="width: 80%">
<cc1:MultiColumnComboBox ID="mmcEmail" runat="server" CssClass="clstd" HeaderCSS="clsReportTitle"
ItemsCSS="clstdnext" VerticalScrolling="True" DownArrowButtonCSS="clsButton"
DownArrowImageURL="url(Images/downarrow.gif)" DownArrowButtonHeight="12" DownArrowButtonWidth="20"
TextBoxCSS="clsTextbox">
<Columns>
<cc1:Column ColumnWidth="" DataField="email" KeyColumn="True" HeaderText="Email"></cc1:Column>
<cc1:Column ColumnWidth="" DataField="smtp" KeyColumn="False" HeaderText="SMTP"></cc1:Column>
</Columns>
</cc1:MultiColumnComboBox>
</td>
</tr>
<tr>
<td class="clstdnext" style="width: 20px">Subject</td>
<td class="clstdnext" style="width: 80px">
<asp:TextBox ID="txtSubject" runat="server" CssClass="clsTextbox" Width="327px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="clstd">Attachment 1)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload1" style="width: 250px" type="file" size="48" runat="server"
name="fileupload1" />
</td>
</tr>
<tr>
<td class="clstdnext">Attachment 2)
</td>
<td class="clstdnext">
<input class="clsTextbox" id="fileupload2" style="width: 250px" type="file" size="48" runat="server"
name="fileupload2" />
</td>
</tr>
<tr>
<td class="clstd">Attachment 3)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload3" style="width: 250px" type="file" size="48" runat="server"
name="fileupload3" />
</td>
</tr>
<tr>
<td class="clsReportTitle" align="center" style="width: 100%" colspan="2">Message
</td>
</tr>
<tr>
<%--<TD width="100%" colSpan=2>
<asp:TextBox id=txtMessage runat="server" CssClass="clsTextbox" Width="100%" TextMode="MultiLine" Height="250px"></asp:TextBox></TD>--%>
<td align="left" class="clstd" colspan="2">
<ftb:FreeTextBox ID="FreeTextBox1" EnableHtmlMode="false" ToolbarLayout="ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu,FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline,Strikethrough, Superscript, Subscript|InsertImageFromGallery, CreateLink, Unlink, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull,BulletedList, NumberedList, Indent, Outdent,Cut, Copy, Paste, Delete, Undo, Redo,Save,InsertRule, InsertDate,InsertTime,Preview"
Height="300px" runat="server" Width="100%">
</ftb:FreeTextBox>
</td>
</tr>
<tr>
<td style="width: 100%" class="clstd_btn" colspan="2">
<%--<input id="BtnSendEmail" type="button" class="clsButton" value="Send"/>--%>
<asp:Button ID="BtnSendEmail" runat="server" OnClientClick="return ValidationBeforeEmailSendClick();" CssClass="clsButton" Text="Send"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="2" id="pnlSmsDtls" runat="server">
<asp:Panel ID="pnlpnlSmsDtls" runat="server" Width="100%">
<table cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">SMS Type
</td>
<td class="clstd">
<asp:DropDownList ID="ddlSmsType" CssClass="clsCombobox" runat="server">
<asp:ListItem Value="0">---Select---</asp:ListItem>
<asp:ListItem Value="1">Upcoming maturity/due date</asp:ListItem>
<asp:ListItem Value="2">New product offerings</asp:ListItem>
<asp:ListItem Value="3">Pick of the day</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext">SMS Text
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext" style="height: 40px">
<asp:TextBox ID="txtSmsText" runat="server" CssClass="clsTextbox" TextMode="MultiLine"
Width="100%" Height="100px">
</asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" class="clstd_btn">
<input type="button" id="btnGo" value="Save" class="clsButton" />
<%--<asp:Button ID="btnGo" runat="server" CssClass="clsButton" Text="Save" />--%>
<asp:Button ID="btnSendSms" runat="server" CssClass="clsButton" Text="Send SMS"
Width="72px"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
<input type="hidden" id="hdnType" />
</form>
Its argent... kindly please help.
Thanks in advance.

Why no CSS showing after printing using Window.Print()?

I want to print one particular div in my page. And to do so I am using the following code:
<script type="text/javascript">
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('<style type="text/css" media="all">.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}</style>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
<asp:Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClientClick="javascript:printDiv('mydiv')" />
HTML Table:
<table style="width: 899px;" align="center" cellpadding="4" cellspacing="3">
<tr>
<td style="width: 50%;">
<%-- <asp:Label ID="lblcandidateid" runat="server" Text="Label" CssClass="design1" ></asp:Label>--%>
</td>
<td style="width: 50%">
<%--<asp:Image ID="candidateimg" runat="server" ImageUrl="img/avatar1_small.jpg" ImageAlign="Right" Width="90px" Height="83px" />--%></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design" style="background-color: #A4A4A4;">Personal Details</b>
<%-- <asp:Label ID="txtcandidatename" runat="server" Text="Label" CssClass="design1">
</asp:Label>--%>
</td>
</tr>
<tr>
<td><b class="design">Name: </b><asp:Label ID="txtcandidatename" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
<td><b class="design">Nationality: </b><asp:Label ID="txtnationality" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td><b class="design">Languages: </b><asp:Label ID="txtlanguage" runat="server" Text="Label" CssClass="design1"></asp:Label>
</td>
<td><b class="design">Current Address: </b><asp:Label ID="txtcurrentaddress" runat="server" CssClass="design1" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td><b class="design">Marital Status: </b><asp:Label ID="txtmaritalstatus" runat="server" Text="Label"></asp:Label>
</td>
<td><b class="design">Date of Birth: </b><asp:Label ID="txtdob" runat="server" Text="Label" CssClass="design1"></asp:Label>
</td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Objective</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcandidateobjective" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2" style="background-color: #A4A4A4;"><b class="design">Career Profile</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcareerprofile" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Key Areas of Expertise</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtskills" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Professional Experience</b></td>
</tr>
<tr>
<td>
<asp:Label ID="txtcompanyname" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
<td>
<asp:Label ID="txtdate" runat="server" Text="Label" CssClass="design1" align="right"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2"><i class="design">
<asp:Label ID="txttitle" runat="server" Text="Label" CssClass="design1"></asp:Label></i>
</td>
</tr>
<tr>
<td colspan="2"><b class="design"><i>Key Responsibilities</i></b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtkeyresponsibilities" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design"><i>Key Achievements</i></b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtkeyachievements" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Education</b></td>
</tr>
<tr>
<td colspan="2"><b class="design">Education: </b>
<asp:Label ID="txteducation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Location: </b>
<asp:Label ID="txtlocation" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Major: </b>
<asp:Label ID="txtmajor" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td colspan="2"><b class="design">Year of Passing: </b>
<asp:Label ID="txtpassing" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">Certification</b></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="txtcertification" runat="server" Text="Label" CssClass="design1"></asp:Label></td>
</tr>
<tr>
<td class="td" style="border: solid 1px;" colspan="2"><b class="design">References</b></td>
</tr>
<tr>
<td>Will be presented upon request</td>
</tr>
</table>
I am getting like this into the printing window:
But this is my original design:
But when it prints it is not taking any CSS style specified for each label or TD. Please help me on this. Thanks.
Try creating the sytle element using document.createElement('style').
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
var style = document.createElement('style');
var css = '.labelalign {float: right !important;}.design {font-size: 16px;}.design1 {font-size: 15px;}.td {background-color: #A4A4A4;}';
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head = WindowObject.document.head || WindowObject.document.getElementsByTagName('head')[0];
head.appendChild(style);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
Ok , here is your working code , i have added test table with small test style , updated to your html
<Button ID="Btnpdfprint" runat="server" Text="Print to PDF" OnClick="printDiv('mydiv')" />click</button>
<script type="text/javascript">
function printDiv(divID) {
var DocumentContainer = document.getElementById(divID);
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head>');
WindowObject.document.writeln('<style type="text/css" media="all">#mydiv{color:red;font-size:30px; background-color: #1a4567 !important;-webkit-print-color-adjust: exact; }</style>');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln('<div id="mydiv"><table><tr><td>table for test</td></tr></table></div>');
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
notes : i just replaced this line WindowObject.document.writeln(DocumentContainer.innerHTML);
with the html directly
and i have added small css attribute to the style
-webkit-print-color-adjust: exact;

HTML, text and input, to go up

I have this HTML code:
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>
Titel
<span class="ms-formvalidation"> *</span>
</nobr>
</H3>
</td>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Textkörper</nobr>
</H3>
</td>
</tr>
<tr>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Title')}"/>
<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
</td>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Body" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Body')}"/>
<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Body" ControlMode="New"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel" >
<H3 class="goup1">
<nobr>Läuft ab</nobr>
</H3>
</td>
</tr>
<tr>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Expires" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)),'#Expires')}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Expires" ControlMode="New"/>
</td>
</tr>
</table>
Textkörper have big input and "Läuft ab" is going a lot down.
How can I go up with "Läuft ab"? Some help with code please.
Here I've aded aded a new code so you can see full code. Thank you
Why don't you try and use margin attributes. That way you could influence the distance between two components.

remove table tr that have specific content

I have the following form inside SharePoint 2013 web application :-
I need to remove all the Table <tr> except the ones that start with "name" & "title". so can anyone adivce how i can achieve this ? . here is part of the markup for the above image (it show two Tr on that have Content Type (should be removed), while the other contain Name ):-
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
Now i have jquery version 1.7 loaded inside the web application, but i prefer to achieved using pure javaScript.
Thanks
EDIT here is a more detailed markup :-
<div id="contentRow">
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
<div id="contentBox" aria-relevant="all" aria-live="polite">
<div id="notificationArea" class="ms-notif-box"></div>
<div id="DeltaPageStatusBar">
<div id="customcalender"></div>
<div id="DeltaPlaceHolderMain">
<a id="mainContent" tabindex="-1" name="mainContent"></a>
<div style="padding-left:5px">
<table id="onetIDListForm" class="ms-core-tableNoSpace">
<tbody>
<tr>
<td>
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ2" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div id="WebPartWPQ2" class="noindex " style="" allowdelete="false" width="100%" haspers="false" webpartid="6c7d849e-da6b-4138-be9f-b99bde542065">
<table class="ms-informationbar" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-bottom: 5px;">
<div id="listFormToolBarTop" style="display: none;">
<span style="display:none">
<span></span>
<table width="100%">
<tbody>
<tr>
<td width="100%" valign="top">
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<tr>
When in doubt, filter is your friend:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jjzx6mge/4/
$('#formTbl tr').filter(function () {
return !$(".ms-standardheader", this).text().match(/Name|Title/i);
}).remove();
The result returned of a function passed to filter is a boolean value telling which items to retain (truthy), or which to exclude (falsey).
This one targets only rows that have the requested text in the ms-standardheader classed element.
It also only targets a specific inner table to avoid the case of deep searching from the top level table and wiping out entire tables within it.
While you can do this with plain old JS, significantly more code is required.As you already have a version of jQuery installed, it makes sense to use it.
This would work:
$(function() {
$('#formTbl tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (!frstVal.match(/name|title/i)) {
$(this).remove()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="formTbl" class="ms-formtable" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 8px;">
<tbody>
<tr>
<td class="ms-formlabel" valign="top" nowrap="true">
<h3 class="ms-standardheader">Content Type</h3>
</td>
<td class="ms-formbody" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Title
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<h3 class="ms-standardheader">
<nobr>
Name
<span class="ms-accentText" title="This is a required field."> *</span>
</nobr>
</h3>
</td>
<td class="ms-formbody" width="350px" valign="top">
</tr>
<tr>
<tr>
<td class="ms-formlabel" width="113px" valign="top" nowrap="true">
<td class="ms-formbody" width="350px" valign="top">
</tr>
This will remove every tr that has a .ms-standardheader element that contains the text Name or Title
$('#formTbl tr').each(function() {
var that = $(this);
var label = that.find('.ms-standardheader').text();
if (label.indexOf('Name') != -1 || label.indexOf('Title') != -1) {
that.remove();
}
});
And here I am, doing this the good ol' plain JS way, since you've asked for it :)
http://jsfiddle.net/m53esfpo/3/
Edit: Updated code and fiddle (thanks #TrueBlueAussie)
Removes every tr except the ones that start with name or title.
var t = document.getElementById('formTbl');
for (var i = 0; i < t.getElementsByTagName("tr").length; i++) {
var s = t.getElementsByTagName("tr")[i].getElementsByClassName('ms-formlabel');
if (s.length > 0) {
if (s[0].innerText.indexOf('Name') < 0 && s[0].innerText.indexOf('Title') < 0) {
t.getElementsByTagName("tr")[i].parentNode.removeChild(t.getElementsByTagName("tr")[i]);
}
}
}
You can do it with this:
$("#formTbl tr td h3").not("h3:contains('Name'):contains('Title')").closest('tr').remove();

onclick="parent.location='#CustomerInformation'" is working good in IE8 but not working firefox and other browser [duplicate]

This question already has answers here:
onclick="parent.location is not working in firefox and Chrome
(2 answers)
Closed 9 years ago.
GQM Order ID:
Current Status:
<TD class="bold" valign="top" nowrap align="left" width="7%">
Customer Name:</TD>
<TD valign="top" nowrap align="left" width="19%"><logic:write
name="orderBean" property="customerLastName" />,<logic:write
name="orderBean" property="customerFirstName" /></TD>
<TD class="bold" valign="top" nowrap align="left" width="7%">
Shared Customer Name:</TD>
<TD valign="top" nowrap align="left" width="19%"><logic:write
name="orderBean" property="shrCustomerLastName" />,<logic:write
name="orderBean" property="shrCustomerFirstName" /> </TD>
</TR> <TR>
<TD class="bold" valign="top" nowrap align="left" width="7%">Customer
Email:</TD>
<TD valign="top" nowrap align="left" width="19%"><logic:write
name="orderBean" property="emailAddr" /></TD>
<TD class="bold" valign="top" nowrap align="left" width="7%">Shared Customer
Email:</TD>
<TD valign="top" nowrap align="left" width="19%"><logic:write
name="orderBean" property="shrEmailaddr" /></TD> </TR> <TR>
<TD class="bold" valign="top" nowrap align="left" width="12%">Phone
Number:</TD>
<TD valign="top" nowrap align="left" width="13%"><logic:write
name="orderBean" property="phone" /></TD>
<TD class="bold" valign="top" nowrap align="left" width="12%">Shared Phone
Number:</TD>
<TD valign="top" nowrap align="left" width="13%"><logic:write
name="orderBean" property="shrPhone" /></TD> </TR> </TBODY> </TABLE> </DIV> <DIV align="center"> <TABLE
class="PatientBar" height="18" cellspacing="0" cellpadding="0"
width="98%" border="0"> <TBODY> <TR><TD> </TD> </TR>
</TBODY> </TABLE> </DIV> <DIV align="center"> <TABLE
class="PatientBar" height="18" cellspacing="0" cellpadding="0"
width="98%" border="0"> <TBODY>
<TR>
<TD class="bold" valign="top" nowrap align="left" width="14%"></TD>
<TD valign="top" nowrap align="left" width="12%"></TD>
<TD class="bold" valign="top" nowrap align="left" width="14%"></TD>
<TD valign="top" nowrap align="left" width="12%"></TD>
<TD class="bold" valign="top" nowrap align="left" width="12%">NPT Order:</TD>
<TD valign="top" nowrap align="left" width="19%"><logic:write
name="orderBean" property="nptInd" /></TD> </TR> <TR>
<TD class="bold" valign="top" nowrap align="left" width="14%">Affiliate:</TD>
<TD valign="top" nowrap align="left" width="12%"><logic:write
name="orderBean" property="affiliate" /></TD>
<TD class="bold" valign="top" nowrap align="left" width="14%">Affiliate
Order ID:</TD>
<TD valign="top" nowrap align="left" width="12%"><logic:write
name="orderBean" property="vendorOrderId" /></TD>
<TD class="bold" valign="top" nowrap align="left" width="12%">Fulfillment
Type:</TD>
<TD valign="top" nowrap align="left" width="19%"><logic:write
name="orderBean" property="fulfillmentTypeDesc" /></TD> </TR> <TR>
<TD class="bold" valign="top" nowrap align="left" width="18%">Order
Placed Date/Time:</TD>
<TD valign="top" nowrap align="left" width="16%"><logic:write
name="orderBean" property="orderPlacedDttm"
format="MM/dd/yyyy h:mm a" /></TD>
<TD class="bold" valign="top" nowrap align="left" width="18%">Promise
Date/Time:</TD>
<TD valign="top" nowrap align="left" width="16%"><logic:write
name="orderBean" property="promisedDttm" format="MM/dd/yyyy h:mm a"
nullValue="<%=WAConstants.NULL_VALUE_DATE%>" /></TD>
<TD class="bold" valign="top" nowrap align="left" width="18%">Store
Number:</TD>
<TD valign="top" nowrap align="left" width="19%"><logic:write
name="orderBean" property="storeNbr"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD> </TR>
<TR>
<TD class="bold" valign="top" nowrap align="left">
Pay Type:
</TD>
<TD valign="top" nowrap align="left">
<logic:write name="orderBean" property="payType" nullValue="<%=WAConstants.NULL_VALUE_NA%>" />
</TD>
<TD class="bold" valign="top" nowrap align="left">
Pod Location:
</TD>
<TD valign="top" nowrap align="left">
<logic:write name="orderBean" property="podLocation" nullValue="<%=WAConstants.NULL_VALUE_NA%>" />
</TD>
<TD class="bold" valign="top" nowrap align="left">
Envelope Id:
</TD>
<TD valign="top" nowrap align="left">
<logic:write name="orderBean" property="envelopeId" nullValue="<%=WAConstants.NULL_VALUE_NA%>" />
</TD>
</TR> </TBODY> </TABLE> </DIV>
<table> <TBODY> <tr>
<td height="1"></td> </tr> </TBODY> </table>
<logic:notEmpty name="orderBean"> <table class="TheBox"
cellspacing="0" cellpadding="0" align="center"> <TBODY>
<tr>
<td><wa:permission
functionName="<%=WARequestFunctionName.DIGITALPHOTOGQM_ORDER_READ%>">
<input type="button" value="Refresh" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" onclick="onClickRefresh()">
</wa:permission> <logic:equal name="orderBean"
property="fulfillmentTypeCd"
value="<%=CodesDecodes.FULFILLMENT_TYPE_STORE%>">
<logic:notEqual name="orderBean" property="statusCd"
value="<%=CodesDecodes.ORDER_STATUS_CANCELLED%>">
<logic:notEqual name="orderBean" property="statusCd"
value="<%=CodesDecodes.ORDER_STATUS_SOLD%>">
<wa:permission
functionName="<%=WARequestFunctionName.DIGITALPHOTOGQM_ORDER_CANCEL%>">
<INPUT type="button" value="Cancel Order" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="Cancel Order"
onclick="onClickCancel()">
</wa:permission>
</logic:notEqual>
</logic:notEqual>
<%
if((String)session.getAttribute("isMobileVendor")=="true"){ %>
<wa:permission
functionName="<%=WARequestFunctionName.DIGITALPHOTOGQM_ORDER_RESEND%>">
<INPUT type="button" value="Resend Mobile Order" class="buttonSuper"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="Resend Order" id = "Resend Order"
onclick="onClickResendMobile()">
</wa:permission>
<% } else{%>
<wa:permission
functionName="<%=WARequestFunctionName.DIGITALPHOTOGQM_ORDER_RESEND%>">
<INPUT type="button" value="Resend Order" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="Resend Order" id = "Resend Order"
onclick="onClickResend()">
</wa:permission>
<%}%>
<wa:permission
functionName="<%=WARequestFunctionName.DIGITALPHOTOGQM_ORDER_RESEND%>">
<INPUT type="button" value="Resend Status" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="Resend Status"
onclick="onClickResendStatus()">
</wa:permission>
</logic:equal> <wa:permission
functionName="<%=WARequestFunctionName.DIGITALPHOTOGQM_ORDER_ERROR_DETAIL_READ%>">
<INPUT type="button" value="Error Details" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)"
onclick="onClickErrorDetail()">
</wa:permission>
<wa:permission
functionName="<%=WARequestFunctionName.DIGITALPHOTOGQM_ORDER_READ%>">
<INPUT type="button" value="Order Details" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="orderDetails"
onclick="onClickRefresh()">
</wa:permission> <INPUT type="button" value="Customer Details"
class="buttonSuper" onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="customerDetails"
style="" onclick="parent.location='#CustomerInformation'"> <INPUT
type="button" value="Status Details" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="statusDetails"
onclick="parent.location='#StatusInformation'"> <INPUT
type="button" value="Refund Details" class="buttonBig"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" name="refundDetails01"
onclick="parent.location='#RefundInformation'">
<input type="button" value="View Order URL's" class="buttonSuper"
onmouseover="onMouseOverButton(this)"
onmouseout="onMouseOutButton(this)" onclick="showOrderUrls();">
</td>
</tr> </TBODY> </table> </logic:notEmpty>
<table> <TBODY> <tr>
<td height="1"></td> </tr> </TBODY> </table>
<div id="mainContent" style="overflow: auto; width: auto; height:
auto"> <div class="error" id="errorText" style="display:
none"> This is where the error goes. Way to go on
generating an error.</div> <table class="SectionHeader1"
id="tableAddress"> <TBODY> <tr>
<td>Order Information</td> </tr> </TBODY> </table>
<table> <TBODY> <tr>
<td height="1"></td> </tr> </TBODY> </table>
<table class="TheBox"> <TBODY> <tr>
<td>
<DIV align="right">
<TABLE border="0" style="border-collapse: collapse" width="96%"
id="custInfoTable" class="BoxedIn" bgcolor="#ffffff">
<TBODY>
<TR>
<TH align="left" width="15%">WAG Customer Number:</TH>
<TH align="left" width="17%">Affiliate Customer ID:</TH>
<TH align="left" width="17%">Campaign ID:</TH>
<TH align="left" width="16%">PC+ Order ID:</TH>
<TH align="left" height="32" width="15%">Order Type:</TH>
</TR>
<TR class="onRow" id="custInfoTableR1">
<TD align="left" height="34" width="137"><logic:write
name="orderBean" property="walgreensCustomerId"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" height="34" width="163"><logic:write
name="orderBean" property="vendorCustomerId" /></TD>
<TD align="left" height="34" width="155"><logic:write
name="orderBean" property="campaignIdDesc"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" height="34" width="147"><logic:write
name="orderBean" property="pcpOrderId"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" width="137"><logic:write name="orderBean"
property="orderTypeDesc" /></TD>
</TR>
<TR class="onRow">
<TH align="left" height="32" width="17%">Last Four Digits of
Credit Card:</TH>
<TH align="left" height="32" width="17%">Credit Card Expiration
(MM/YY):</TH>
<TH align="left" height="32" width="16%">Shipping Method:</TH>
<TH align="left" height="32" width="169">Carrier:</TH>
<TH align="left" height="32" width="169">Tracking Number:</TH>
</TR>
<TR class="onRow">
<TD align="left" width="163"><logic:write name="orderBean"
property="creditCardNbrL4c"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" width="155"><logic:write name="orderBean"
property="creditCardExpiration"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" width="147"><logic:write name="orderBean"
property="shipToMethodDesc"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" width="169"><logic:write name="orderBean"
property="carrierDesc"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" width="169"><logic:write name="orderBean"
property="trackingNbr"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
</TR>
<TR class="onRow" bgcolor="#ffffff">
<TH align="left" width="15%">Created By:</TH>
<TH align="left" width="17%">Create Date/Time:</TH>
<TH align="left" width="17%">Last Updated By:</TH>
<TH align="left" width="16%">Update Date/Time:</TH>
<TD align="left" bgcolor="#ffffff"></TD>
</TR>
<TR class="onRow" bgcolor="#ffffff">
<TD align="left" height="17" width="137"><logic:write
name="orderBean" property="createUserId" /></TD>
<TD align="left" height="17" width="163"><logic:write
name="orderBean" property="createDttm"
format="MM/dd/yyyy h:mm a" /></TD>
<TD align="left" height="17" width="155"><logic:write
name="orderBean" property="updateUserId"
nullValue="<%=WAConstants.NULL_VALUE_NA%>" /></TD>
<TD align="left" height="17" width="147"><logic:write
name="orderBean" property="updateDttm"
format="MM/dd/yyyy h:mm a"
nullValue="<%=WAConstants.NULL_VALUE_DATE%>" /></TD>
<TD align="left" height="17" bgcolor="#ffffff"></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</td> </tr> </TBODY> </table>
<TABLE class="TheBox" align="center"> <TBODY> <tr>
<td>
<fieldset><legend>Order Items</legend> <logic:define
id="orderItemList" name="orderBean" property="orderItemList"
scope="session" /> <wa:dbgrid id="orderItemGrid"
listBean="orderItemList" cssClass="BoxedIn" indice="i">
<wa:textcolumn dataField="gqmProductId"
headerText="GQM Product ID:" sortable="false" HAlign="left"
width="13%" />
<wa:textcolumn dataField="productDesc"
headerText="Product Description:" sortable="false" HAlign="left"
width="13%" />
<wa:textcolumn dataField="productQty"
headerText="Product Quantity:" sortable="false" HAlign="left"
width="8%" />
<wa:textcolumn dataField="unitPrice" headerText="Unit Price:"
sortable="false" HAlign="left" width="8%" dataFormat="$#,##0.00#" />
<wa:textcolumn dataField="productPriceBeforeDiscount"
headerText="Total Price before discount:" sortable="false"
HAlign="left" width="13%" dataFormat="$#,##0.00#" />
<wa:textcolumn dataField="productDiscountTotal"
headerText="Total Discount:" sortable="false" HAlign="left"
width="13%" dataFormat="$#,##0.00#" />
<wa:textcolumn dataField="productTotal" headerText="Item Total:"
sortable="false" HAlign="left" width="13%" dataFormat="$#,##0.00#" />
</wa:dbgrid>
<table>
<TBODY>
<tr>
<td height="1"></td>
</tr>
</TBODY>
</table>
<TABLE id="referralTable" class="BoxedIn" align="left">
<TBODY>
<TR class="onRow" bgcolor="#ffffff">
<TD align="left" width="13%" bgcolor="#ffffff" height="40"></TD>
<TD align="left" width="13%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD bgcolor="#ffffff" class="bold" height="21" width="13%"></TD>
<TD bgcolor="#ffffff" class="bold" height="21" width="13%">Sub
Total Price:</TD>
<TD bgcolor="#ffffff" height="21" width="13%"><logic:write
name="orderBean" property="subTotalPrice" format="$#,##0.00#" /></TD>
</TR>
<TR class="onRow" bgcolor="#ffffff">
<TD align="left" width="13%" bgcolor="#ffffff" height="40"></TD>
<TD align="left" width="13%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD bgcolor="#ffffff" class="bold" height="21" width="13%"></TD>
<TD bgcolor="#ffffff" class="bold" width="13%">Total Order
Discount:</TD>
<TD bgcolor="#ffffff" width="13%"><logic:write name="orderBean"
property="totalOrderDiscount" format="$#,##0.00#"
nullValue="<%=WAConstants.NULL_VALUE_MONEY%>" /></TD>
</TR>
<TR class="onRow" bgcolor="#ffffff">
<TD align="left" width="13%" bgcolor="#ffffff" height="40"></TD>
<TD align="left" width="13%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD bgcolor="#ffffff" class="bold" height="21" width="13%"></TD>
<TD bgcolor="#ffffff" class="bold" width="13%">Order Freight:</TD>
<TD bgcolor="#ffffff" width="13%"><logic:write name="orderBean"
property="orderFreight" format="$#,##0.00#"
nullValue="<%=WAConstants.NULL_VALUE_MONEY%>" /></TD>
</TR>
<TR class="onRow" bgcolor="#ffffff">
<TD align="left" width="13%" bgcolor="#ffffff" height="40"></TD>
<TD align="left" width="13%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD bgcolor="#ffffff" class="bold" height="21" width="13%"></TD>
<TD bgcolor="#ffffff" class="bold" width="13%">Order Tax:</TD>
<TD bgcolor="#ffffff" width="13%"><logic:write name="orderBean"
property="orderTax" format="$#,##0.00#"
nullValue="<%=WAConstants.NULL_VALUE_MONEY%>" /></TD>
</TR>
<TR class="onRow" bgcolor="#ffffff">
<TD align="left" width="13%" bgcolor="#ffffff" height="40"></TD>
<TD align="left" width="13%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD align="left" width="8%" bgcolor="#ffffff" height="21"></TD>
<TD bgcolor="#ffffff" class="bold" height="21" width="13%"></TD>
<TD bgcolor="#ffffff" class="bold" width="13%">Order Total:</TD>
<TD bgcolor="#ffffff" width="13%"><logic:write name="orderBean"
property="orderTotal" format="$#,##0.00#"
nullValue="<%=WAConstants.NULL_VALUE_MONEY%>" /></TD>
</TR>
</TBODY>
</TABLE>
</fieldset>
</td> </tr> </TBODY> </TABLE>
<table class="TheBox" align="center"> <TBODY> <tr>
<td>
<fieldset><legend>Order Promotions </legend>
<div align="center"><logic:define id="orderPromotionList"
name="orderBean" property="orderPromotionList" scope="session" />
<wa:dbgrid id="orderPromotionGrid" listBean="orderPromotionList"
cssClass="BoxedIn" indice="i">
<wa:textcolumn dataField="pluNbr" headerText="PLU Number:"
sortable="false" HAlign="left" width="13%" />
<wa:textcolumn dataField="pluDesc" headerText="PLU Description:"
sortable="false" HAlign="left" width="13%" />
<wa:textcolumn dataField="qtyApplied"
headerText="Quantity Applied:" sortable="false" HAlign="left"
width="13%" nullValue="<%=WAConstants.NULL_VALUE_NA%>" />
<wa:textcolumn dataField="TotalDiscount"
headerText="Total Discount:" sortable="false" HAlign="left"
width="13%" dataFormat="$#,##0.00#" />
</wa:dbgrid></div>
</fieldset>
</td> </tr> </TBODY> </table>
<A NAME="CustomerInformation"></A> <table class="SectionHeader1">
<TBODY> <tr>
<td>Customer Information</td> </tr> </TBODY> </table>
<TABLE class="TheBox" align="center">
<logic:define id="orderAddressBeanBilling" name="orderBean"
property="orderAddressBeanBilling" scope="session" />
<logic:define id="orderAddressBeanShipping" name="orderBean"
property="orderAddressBeanShipping" scope="session" />
<TBODY> <TR>
<TD>
<FIELDSET><LEGEND>Customer Address</LEGEND>
<DIV align="center">
<TABLE id="table5" class="BoxedIn">
<TBODY>
<TR>
<TH colspan="3" width="50%">Billing Address</TH>
<TH colspan="5" width="50%">Shipping Address</TH>
</TR>
<TR class="onRow" id="table5R1">
<TD align="left" height="29" colspan="3" width="473">
<DIV id="table5R1E2"><logic:notEmpty
name="orderAddressBeanBilling">
<logic:write name="orderAddressBeanBilling" property="lastName" />
<logic:write name="orderAddressBeanBilling" property="firstName" />
</logic:notEmpty></DIV>
<DIV id="table5R1E2"><logic:notEmpty
name="orderAddressBeanBilling">
<logic:write name="orderAddressBeanBilling"
property="streetAddr" />
</logic:notEmpty></DIV>
<logic:notEmpty name="orderAddressBeanBilling">
<logic:write name="orderAddressBeanBilling" property="city" />, <logic:write
name="orderAddressBeanBilling" property="state" />
<logic:write name="orderAddressBeanBilling" property="zipCode" />
</logic:notEmpty>
<DIV id="table5R2E2"><logic:notEmpty
name="orderAddressBeanBilling">
<logic:write name="orderAddressBeanBilling" property="countryCd" />
</logic:notEmpty></DIV>
</TD>
<TD align="left" height="29" colspan="5" width="469">
<DIV id="table5R1E20"><logic:notEmpty
name="orderAddressBeanShipping">
<logic:write name="orderAddressBeanShipping" property="lastName" />
<logic:write name="orderAddressBeanShipping"
property="firstName" />
</logic:notEmpty></DIV>
<DIV id="table5R1E20"><logic:notEmpty
name="orderAddressBeanShipping">
<logic:write name="orderAddressBeanShipping"
property="streetAddr" />
</logic:notEmpty></DIV>
<logic:notEmpty name="orderAddressBeanShipping">
<logic:write name="orderAddressBeanShipping" property="city" />, <logic:write
name="orderAddressBeanShipping" property="state" />
<logic:write name="orderAddressBeanShipping" property="zipCode" />
</logic:notEmpty>
<DIV id="table5R2E21"><logic:notEmpty
name="orderAddressBeanShipping">
<logic:write name="orderAddressBeanShipping"
property="countryCd" />
</logic:notEmpty></DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FIELDSET>
</TD> </TR> </TBODY> </TABLE>
I tried like window.location,document.location, any many way..bt dnt
know what is error.The '#CustomerInformation' denotes the point
where this script will jump to same page but it is not working
firefox.
Use
<button>Customer Details</button>
Its silly to involve Javascript in something this simple.
As Pointy points out, it may not really be valid. But its better than what you're doing.
Really, it should be
Customer Details

Categories