How to remove the line from the table rows? See below:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br /><br /><br />
<table class="table">
<tbody>
<tr style="text-align: center;">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
</div>
How to remove the line from the table rows? See Above
Use table-borderless class to table tag. Reference here.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br /><br /><br />
<table class="table table-borderless">
<tbody>
<tr style="text-align: center;" class="">
<td>Quantity</td>
<td>Buy</td>
</tr>
<tr>
<td><input type="number" class="form-control" id="quantity" placeholder="Quantity" name="quantity"></td>
<td><input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy"></td>
</tr>
</tbody>
</table>
</div>
Related
I have three div one is main div, one div having two column table and another div has 5 column table. I have tried using bootstrap class "row" but I did not able to align them properly. How can I arrange this two div one beside another? Here below I have attached a picture. Can anyone please help me out for this problem.
here below is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trial</title>
<!--Links for icons and images-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--css for paginated-->
<link rel="stylesheet" href="http://localhost/Performance/css/usermange.css">
<style>
#displayproject{
margin-top:100px;
position:fixed;
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div id="displayproject">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Projects</th>
</tr>
</thead>
<tbody>
<?php
include_once "../Connection/dbconnect.php";
$fetch_projects = mysqli_query($GLOBALS['db'],"select project_id,project_name from project_table limit 10;");
while($row = mysqli_fetch_array($fetch_projects)){
echo '<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" name="options[]" value="hello">
<label></label>
</span>
</td>';
echo '<td>'.$row['project_name'].'</td></tr><tr></tr>';
}
?>
</tbody>
</table>
</div>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b></h2>
</div>
<div class="col-sm-6">
<i class="material-icons"></i> <span>Add New Employee</span>
<i class="material-icons"></i> <span>Delete</span>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td>Thomas Hardy</td>
<td>thomashardy#mail.com</td>
<td>89 Chiaroscuro Rd, Portland, USA</td>
<td>(171) 555-2222</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox3" name="options[]" value="1">
<label for="checkbox3"></label>
</span>
</td>
<td>Maria Anders</td>
<td>mariaanders#mail.com</td>
<td>25, rue Lauriston, Paris, France</td>
<td>(503) 555-9931</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Output I am getting is
You can use bootstrap 3 , you can see the code here
https://codepen.io/shakercs/pen/MBgwQJ
<div class="container">
<div class="row">
<div class="col-md-12">
div is here
</div>
</div>
<div class="row">
<div class="col-md-3">
<table class="table table-bordered">
<thead>
<tr>
<th>checkbox</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-9">
<table class="table table-bordered">
<thead>
<tr>
<th>checkbox</th>
<th>name</th>
<th>title</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr> <tr>
<td><input type="checkbox" /></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This should work for you -
<div class="container">
<div class="row">
<div class="col-md-12">
First div
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2" style="border:1px solid">
<table class="table">
<tr>
<td>col</td>
<td>col</td>
</tr>
</table>
</div>
<div class="col-md-10 col-sm-12" style="border:1px solid">
<table class="table">
<tr>
<td>col</td>
<td>col</td>
<td>col</td>
<td>col</td>
<td>col</td>
</tr>
</table>
</div>
</div>
</div>
This is an example code. You can modify accordingly.
Fiddle
You need to use the float:value; property of css to achieve this.
value:left|right|clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trial</title>
<!--Links for icons and images-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--css for paginated-->
<link rel="stylesheet" href="http://localhost/Performance/css/usermange.css">
<style>
#displayproject{
float:left;
margin-top:100px;
position:fixed;
background-color:blue;
}
</style>
</head>
<body>
<div class="container">
<div id="displayproject">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Projects</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="table-wrapper" style="float:right;">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b></h2>
</div>
<div class="col-sm-6">
<i class="material-icons"></i> <span>Add New Employee</span>
<i class="material-icons"></i> <span>Delete</span>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td>Thomas Hardy</td>
<td>thomashardy#mail.com</td>
<td>89 Chiaroscuro Rd, Portland, USA</td>
<td>(171) 555-2222</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox3" name="options[]" value="1">
<label for="checkbox3"></label>
</span>
</td>
<td>Maria Anders</td>
<td>mariaanders#mail.com</td>
<td>25, rue Lauriston, Paris, France</td>
<td>(503) 555-9931</td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I am using Bootstrap4 custom radiobutton and it works fine as long as I use Label text. Sometimes it makes no sense to have text, but then the radiobutton alone is dis-aligend. How can this be fixed?
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
Result:
Fiddle: https://jsfiddle.net/SchweizerSchoggi/51vrL8px/5/
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Using a special character which does not print anything will allow you to get the proper alignment without showing any text next to the radio button.
My guess on why it messes up the styling is because of the ::before and ::after code that gets added to the text. If there is no text there is nothing to add the tags to.
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Add mb-3 class on the empty label
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label mb-3" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
I'm using latest bootstrap 4.0 and have an issue with overflowing table in Chrome browser.
In Firefox it scales correctly:
I have been trying several tricks and tips, but no luck. I wonder if it is some bug in Chrome actually?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid ">
<div class="titled-container-header">
Täiendkoolitused - Standardolukorrad
</div>
<div class="titled-container-body">
<div class="row">
<div class="col-sm-auto">
<table class="table table-responsive table-secondary">
<tbody>
<tr valign="top">
<td class="label">Koolitusele pääsemise tingimused</td>
<td>Koolitus on mõeldud treeneritele,kelle treenitavad võistkonnad mängivad 11v11.
</td>
</tr>
<tr valign="top">
<td class="label">Info</td>
<td>Koolitus on mõeldud vähemalt EJL C litsentsi treeneritele, kelle treenitavad võistkonnad mängivad 11v11.
<br>
<br>Räägime standardolukordade tähtsusest jalgpallis -filosoofiad, trendid ja mängijate treenimise ning õpetamise
võimalustest.
</td>
</tr>
<tr valign="top">
<td class="label">Vabu kohti</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-auto pad-left">
<table class="table-bordered table-responsive table-primary">
<tbody>
<tr>
<th>
<label for="address">Elukoha aadress</label>
</th>
<td>
<input type="text" id="address" name="address">
</td>
</tr>
<tr>
<th>
<label for="phone">Telefon</label>
</th>
<td>
<input type="text" id="phone" name="phone">
</td>
</tr>
<tr>
<th>
<label for="email">Email</label>
</th>
<td>
<input type="text" id="email" name="email">
</td>
</tr>
<tr>
<th>
<label for="invoice_name">Arve saaja nimi</label>
</th>
<td>
<input type="text" id="invoice_name" name="invoice_name">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
My engine is Aspx.
I am currently having trouble editing one of my columns(Question Answer) in my table because it has html tags in it. Is there a way I can decode only that specific row/column in the value area?
<form id="updateFreqQuestionsUser" action="<%=Url.Action("SaveFreqQuestionsUser","Prod")%>" method="post">
<table>
<tr>
<td colspan="3" class="tableHeader">Freq Questions User Details <input type ="hidden" value="<%=freqQuestionsUser.freqQuestionsUserId%>" name="freqQuestionsUserId"/> </td>
</tr>
<tr>
<td colspan="2" class="label">Question Description:</td>
<td class="content">
<input type="text" maxlength="2000" name="QuestionDescription" value="<%=freqQuestionsUser.questionDescription%>" />
</td>
</tr>
<tr>
<td colspan="2" class="label">QuestionAnswer:</td>
<td class="content">
<input type="text" maxlength="2000" name="QuestionAnswer" value="<%=freqQuestionsUser.questionAnswer%>" />
</td>
</tr>
<tr>
<td colspan="3" class="tableFooter">
<br />
<a id="freqQuestionsUserUpdateButton" href="#" class="regularButton">Save</a>
Cancel
</td>
</tr>
</table>
Yes, you can do this:
<input type="text" maxlength="2000" name="QuestionAnswer"
value="<%=Server.HtmlDecode(freqQuestionsUser.questionAnswer)%>" />
Reference
I have a datalist and in itemdatabound iam calling javascript and passing one argument.But iam not getting that argument in js.
<asp:Button ID="btnUpload" runat="server" cssClass="button1" Text="Upload" >
<asp:DataList ID="dlView" runat="server" >
<ItemTemplate>
<tr>
<td>
<asp:Image ID="imgPlan" runat="server" ImageUrl='<%#GetImage(Eval("ImageName")) %>' />
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="lnkChangeLogo" runat="server" Text="ChangeLogo" OnClientClick="javascript:showLayerUpLoad();return false;">
</asp:LinkButton>
<br />
<asp:LinkButton ID="lnkRemoveLogo" runat="server" Text="RemoveLogo" OnClientClick="javascript:ConfirmChoice();return false;"/>
<asp:TextBox ID="txtImage" runat="server" Text='<%#Eval("ImageName") %>'></asp:TextBox>
<asp:HiddenField ID="hdnImage" runat="server" Value='<%#Eval("ImageName")%>' />
</td>
</tr>
</ItemTemplate>
</asp:DataList>
In itemdatabound i have written following code
Protected Sub dlView_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlView.ItemDataBound
If e.Item.ItemType = ListItemType.Item Or _
e.Item.ItemType = ListItemType.AlternatingItem Then
Dim txtImage As TextBox = DirectCast(e.Item.FindControl("txtImage"), TextBox)
Dim s As String = txtImage.Text
btnUpload.OnClientClick = String.Format("javascript:UploadImages('{0}')", s)
End If
End Sub
Following is my javascript fn
function UploadImages(str)
{
alert(str);
}
Problem is in itemdatabound iam getting value in String.Format("javascript:UploadImages('{0}')", s)
but when clicking on btnUpload ,control is moving to UploadImages in js,but no value in str.
What may be the reason for that?Can anybody help please?
Following is html result
<link href="../CSS/PopupDiv.css" rel="stylesheet" type="text/css" /></head>
<div id="shadow" class="opaqueLayer"> </div>
<div id="question" class="questionLayer">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#F1ECDE">
<tr style="height:17">
<td style="background:url(../App_Images/bg/contentlefttop.gif)" width="26" height="17"> </td>
<td style="background:url(../App_Images/bg/contenttop.gif)"> </td>
<td style="background:url(../App_Images/bg/contentrighttop.gif)" width="26" height="17"> </td>
</tr>
<tr>
<td style="background:url(../App_Images/bg/contentleft.gif)" width="26"> </td>
<td bgcolor="#FFFFFF">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:justify; line-height:18px">
<img src="../App_Images/loading.gif" alt="Loading..."/>
</td>
</tr>
<tr>
<td>
Please Wait While the Values Load...
</td>
</tr>
</table>
</td>
<td style="background:url(../App_Images/bg/contentright.gif)" width="26"> </td>
</tr>
<tr style="height:17">
<td style="background:url(../App_Images/bg/contentleftbottom.gif)" width="26" height="17"> </td>
<td style="background:url(../App_Images/bg/contentbottom.gif)"> </td>
<td style="background:url(../App_Images/bg/contentrightbottom.gif)" width="26" height="17"> </td>
</tr>
</table>
</div>
<div id="questionUpLoad" class="questionLayer">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#F1ECDE">
<tr style="height:17">
<td style="background:url(../App_Images/bg/contentlefttop.gif)" width="26" height="17"> </td>
<td style="background:url(../App_Images/bg/contenttop.gif)"> </td>
<td style="background:url(../App_Images/bg/contentrighttop.gif)" width="26" height="17"> </td>
</tr>
<tr>
<td style="background:url(../App_Images/bg/contentleft.gif)" width="26"> </td>
<td bgcolor="#FFFFFF">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:justify; line-height:18px">
<strong> File Name:</strong><br />
<span id="spnUpload">
<input type="file" id="flUpload" />
</span>
</td>
</tr>
<tr>
<td>
<input type="submit" name="btnUpload" value="Upload" onclick="UploadImages('');" id="btnUpload" class="button1" />
<input type="submit" name="btnCancel" value="Cancel" onclick="javascript:hideLayerUpLoad();return false;" id="btnCancel" class="button1" />
</td>
</tr>
</table>
</td>
<td style="background:url(../App_Images/bg/contentright.gif)" width="26"> </td>
</tr>
<tr style="height:17">
<td style="background:url(../App_Images/bg/contentleftbottom.gif)" width="26" height="17"> </td>
<td style="background:url(../App_Images/bg/contentbottom.gif)"> </td>
<td style="background:url(../App_Images/bg/contentrightbottom.gif)" width="26" height="17"> </td>
</tr>
</table>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6" colspan="2" align="left" style="padding-right:5px; width: 125px;" >
<table id="dlView" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<tr>
<td>
<img id="dlView_ctl00_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/abc.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl00_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl00$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl00_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl00$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl00$txtImage" type="text" value="abc.jpg" id="dlView_ctl00_txtImage" />
<input type="hidden" name="dlView$ctl00$hdnImage" id="dlView_ctl00_hdnImage" value="abc.jpg" />
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td>
<img id="dlView_ctl01_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/qwe.DIhJfEPC" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl01_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl01$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl01_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl01$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl01$txtImage" type="text" value="qwe.DIhJfEPC" id="dlView_ctl01_txtImage" />
<input type="hidden" name="dlView$ctl01$hdnImage" id="dlView_ctl01_hdnImage" value="qwe.DIhJfEPC" />
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td>
<img id="dlView_ctl02_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/asd.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl02_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl02$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl02_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl02$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl02$txtImage" type="text" value="asd.jpg" id="dlView_ctl02_txtImage" />
<input type="hidden" name="dlView$ctl02$hdnImage" id="dlView_ctl02_hdnImage" value="asd.jpg" />
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td>
<img id="dlView_ctl03_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/vini.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl03_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl03$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl03_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl03$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl03$txtImage" type="text" value="vini.jpg" id="dlView_ctl03_txtImage" />
<input type="hidden" name="dlView$ctl03$hdnImage" id="dlView_ctl03_hdnImage" value="vini.jpg" />
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td>
<img id="dlView_ctl04_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl04_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl04$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl04_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl04$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl04$txtImage" type="text" id="dlView_ctl04_txtImage" />
<input type="hidden" name="dlView$ctl04$hdnImage" id="dlView_ctl04_hdnImage" />
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td>
<img id="dlView_ctl05_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/adf.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl05_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl05$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl05_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl05$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl05$txtImage" type="text" value="adf.jpg" id="dlView_ctl05_txtImage" />
<input type="hidden" name="dlView$ctl05$hdnImage" id="dlView_ctl05_hdnImage" value="adf.jpg" />
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td>
<img id="dlView_ctl06_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl06_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl06$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl06_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl06$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl06$txtImage" type="text" id="dlView_ctl06_txtImage" />
<input type="hidden" name="dlView$ctl06$hdnImage" id="dlView_ctl06_hdnImage" />
</td>
</tr>
</td>
</tr><tr>
<td>
<tr>
<td>
<img id="dlView_ctl07_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>
<a onclick="javascript:showLayerUpLoad();return false;" id="dlView_ctl07_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl07$lnkChangeLogo','')">ChangeLogo</a>
<br />
<a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl07_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl07$lnkRemoveLogo','')">RemoveLogo</a>
<input name="dlView$ctl07$txtImage" type="text" id="dlView_ctl07_txtImage" />
<input type="hidden" name="dlView$ctl07$hdnImage" id="dlView_ctl07_hdnImage" />
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><strong style="color:#ADADAD">URL : </strong><a id="lnkUrl" target="_blank">
<span id="lblUrl"></span>
</a></td>
</tr>
</table>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWIwKerOHHCALt3oXMAwKQ9M/rBQLf8c7OBALF9uAaAtzO1PIKAt/2m70CAvrasL4HAuDf6ooCAtzOwPcIAt/2h0IC5v+70Q0CzITOxQ8C3M6spAcC3/bDxwYCgemdpAkC5+3XyA0C3M6YqQUC3/avzAQClcS6vQkC+8jMiQUC3M6EhgMC3/bL0AoCsK2c6A4ClrLWtAkC3M7wigEC3/b3hwQCnNKn+wQCgte57wYC3M7ctw8C3/bz2g4C3/GapA8CxfbUyAMC3M6I7wgC3/bf3ww=" />
</div></form>
</body>
</html>
For the OnClientClick property on button server controls (ImageButton, LinkButton, Button) you do not use the javascript: prefix. So try to remove all your javascript: stuff and see if it works.
Ignored what I said above... LinkButton is a special case. :P
I now have a closer look at your code and the HTML output. From what I can see, there are some issues in your code:
You are dynamically changing the OnClientClick property of the btnUpload server control which sits outside the DataList. Which means the OnClientClick for the btnUpload button will change each time an item is bound to the list and the result is, if it works, the last ImageName in your datasource is passed to the btnUpload's onclick attribute in the output HTML.
The Eval("ImageName") seems only work when calling it from the GetImage() function for imgPlan. I am not too sure why this is happening. And because of this, the Text and Value of txtImage and hdnImage are not populated and this is why you did not get the value in the js.
Please review your code and let us know any results. :)
btnUpload it outside the item template for your datalast, so OnClientClick is rewritten for every item during the ItemDataBound handler. apparently for the last item in your datasource, ImageName is empty/null. move btnUpload into the item template and see if that improves the situation.