I got stuck in JavaScript validation in product adding form.
In that page I have file upload control to upload product image. I am not getting how to validate that using JavaScript.
If image is not uploaded to that control I want to display Upload Image message in Label.
How to accomplish this? Please help me.
The script I have written is:
var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
if (fileup == "")
{
document.getElementById("lblFileUploadImg").innerHTML = "<font color='red'>
Upload Image File</font>";
document.getElementById('<%=FileUploadImg.ClientID %>').focus();
return false;
}
else
{
document.getElementById("lblFileUploadImg").innerHTML = "";
}
The control I have used is:
<asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
<asp:Label ID="lblFileUploadImg" runat="server" >
With jQuery you could simply do this:
$('#myFile').bind('change', function() {
if(this.files[0].size>...){
alert('File is too big');
};
});
maybe this is what you are looking for:
$("input:file").change(function () {
if ($(this).val() !== "") {
var ul_file = $(this).val();
var extension = ul_file.substr((ul_file.lastIndexOf('.') + 1));
var accepted_file_endings = ["jpg", "jpeg", "bmp", "gif", "tif", "png"];
extension = extension.toLowerCase()
if ($.inArray(extension, accepted_file_endings) !== -1) {
...
You can get validate file uploading using JavaScript like this.
<script type="text/javascript">
function validate() {
var uploadcontrol = document.getElementById('<%=FileUploadImg.ClientID%>').value;
//Regular Expression for fileupload control.
var reg = /(.doc|.docx|.pdf)$/i;
if (uploadcontrol.length > 0)
{
//Checks with the control value.
if (reg.test(uploadcontrol))
{
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='green'>Upload Image File</font>";
return true;
}
else
{
//If the condition not satisfied shows error message.
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "Error while upload image";
return false;
}
}
} //End of function validate.
</script>
<asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
<asp:Label ID="lblFileUploadImg" runat="server" />
<asp:Button runat="server" Text="Upload" ID="btnupload" onclientclick="return validate();" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function Validate() {
var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
if (fileup == "") {
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='red'>Upload Image File</font>";
document.getElementById('<%=FileUploadImg.ClientID %>').focus();
return false;
}
else {
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUploadImg" runat="server" />
<asp:Label ID="lblFileUploadImg" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return Validate();" />
</div>
</form>
</body>
</html>
Related
I have two textboxes in my web application for login page, RegNo and Address. Now I want that if the page loads then cursor should be on RegNo textbox . After entering RegNo it must goes to Address after press Enter. How to do This?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body bgcolor="#CCCCCC" >
<form id="form1" runat="server">
<div>
<asp:TextBox ID="RegNo" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Name" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Address" runat="server" Text=""></asp:TextBox>
<asp:Button CssClass="sCancel" ID="btnCancel" runat="server" Text="Close" onclick="btnCancel_Click" Width="84px" />
<asp:Button CssClass="sUpdate" ID="btnUpdate" runat="server" Text="Update" onclick="btnUpdate_Click" Width="84px" style="margin-left: 0px"/>
<asp:Button CssClass="sAdd" ID="Add" runat="server" Text="Add" Width="84px" onclick="Add_Click" />
</div>
</form>
</body>
</html>
Well, I assume what you ask is how to change focus from userid to password and you don't need to move cursor itself.
Note that there is no need to do this in server side. You are able to simply do this in client side with JQuery. If you are not familiar with JQuery see here to understand how to add JQuery to your client side code.
Now I assume code in your client side is something like this:
Username: <asp:TextBox name="userid" id="userid" /><br>
Password: <asp:TextBox name="password" id="password" />
I will provide two examples with JQuery for this, in first example the focus will jump to password when user press Enter:
$('#userid').keydown(function (e) {
if (e.keyCode == 13) {
$("#password").focus();
return false;
}
});
In next example we change focus to password when userid reaches a specific lengths. for example 6:
$('#userid').keydown(function (e) {
if ($("#userid").val().length > 5) {
$("#password").focus();
}
});
UPDATE
It should work in your code:
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#RegNo').keydown(function (e) {
if (e.keyCode == 13) {
$("#Name").focus();
return false;
}
});
});
</script>
</head>
<body bgcolor="#CCCCCC">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="RegNo" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Name" runat="server" Text=""></asp:TextBox>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#RegNo').keydown(function (e) {
if (e.keyCode == 13) {
$("#Name").focus();
return false;
}
});
$('#Name').keydown(function (e) {
if (e.keyCode == 13) {
$("#Address").focus();
return false;
}
});
$('#Address').keydown(function (e) {
if (e.keyCode == 13) {
$("#Add").focus();
return false;
}
});
});
</script>
You can achieve this by the use of Tabindex Property of TaxtBox.
First, You set the Tabindex=1 to Textbox1
then,set the Tabindex =2 to TextBox2 and so on..
By this when your page is load then it look tabindex of control which is less it focus on that.
Thanks
Here's a little thing i want to achieve. I have an asp.net FileUpload and a textbox. When a user clicks the fileUpload and selects a picture from his/her computer/device, i want the image name to be immediately displayed in a textbox before submitting . Here is what i have tried
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static">
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('txtImage').val(filename);
});
It still cant get it displayed. wHAT AM I MISING PLEASE
you are missing # in $("txtImage"). This should be like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
$('#Upload').change(function () {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex > 0) {
filename = filename.substring(lastIndex + 1);
}
$('#txtImage').val(filename);
});
});
</script>
<asp:FileUpload ID="Upload" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"></asp:TextBox>
TextBox txtImage does not have a closing tag.
<asp:TextBox ID="txtImage" runat="server" ClientIDMode="Static"/>
I have login form
Login form
I want to show password when check box is checked. I write below code
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:TextBox runat="server" ID="txtPassword" Width="100%" TextMode="Password"></asp:TextBox>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:CheckBoxList runat="server" ID="showHidePassword">
<asp:ListItem Value="1" Text="Show Password"></asp:ListItem>
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
And try some JQuery code
$(function(){
$("#showHidePassword").bind("click",function(){
if($(this).is(":checked")){
// then I try to remove the "TextMode=Password"
// and think may be it works but there is no method that change textmode
}
});
});
Please help.
You can try changing the type attribute on change event, you can do something like this as an example:
$(function() {
$("#showHidePassword").on("change", function() {
var checked = this.checked;
$(this).siblings('input').attr('type', function() {
return checked ? "text" : "password";
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="showHidePassword">show password
<br>
<input type="password">
Actually I use CheckBoxList and use the ID of this control. But need control of checked item. So first of all use CheckBox instead of CheckBoxList.
And write below code in head section.
$(function () {
$("#showHidePassword").bind("click", function () {
var txtPassword = $("#txtPassword");
if ($(this).is(":checked")) {
txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
txtPassword.hide();
} else {
txtPassword.val(txtPassword.next().val());
txtPassword.next().remove();
txtPassword.show();
}
});
});
function PasswordChanged(txt) {
$(txt).prev().val($(txt).val());
}
That's it.
You can try this
HTML
<input class="pwd" type="password">
<input class="chk" type="checkbox">Show Password
JQUERY
$(document).ready(function() {
$('.chk').on('click', function() {
if ($('.chk').prop("checked")) {
$('.pwd').prop('type', 'text');
} else {
$('.pwd').prop('type', 'password');
}
});
});
kindly check
https://jsfiddle.net/vzuLn88j/
please help me, I'm trying to click a hidden button if the user press the ENTER key inside a text box. It works fine with one text box, but if I add another, java script don't work.
TextBox. ------------------------------------------------------------------------------------------
<pre>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click1" style="visibility: hidden; display: none;" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<script type="text/javascript">
var myInput = document.getElementById("TextBox1");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
var EnterKEY = 13;
if (e.keyCode == EnterKEY) {
if (e.preventDefault) {
document.getElementByID("Button1").click();
e.preventDefault();
}
return false;
}
}
</script>
<br />
<asp:Label ID="Label1" runat="server" Visible="False"></asp:Label>
</form>
</body>
</pre>
------------------------------------------------------------------------------
CODE BEHIND
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
TextBox2.Text = "It Works";
}
}
Try wrapping your javascript code inside of a document.onload function
window.document.onload = function(e){
var myInput = document.getElementById("TextBox1");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
//adding the second textbox
myInput = document.getElementById("TextBox2");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
var EnterKEY = 13;
if (e.keyCode == EnterKEY) {
if (e.preventDefault) {
document.getElementByID("Button1").click();
e.preventDefault();
}
return false;
}
}
}
so your script is executed once the DOM tree is fully loaded
Looking at your code you only bind your keyhandler(e) function to the element TextBox1 but not on TextBox2. Try creating a new binding code also for your TextBox2.
var myInput2 = document.getElementById("TextBox2");
if (myInput2.addEventListener) {
myInput2.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput2.attachEvent('onkeydown', this.keyHandler); /* IE hack */
}
I am trying to upload an image and after uploading i want to show it in the image control. My code is:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUploadTest" runat="server" />
<asp:Button ID="ShowImage" runat="server" Text="Show"
onclick="ShowImage_Click" />
<asp:Image ID="ImageUploaded" runat="server" Height="150px" Width="150px"
ImageUrl="~/images/blankImage.gif" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ShowImage" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
C# code is:
protected void ShowImage_Click(object sender, EventArgs e)
{
Label1.Text = "";
if (FileUploadTest.HasFile)
{
try
{
if (FileUploadTest.PostedFile.ContentType == "image/jpeg")
{
if (FileUploadTest.PostedFile.ContentLength < 102400)
{
string filename = Path.GetFileName(FileUploadTest.FileName);
string imageSavePath = Server.MapPath("~/images/") + filename;
FileUploadTest.SaveAs(imageSavePath);
ImageUploaded.ImageUrl = imageSavePath;
ImageUploaded.Visible = true;
Label1.Text = "Upload status: File uploaded!";
}
else
Label1.Text = "Upload status: The file has to be less than 100 kb!";
}
else
Label1.Text = "Upload status: Only JPEG files are accepted!";
}
catch (Exception ex)
{
Label1.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
}
}
else
{
Label1.Text = "No File !!!";
}
}
But After pressing the show button, the image is uploaded successfully. But the image control got vanished. Can any one help me about it?
I think you have to set image url to a valid url. Check the result of your Server.MapPath method.
You have to set an URI location to your image.
Morzel