I have dynamically created option elements with javascript. I double click an option from one select field to transfer it to a second, disabled, multiple select field. This works fine. The problem appears when I go to submit the form with the new information. The second select field is not passed to PHP. I'm assuming it thinks its empty, but each of the options I added are selected by default and I visually see them all there. I've been looking around for a solution to this, but am having little luck. Everything I can find says that the most likely cuprit is a browser incompatibility or that the elements are not being added to the form. If it is a browser incompatibility issue, I've tried it on all the major browsers all with the same results, so I would like to know which one I'm missing (FF, Chrome, IE). As for not being added to the form, I don't see how that could be possible. The select element already exists in the form and I am merely appending new options in it. Am I missing something, or is this just not possible?
<script type="text/javascript" language="JavaScript">
function addModule(value, title) {
modules = document.getElementById('modules');
modules.options[modules.options.length] = new Option(title, value, true);
}
</script>
<form name="addModules" method="POST" action="submit.php">
<select name="moduleList" size="20" ondblclick="addModule(this.options[this.selectedIndex].text, this.value);">
<?php //dynamically created options from PHP ?>
</select>
<select id="modules" name="modules[]" multiple="multiple" size="20" DISABLED></select>
<input type="submit" value="Add Modules" />
</form>
Disabled fields are not submitted. The easiest solution is to change it to readonly. If you're determined to have it as disabled, you could make a hidden field that is updated with values from it, but I strongly suggest just using readonly and then trying to style it as desired.
It's because the second select is disabled, it's data doesn't get sent when the form is submitted.
You could try making it readonly instead of disabled.
This is the standard browser behavior. While adding the values to the disabled select list, you can also add it to a hidden input field, and then access this in the posted request.
Related
This is how the disabled attribute works. When a form control is disabled, the value will be ignored when the form is submitted and the key will not be present in $_POST (or $_GET).
If you want the value to be present in the submitted data, but you don't want the user to be able to change the value on the page (which I imagine is what you are trying to acheive) use readonly="readonly" instead of disabled="disabled".
EDIT
The <select> element does not have a readonly attribute. The above information still stands as it will work for <input>s and <textarea>s.
The solution to your problem here would be to disable the select and use a hidden input to send the value back to the server - e.g.
When the select is enabled:
<select class="txtbx1" name="country">
<!-- options here -->
</select>
...and when it is disabled:
<select class="txtbx1" name="country_disabled" disabled="disabled">
<!-- options here, with appropriate value having `selected="selected"` -->
</select>
<input type="hidden" name="country" value="value_of_field" />
But the main thing is that how to set these Hidden field when i change the Select field . and how to set at Submit form time . ?
Hope This might help you,
HTML form readonly SELECT tag/input
Further you should use jQuery in order toggle Disabling the select tag and assigning new values to hidden field.
Initially you should use PHP echo attribute to set your hidden field Value.
I am hoping there is an answer for this...
Setup:
Pretty complex ASP.NET Application doing a bunch of user interaction, some of which requires that Javascript disables some fields when others are clicked (had to do it in Javascript, b/c the postback issues in ASP.NET made it impossible, so had to it client side).
That code is all well where Javascript does the classic
document.getElementById(currObj).disabled = true;
The problem:
When I am ready to submit the page, how can I make ASP.NET (C#) notice if a field (Textbox or Radio box) has been disabled client side, so it does NOT submit that field in the form?
Is this even possible?
Much thanks in advance!
Any disabled fields don't submit but normal and even hidden ones do. This is how disabled fields work.
<input type="text" name="Test_1" value="off" disabled="disabled" />
<input type="text" name="Test_2" value="on" />
<input type="hidden" name="Hidden_1" value="hide_off" disabled="disabled" />
<input type="hidden" name="Hidden_2" value="hide" />
In the example only Test_2 and Hidden_2 will submit because the others are disabled.
You can see it at work in this jsfiddle: http://jsfiddle.net/bJ7Rq
The only way ASP.NET knows that a control has been disabled is if it was disabled from .NET and the Enabled = false property has been written to ViewState. When you disable a field on the client-side, this isn't the case, so ASP.NET will retain the default Enabled value.
As previous commenters have mentioned, the value of a disabled field will be completely excluded from the POST body sent to the server on postback. In the case of a basic TextBox on a page, that would mean the Text property would revert to String.Empty. To differentiate between an empty string in an enabled field and an actual disabled field, I think you'd need to look directly at the Request.Form object to see if the key exists. For example, if I had a TextBox named myTextBox on a blank page, Request.Form["myTextBox"] would be null for a disabled field. For an enabled field, it'd be whatever string value the field contained, including String.Empty if it were blank. Of course, if the control is in a naming container (e.g., a ContentPlaceholder or something) that messes with the name property on the actual field in HTML, you'd need to use the full HTML name.
So for example:
bool fieldIsEnabled = Request.Form["myTextBox"] == null;
It's not elegant, but it should get the job done (excluding checkboxes, which would also be null if the box wasn't checked).
I have below code where i disable and enable a calendar clickable icon.
<p>
<label>
<input type="text" name="date18" id="date18" value="01/01/2012"
style="width:75px;" disabled/>
</label>
<a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
<img src="icon-Calendar.jpg" alt="Click to pick a date from a popup
calendar"/>
</a>
</p>
When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it's read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.
I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.
Thanks.
If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.
To achieve this, first add this bit to the <form> tag:
<form ... onsubmit="EnableInputs(this);">
Then add this JS function:
function EnableInputs(oForm) {
oForm.elements["calid"].disabled = false;
}
You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.
This will just enable the element when submitting thus send its value.
Disabled does not submit values, but read-only does submit values.
We have all seen countless instances of forms with a select drop down having one of it's options as "Other" and on choosing that option, we get to see a input text box (which was hidden all along) asking us to type in our input.
Is there a better way to implement this? Are there plugins out there which will let me do this better? Or are standard HTML elements suffice (some setting to a select tag, may be) ?
You could use datalist. Example:
<input list="cookies" placeholder="Type of Cookie"/>
<datalist id="cookies">
<option value="Chocolate Chip"/>
<option value="Peanut Butter"/>
<option value="Raisin Oatmeal"/>
</datalist>
Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/
This gives the user the ability to select from a list of cookies and, if the type of cookie they seek is not found in the list, enter their own.
My only beef with it in your situation is that it may not be immediately obvious to the user they can use it as a drop down. But that could be easily remedied with a little bit of css.
An editable combobox might be a good alternative. The challenge is to style it in such a way that it is clear to the user that he can actually edit the contents of the control, rather than only selecting the provided default contents.
That's a fairly common way to design a form both on paper and on the web.
I'm not quite sure exactly what you mean with a better way to do so...
If you're worried about the hidden field not appearing if the user has javascript disabled, I'll suggest you hide the field using javascript or have a duplicate "If other please specify" text area in a noscript block:
<select><!-- implemented something like rahul showed -->
<noscript>
<label for="ifOtherInput">If other please specify</label>
<input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
<!-- Here we know the user selected other so we can just have this label: -->
<label for="ifOtherInputJs">Please specify</label>
<input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>
The backend must handle that the input in the noscript block may be missing. Or you could add the javascript version of the input to the page of the input using javascript (so both cannot possibly appear simultaniously so that they can have the same name.
I have an input of type text, from which I have already entered value 1234
it has been saved in cache as shown below.
The problem here is that, it is extremely frustrating to select the textbox in the next row.
Is there a way to not to display that 12334 (highlighted in the screenshot) from ever being displayed through HTML markup or javascript?
As #John pointed out, on modern browsers you can use the HTML5 valid autocomplete attribute, in your screenshot I see many textboxes, if you want to disable autocompletion on the whole form you can set this attribute directly at the form element:
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.action">
[...]
</form>
More info:
How to Turn Off Form Autocompletion
<input type="text" name="input" autocomplete="off" />
To apply this to all input controls, write the code below (using jQuery):
$(document).ready(function () {
$('input[type=text], input[type=password]').attr('autocomplete', 'off');
});