I cant Implement html 5 on asp:textboxes, everything I found on the internet was implemented on input: not on asp:textboxes
now I found a very useful validator for textboxes, however, I can't make it work with asp:textbox
here are the codes:
<script>
$(document).ready(function () {
$('form').h5Validate();
});
</script>
<input id="name" name="name" type="text" placeholder="Bob" title="Your name is required." required />
I want to make it work with asp:textbox
asp:textbox is a server side tag and after client request, server will return html with <input>; so all options for <input> also can be used for asp:textbox.
Related
I have converted ASP.NET WebForms DropDownList to dynamic loading with the great Select2 library. When I use loading of remote data, I need to use a
<input type="hidden" id="foo" />
that I'll turn into Select2 box with
$(document).ready(function () {
$("#foo").select2(...);
});
The problem is that when I'm trying to incorporate this into ASP.NET page and set the initial value from a query parameter, I can either use
<input type='hidden' id='foo' value='<%=Request["#id"] %>' class='bigdrop'/>
which I don't like, because I'll have logic in my markup, or
<asp:HiddenField runat="server" ID="foo" ClientIDMode="Static"/>
and set the value in codebehind, but I am unable to set the class for the input.
Which approach should I use?
there is no CssClass property on HiddenField! But I solved it in jQuery -
$(document).ready(function () {$("#foo").addClass('myclass'); }
Answer by "Axarydax"
Can I make upload file form in some sandboxed WebPart for Sharepoint Online, and if I can, how can I?
I've searched a lot and found only solutions, available for Client Object Model for outside clients, there is no example how to do this with JSOM (Client Object Model for Javascript) and usual way to upload with asp:FileUpload don't work in sandbox solution, PostedFile length = 0
You do have the option of using the ActiveX STSUpld.UploadCtl control - this enables you to provide the Multi-file upload as you see in a document library.
Note that in the following - Confirmation-URL must be set (where to go when upload is done) and the destination must be set as well to an existing document library.
<script type="text/jscript">
function DocumentUpload() {
var uploadCtl = document.getElementById("idUploadCtl");
uploadCtl.MultipleUpload();
}
</script>
<input type='hidden' name='Confirmation-URL' id='Confirmation-URL' value='' />
<input type='hidden' name='PostURL' id='PostURL' value='' />
<input type="hidden" name="Cmd" value="Save" />
<input type="hidden" name="putopts" value="true" /> <!-- Overwrite files -->
<input type="hidden" name="VTI-GROUP" value="0" />
<input type="hidden" name="destination" id="destination" value="/TestDL" /> <!-- Files destination path, must already exist -->
<p style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;text-align:center;padding:0px !important; vertical-align:top;width:100%;">
<script type="text/javascript">
try {
if (new ActiveXObject("STSUpld.UploadCtl"))
document.write("<OBJECT id=\"idUploadCtl\" name=\"idUploadCtl\" CLASSID=\"CLSID:07B06095-5687-4d13-9E32-12B4259C9813\" WIDTH=\"600px\" HEIGHT=\"250px\" ></OBJECT>");
}
catch (error) {
}
</script>
<asp:Button runat="server" accesskey="O" id="OKButton" CssClass="ms-ButtonHeightWidth" OnPropertyChange="if (this.value != 'Upload files') this.click();" Text="Upload files" UseSubmitBehavior="False" OnClientClick="DocumentUpload(); return false;" />
<asp:Button runat="server" accesskey="C" id="CancelButton" CssClass="ms-ButtonHeightWidth" Text="Cancel" UseSubmitBehavior="False" OnClientClick="window.location ='<somewhere to go>'; return false;" />
Hope this helps....
After some search I finally found solution, based on Codeplex's SPServices. There is plugin SPWidgets(https://github.com/purtuga/SPWidgets/). This plugin loads an iframe with upload.asmx (Sharepoint's default upload form), then set display: none for all elements on this page, exept input[type=file] and adds button, wich can submit form in iframe. After submit plugin catches iframe state (_onIFramePageChange event) and do some callbacks depends on iframe url.
This looks like some ugly workaround, but it is only working solution that I found after hours of search.
There's not too many options, however check out SPServices on CodePlex - this would be the best place to start. Remember - SharePoint expects a binary object when calling the service. You have to capture the file and convert it to binary first, then call the web service to upload.
I have an example but not with me at current location - if the above doesn't get you started, let me know and I will find and post.
I got a request to add this form to a asp.net control.
I want to use asp.net text box and button to submit the info to the form. (because I have special controls to match the look and feel).
this is the form:
<form name="ccoptin" id="signup" action="http://visitor.r20.constantcontact.com/d.jsp"
target="_blank" method="post">
<input type="hidden" name="llr" value="yyyyyy">
<input type="hidden" name="m" value="xxxxxx">
<input type="hidden" name="p" value="oi">
<label>sign up for new services and promotions:</label>
<input type="text"name="ea" value="" class="text" />
<input type="submit" id="iframe" class="submit"
name="go" value="submit" />
</form>
can this be done?
yes, you can use asp.net Textbox control for html input control and you can put the same styling. e.g.
<asp:TextBox ID="ea" CssClass="text" runat="server"></asp:TextBox>
Button control for html submit button e.g.
<asp:Button ID="iframe" CssClass="submit" runat="server" Text="submit" />
For your input type hidden, you can use asp.net HiddenField Control
<asp:HiddenField ID="llr" runat="server" Value="yyyyyy" />
Yes it can be done . On browser side ASP.NET controls get converted in to HTML even if you use the asp.net button.
Drag and drop asp.net button from toolbox and put attribute id , cssclass , name , text . It will get converted in end to HTML as expected
<asp:Button id="iframe" cssclass="submit"
Text="Submit" runat="server" />
Yeah. You have to consider these notes:
If you want to use ASP.NET controls, you should add runat='server' attribute to your form element. It's because ASP.NET controls (AKA server controls) while rendering check to see if they are get rendered in a server form (VerifyRenderingInServerForm method).
<asp:Hidden control is your replacement for <input type='hidden'
<asp:TextBox control is your replacement for <input type='text'
<asp:Button control is your replacement for <input type='submit'
All of your server controls should have runat='server' attribute
ASP.NET only allows for one form with runat=server, and all of your server controls have to be within a form with runat=server. Nesting forms isn't advisable.
See reference on form nesting:
https://web.archive.org/web/20170420110433/http://anderwald.info/internet/nesting-form-tags-in-xhtml/.
You'll need the form in a different document object - maybe host it in an iframe and conver the mini-form to an ASPX page that you load into the iframe ...
I am developing my app in asp.net web forms. The textbox is set like this
<asp:TextBox ID="txt1" runat="server" Enabled="false" ></asp:TextBox>
and this is the corresponding HTML markup
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
It is not editable upto this point.
I enable Caret browsing in IE8 (press F7) and then this field becomes editable, though the text is grayed out and consequently gives a wrong feeling to the user that the field is editable. This does not happen if I mark the textbox as readonly, but I do not want to mark it as a readonly field. Any suggestions on how to have the textbox in disabled mode when in Caret Browsing.
Edit1: I am not looking for a solution which would change IE settings/registry, am looking for a programmatic solution as my site is a public facing website
Edit2: View states are enabled for the page and for the controls
I can get you started quickly with this script:
<script> document.onkeyup = KeyCheck;
function KeyCheck() { alert(document.getElementById("txt1").value); } </script> </script>
Put this all the way on top of the html.
Now you get hold of the keypress.
When in caret mode, IE seems to ignore the text's javascript events
Alright. I gave you a Hint to build up on. (Thanks for the -1)
Here is the HTML code that you are looking for. Make sure to populate the initialVal using ASP code.
<script>
document.onkeyup = KeyCheck;
var initialVal="1.0"
function KeyCheck()
{
if(document.getElementById("txt1").value != initialVal) {
document.getElementById("txt1").value = initialVal;
return false;
}
}
</script>
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
Is it possible to selectively disable the autofill feature in text fields using code?
I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.
I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.
Look at the autocomplete HTML attribute (on form or input tags).
<form [...] autocomplete="off"> [...] </form>
W3C > Autocomplete attribute
Edit:
Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.
First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.
Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.
jQuery( function()
{
$("input[autocomplete=off]").val( "" );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="John" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="qwerty" autocomplete="off">
</div>
<input type="submit" value="Login">
</form>
you can put it into your inputs:
<input type="text" name="off" autocomplete="off">
or in jquery
$(":input").attr("autocomplete","off");
There are 2 solutions for this problem. I have tested following code on Google Chrome v36.
Recent Version of Google Chrome forces Autofill irrespective of the Autocomplete=off.Some of the previous hacks don't work anymore (34+ versions)
Solution 1:
Put following code under under <form ..> tag.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Read more
Solution 2:
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
It removes "name" and "id" attributes from elements and assigns them back after 1ms.
Adding an autocomplete=off attribute to the html input element should do that.
Add the AutoCompleteType="Disabled" to your textbox
This should work in every browser
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>
My workaround is to make the password field a normal textbox, then using jquery to turn it into password field on focus:
<asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
$("#txtPassword").focus(function () {
$("#txtPassword").prop('type', 'password');
});
</script>
I have successfully tested this in Edge and Firefox.
<input type="text" id="cc" name="cc" autocomplete="off">
works for regular text input.
For passwords, you need to use autocomplete="new-password"
<input type="password" id="cc1" name="cc" autocomplete="new-password">
per Mozilla Development Network
Place below code above your username control. This will work in call the browser.
<div style="margin-left:-99999px; height:0px;width:0px;">
<input type="text" id="cc" name="cc" autocomplete="off">
<input type="password" id="cc1" name="cc" autocomplete="off">
</div>