What is the best way of disabling(greying out) fields within a Javascript form? I have tried the disabled="disabled" on both the form and its fields but neither work e.g.:
<form:form id="testForm" method="post" disabled="disabled" action="${pageContext.request.contextPath}/testSave" commandName="testForm">
<tr>
<td valign="top" disabled="disabled">Name: </td>
<td valign="top"><form:input disabled="disabled" path="fName"/></td>
</tr>
</form:form>
Any ideas on what im doing wrong here?
Using JQuery you could do the following to disable all form fields for a given form:
$('#formId').find('input,select,textarea[,other elements]').prop('disabled', true);
Well, it sort of depends on exactly what you are trying to do.
The "sure fire" way of disabling form fields is a combination of "disabled" and "readonly" on the inputs. Between the two, you can cover everything that you could want:
grey out the input
make the input non-editable
make the input non-focasable
keep the input from being sent with the form
Since some browsers don't support the "greyed out" part of disabling, the best way to cover that is to set up a custom CSS to display disabled (or readonly) fields the way that you want them to show.
To get the right soluiton for what you want to do with your form, look here for the differences between the two attributes: http://kreotekdev.wordpress.com/2007/11/08/disabled-vs-readonly-form-fields/
Edit: Additionally, you might consider replacing the disabled inputs with text, if the data is not to be sent with the form . . . less confusing to the user than having an input field that they can't use.
See the below js sample; I hope my perception matches with your wish:
http://jsbin.com/avopuf/3/
Change css as per your requirement.
You can disable input tags, but not td
td tag attributes
Sounds like you can use a reference site to brush up on HTML. I find W3School to be a good starting point, it has tutorials and references for a variety of online technologies.
Specifically for HTML and HTML input tag
Also, how is it not working? (Is it not greying out, or user can still type in it, ...?)
Related
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.
I'm already excluding one input, and it adds the success class (which I don't mind)
$('form').parsley({ excluded: '[data-parsley-sum-total="all"]' });
but there are a number of other inputs that have no validations on them, and I don't want the 'parsley-success' class added on submit. If I add them to the list of excluded inputs, it still shows the 'parsley-success' class after submission. I'm just removing them manually right now on submit, but is there an option to not give them the class in the first place?
Using parsley 2.0.7
Thanks in advance for any help.
Edit:
In case this helps, my inputs I'd like to have the validation show up on are all in a single div like so:
<form id="f">
<input>
<input>
<div id="d">
<input>
<input>
</div>
I'd like to do something like $('#d').parsley() but that obviously doesn't work.
Also, besides using parsley excluded like I mentioned above, using data-parsley-group="" doesn't work for me either, both just exclude from validations, but don't solve the parsley-success problem for me.
Interesting point, it should be easier.
It's not too hard to get what you want though. You can listen for parsley:field:validate event, and toggle a class "no-constraint" depending on if it has constraints or not. A simple tweak to your CSS file will give the result you want.
Pretty straightforward. I want the text input to look disabled (browser's default disabled style) but without actually being disabled so I can still sell it trough post.
If you just need to send it throung post you can make the input field as hidden instead of making it look disabled
<input type="hidden" value="yourvalue">
Its not direct way to make it look disabled as disabled input field looks different in every other browser...
If you want to display data that the user can't change, and then send it to a server with a POST then include it as a hidden <input>
<input type=hidden name=myHiddenValue value="My Hidden Value">
It will appear as $_POST['myHiddenValue'] when the form is submitted.
If you need to display it too then you can include it in your HTML, just not as an <input> field.
I have a included a Dojo star rating widget (dojox.form.Rating) in a Dojo form but when submitted, it doesn't appear.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" value="3"></div>
The documentation doesn't mention adding a name attribute, but even if I add one, it doesn't help.
<div dojoType="dojox.form.Rating" name="field_3177" numStars="5" id="field_3177" value="3"></div>
Examining the rendered HTML in Firebug, it seems the hidden input field has no name attribute - which would explain why it doesn't appear in the POSTed data.
<input type="hidden" dojoattachpoint="focusNode" value="3" id="field_3177" tabindex="0">
Is there something I should do before submitting?
You just need to add a name to the widget, i.e.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" name="field_3177" value="3"></div>
This is nothing special to Dojo. All input elements must have a name in order to be submitted back to the server, see http://www.w3schools.com/tags/att_input_name.asp.
UPDATE:
Sorry, didn't see that you'd already tried adding a name param. I'd argue this is a bug in either the Form or (more likely) the rating widget. If you submit your form via XHR using dijit.form.Form.getValues() then you'll get the rating widget included - if you have a name. But if you use the native form submit then you don't.
I've created a test case at hhttp://telliott.net/dojoExamples/dojo-ratingInFormExample.html. You can get this to work for non-XHR form submission by quickly iterating through the values returned by getValues() and building the query string yourself. Not ideal. I suspect the template for the rating should be updated to put the name attribute onto the input node rather than the top level node.
Silly question:
have you added dojo.require("dojox.form.Rating"); to your code?
Hope it helps you.
//Daniel
A required field validator seems to always to fire when the associated textbox is disabled (whether the textbox contains text or not).
When the textbox is enabled the validator behaves correctly.
Can anybody tell me why?
I've tried disabling the required field validator with ValidatorEnable but that seems to make no difference.
Here's the relevant HTML from the page (cut down):
<tr id="trBrokerNetID" runat="server">
<td>
<cc1:mitextbox id="txtBrokerNetID" runat="server" cssclass="bodytext" width="220px" maxlength="20" onBlur="JavaScript:CheckBrokerBranch(false);"></cc1:mitextbox>
<asp:requiredfieldvalidator id="rfvBrokerNetID" runat="server" width="1px" errormessage="BrokerNetID - Please supply a value" controltovalidate="txtBrokerNetID">*</asp:requiredfieldvalidator>
</td>
</tr>
Any ideas gratefully received.
Now what I didn't know was that when a control is disabled on the clientside it doesn't get included in the postback.
Which is why the serverside validation was firing. As far as it was concerned the control was empty.
The soolution is to use the readOnly property rather than the disabled property.
Now to figure out how to style the control to make it have the same look as if it was disabled.
ASP.NET's validators work in mysterious ways :D
First of all it is dangerous to use the id of an ASP.NET control to access it in jQuery.
If you place the control in a repeater or wrap the page in a master page, then the id of the html element will be something different than the id you specified. Use class to access the element instead.
If ASP.NET validators want the field to be enabled then you must try another approach.
My suggestion would be this:
1.
Add a class to the textbox, that makes it looks disabled:
$("#txtBrokerNetID").addClass("thisClassMakesItLookDisabled");
2.
Add an event that checks on focus to the textbox and blurs it if there is focus:
$("#txtBrokerNetID").focus(function() {
$(this).blur();
});
Now the field behaves as if it is disabled and the validator works.
One option you can choose, is to set a ValidationGroup than the one the form uses, an then, when validating the form call Page_ClientValidate('text_validation_group') if needed. That way client validation won't get in the way.