I am working on an WebForms app, and we want to put a speed bump, for lack of a better term, in for the users at a particular point in the app. There is a particular action which is not supposed to be undone. So when they click the button to do that action we want to display a small confirmation window, have them enter a random string that we give them. Once they enter that string, and it matches the corresponding label, the submit button becomes enablesand they can perform the action. But for the life of me I can't figure out a good way to do this client side with WebForms. Is there a simple mechanism to use this type of workflow without a ton of post back events?
Note: This is an internal app where high security isn't truly a necessary requirement in this case. As I said, this is meant to be something to slow the user down slightly.
This is similar to the mint.com confimration style.
Add JavaScript to the textbox onChange or onKeyUp event, there do your check and enable the button.
For example:
<script type="text/javascript">
function checkConfirmationText(){
// Check if value of entered text = value of hidden text
var isOk = document.getElementById('confirmation-label').value == document.getElementById('confirmation-text').value);
// Show/Hide button depending on the text
document.getElementById('btn-submit').style.dispaly = isOk ? '' : 'none';
}
</script>
<!-- HTML -->
<input type="hidden" id="confirmation-label" value="DELETE" />
Enter "DELETE": <input type="text" id="confirmation-text" value="" onkeyup="checkConfirmationText()" />
<input type="submit" id="btn-submit" style="display:none" />
You could generate the javascript method to check the code (including the code in the method) server side and use registerclientscriptblock (or whatever the current method is), then use the onblur to call that method.
Related
I am using an ASP TextBox and a Telerik RadTextBox in my asp.net webform. I know the The both the controls clear its value after each postback and this is by design due to security reasons.
In my scenario both the controls are ajaxified. Still the ASP TextBox and RadTextBox loses it value on ajax request (partial postback).
So my doubt, is this expected? Will the textbox lose value on both full postback as well as on ajax request?
Both ASP.NET Textbox and Telerik Textbox will be rendered as <input type="password" />. <input type="password" /> is treated a little bit different than the other controls as it contains sensitive information. On every postback they are forcefully cleared.
But if there is some requirement then you can store the information and set it back.
string Password = txtPassword.Text;
txtPassword.Attributes.Add("value", Password);
Note: But I really don't recommend it.
Ajax based function calling never causes Data loss or refresh happened in client side. I think it may be happened due to object you have selected for ajax calling. For eg:
<input type="button" id="Submit">
<input type="submit" id="Submit">
They exhibit different behavior in ajax calling.
I am working on a webforms project using c#/aspx/jquery. I'm not sure where to handle my Onclick. Both options (doing it in C# or jquery) seem feasible. Which would be better practice?
Here is the scenario:
I want to build a checkbox which will toggle a textbox's textmode, altering it between Password and SingleLine.
Currently, I have this following code for my markup since I am currently handling it in C#:
<asp:Checkbox ID="CheckBox1" OnCheckedChanged="CheckBox1_OnCheckedChanged"/>
The code:
protected virtual void OnCheckedChange(EventArgs e)
{
If (CheckBox1.TextMode == TextMode.Password)
CheckBox1.TextMode = TextMode.SingleLine;
else
CheckBox1.TextMode = TextMode.Password;
}
The use case of this is: A user is entering his password. On the same page, he may choose to keep the password hidden or not by checking the checkbox.
Which would be better practice?
What is your functional requirement?
Setting this in C# on the asp.net code behind, you will need a post-back to make it work. This means the page will refresh and the text box will change.
On the client (JS/JQuery) the page will not refresh.
Now you evaluate the work required vs the quality you need. (If you want a nice user experience and are ok with writing JS put it in JS, if you're strapped for time and are ok with the refresh then do it on asp.net).
I'm trying to answer your question in general sense about HOW such a decision (in my humble opinion) should be made. Realistically this is very simple to implement in javascript and your should do it there.
Now for the code (I assume you know how to put it in asp.net code behind so I'm going to write the JS approach):
Html:
My Password: <input type="password" id="mytext" /> <br />
Hide Chars : <input id="passChk" type="checkbox" checked="true" />
Javascript:
$(function() {
$("#passChk").change(function(){
if(this.checked) {
$("#mytext").attr("type","password");
} else {
$("#mytext").attr("type","text");
}
});
});
See it running here: http://jsfiddle.net/rC5NW/2/
After trying to implement the accepted answer, I realized that some browsers (I used Google Chrome) does not allow changing the type attribute. There is a way to bypass this but I don't think it is worth it for my purposes:
Therefore, It might be better to just use C#.
Relevant Questions
Does javascript forbid changing the input type from password or to password?
change type of input field with jQuery
I have an ASP.NET MVC 4 view. In the view, I have
<form action="/myAction" method="post">
...
<input type="submit" value=" Save " onclick="this.disabled = true; this.value = ' Please wait... '; return true;" />
</form>
By disabling the button, the form never gets submitted. However, I would like to disable the button after a user clicks it. The reason I want to disable it is to prevent the user from clicking the "submit" button multiple times. What am I doing wrong? I thought if I returned true, the form would still submit.
Disable the button in your form's submitted event, not the button's click event. This is because the click event fires before the form is submitted - though you are returning true, so that shouldn't cause the submission to fail, I don't think.
Use ActionFilters. This blog post has a class you can just drop into your project, decorate your actions and you're done.
We want to reduce the number of steps it takes for a user to upload a file on our website; so we're using jQuery to open and postback files using the below markup (simplified):
<a onclick="$('#uplRegistrationImage').click();">
Change profile picture
</a>
<!-- Hidden to keep the UI clean -->
<asp:FileUpload ID="uplRegistrationImage"
runat="server"
ClientIDMode="static"
Style="display:none"
onchange="$('#btnSubmitImage').click();" />
<asp:Button runat="server"
ID="btnSubmitImage"
ClientIDMode="static"
Style="display:none"
OnClick="btnSubmitImage_OnClick"
UseSubmitBehavior="False" />
This works absolutely fine in Firefox and Chrome; opening the file dialog when the link is clicked and firing the postback when a file is selected.
However in IE9 after the file upload has loaded and a user has selected a file; insteaed of the OnChange working I get a "SCRIPT5 Access is denied" error. I've tried setting an arbitrary timeout, setting intervals to check if a file is given to no avail.
There are a number of other questions relating to this; however none appear to have a decent answer (One said set the file dialog to be transparent and hover behind a button!)
Has anyone else resolved this? Or is it absolutely necessary that I provide a button for IE users?
For security reasons, what you are trying to do is not possible. It seems to be the IE9 will not let you submit a form in this way unless it was an actual mouse click on the File Upload control that triggers it.
For arguments sake, I was able to use your code to do the submit in the change handler, but it worked only when I clicked the Browse button myself. I even set up polling in the $(document).ready method for a variable set by the change handler that indicates a submission should be triggered - this didn't work either.
The solutions to this problem appear to be:
Styling the control in such a way that it sits behind a button. You mentioned this in your question, but the answer provided by Romas here In JavaScript can I make a "click" event fire programmatically for a file input element? does in fact work (I tried in IE9, Chrome v23 and FF v15).
Using a Flash-based approach (GMail does this). I tried out the Uploadify demo and it seems to work quite nicely.
Styling a File Upload:
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
References:
jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?
IE9 file input triggering using Javascript
getting access is denied error on IE8
Hey this solution works.
for download we should be using MSBLOB
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
var fileName = invoiceNumberEntity + ".pdf";
var pdfDownload = document.createElement("a");
document.body.appendChild(pdfDownload);
AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
window.navigator.msSaveBlob(fileBlob, fileName);
} else { // for other browsers
var fileURL = window.URL.createObjectURL(fileBlob);
pdfDownload.href = fileURL;
pdfDownload.download = fileName;
pdfDownload.click();
}
});
};
This solution looks like it might work. You'll have to wrap it in a <form> and get it to post in the jquery change handler, and probably handle it in form_load using the __eventtarget or and iframe or whatever it is that web forms uses, but it allows you to select a file, and by submitting the form, it should send it. I can't test it however, since I don't have an environment set up at home.
http://jsfiddle.net/axpLc/1/
<a onclick="$('#inputFile').click();">
Change profile picture
</a>
<div id='divHide'>
<input id='inputFile' type='file' />
</div>
$('#inputFile').change(function() { alert('ran'); });
#divHide { display:none; }
Well, like SLC stated you should utilize the <Form> tag.
First you should indicate the amount of files; which should be determined by your input fields. The second step will be to stack them into an array.
<input type="file" class="upload" name="fileX[]"/>
Then create a loop; by looping it will automatically be determined based on the input field it's currently on.
$("input[#type=file]:nth(" + n +")")
Then you'll notice that each file chosen; will replace the input name to the file-name. That should be a very, very basic way to submit multiple files through jQuery.
If you'd like a single item:
$("input[#type=file]").change(function(){
doIt(this, fileMax);
});
That should create a Div where the maximum file found; and attaches to the onEvent. The correlating code above would need these also:
var fileMax = 3;
<input type="file" class="upload" name="fileX[]" />
This should navigate the DOM parent tree; then create the fields respectively. That is one way; the other way is the one you see above with SLC. There are quite a few ways to do it; it's just how much of jQuery do you want manipulating it?
Hopefully that helps; sorry if I misunderstood your question.
I'm trying to write a small program in C# to calculate a equation with a few known variables. A few textboxes (where each variable need to be typed) and a single "calculate" button.
What I'm trying to implement now is that my keyboard cursor is active in a selected textbox when the program starts.
But I can't figure it out.
Hope someone can help me.
For Winforms : View > Tab Order. Set tab order of start textbox to 0.
write this in your head tag
<script type='text/javascript'>
document.getElementById('txtName').focus();
</script>
I see, you forgot to write down your C# (when i post my first answer).
If you're using C# it would be lot easier thank HTML or PHP.
Simply type this in form_load() :
<your textboxname>.Focus()
Example :
TextBox1.Focus()
You can set up the order of focus with tabindex
e.g.
<input id="thing" tabindex="1" />
tabindex is ordinal. When set, the element with the lowest tab index value will be the first to gain focus.
You can also use tabindex to ensure the next element that the user will hit if he or she presses tab.
You can do that using JQuery.
Simple use that code:
$('#TextBox').focus();
where the TextBox is a ID from your TextBox Control.
I hope that helps.
So, what programming language that you are using?
In php you could use simple javascript :
<form>
<input type="text" id="mytext1" name="mytext1" value="1"><br>
<input type="text" id="mytext2" name="mytext2" value="2"><br>
<input type="text" id="mytext3" name="mytext3" value="3"><br>
</form>
<script language="javascript" type="text/javascript">
var mytext = document.getElementById("mytext1");
mytext.focus();
</script>
when you load the page it would be focused on "mytext1"
Hope this helpful