onchange() event of dropdownlist missing after disabled - javascript

I have an ASP.NET MVC project at work. Browser: Internet Explorer (forget what version), but my work machine is 32bit Windows 7.
In one of the view page, I have a dropdownlist. If there is any change, it will populate a text box with certain value. Here is the code (translated to HTML): Please note the drop down list is in a form
<form>
<select id="searchType" name="searchType" onchange="FillMyTextBox()">
<option value="1" selected>A</option>
<option value="2">B</option>
...
</select>
</form>
At the top of page, I have a button called 'Commit'. Once this button is clicked, all fields are disabled and form is submitted. $('input, select').attr('disabled', 'true') The 'Commit' button will be gone, and another button 'Back' appears. This 'Back' button, if clicked, will set all fields editable and form is submitted. $('input, select').removeAttr('disabled') (I guess you are aware of, these two sections of code use jQuery.)
However, once the 'Commit' button is pressed, select has attribute disabled and form is submitted. Once the form / page comes back, I find out the onchange() function is missing in the dropdownlist. Why? I use document.getElementById('searchType).hasAttribute('onchange') and it returns false (when I am in Console tab of Internet Explorer developer tool).
Why the disabled attribute remove the onchange() event of a dropdownlist? Is this a design flaw? I mean if I have many controls on the page, if I disable these controls, but somehow later on enable them back (say user review what has entered, but find out need to re-enter some fields), then I have to re-associate each with its own event, it seems rather inefficient.
[Edit] Stress that drop down list is inside a form and each button will cause the form to be submitted [/Edit]

Try using $('input, select').prop('disabled', false) to see if it works.
Or in other way this page may help. According to the answer assigning attribute uses $("input").attr('disabled','disabled') and removing by $("input").removeAttr('disabled');

Related

Javascript Submit Select Form with Multiple Items

I have a select form that allows users to select multiple items. I am trying to avoid having a submit button so I wanted to figure out a way to have the form submit when the user clicks out of the form.
I used <select onchange="this.form.submit()"> but this submits the form whenever they click any option and I want it to work for selecting multiple items.
Is there any way I can have it submit the form when the form loses focus?
This will do the trick but you still have to do some action to lose focus, like click outside or tab out:
onfocusout="this.form.submit()";
You can use onblur event.
$("select").blur(function(){ /* do stuff */ });
http://jsfiddle.net/2mSUS/3/

Prevent user from submit button click

I have got one Kendo UI dropdown box and combobox both are cascading and loading items from DB... and then few more textbox controls and then submit button also....
I made required validation for two textboxes and dropdownList and we can edit items that we are selected in combobox(we can remove also). Some times user clicks the submit button with out properly loading the items in Combobox then I am getting error like Required validation error ....
Is there any way to prevent the user from button click until the all the controls are fully loaded ...
I tried two ways ..
Approach 1 : i have put button property as hidden and then in combobox Databound event made visible the button ... But this approach didn't work..
Approach 2 :
I have tried the suggestions given in this link
$("#submit").prop("disabled", false)
this approach didn't worked for me..
Is there any other approach to prevent user from clicking the submit button until all controls are loaded...
Many thanks in advance...
You can do this:
<input type='submit' id='submit' value='submit' disabled />
<!--disable the button on default-->
and add this js:
$(window).load(function(){
$("#submit").prop("disabled", false); // enable it when page loaded.
});
this solution requires jquery.
On some projects i've used the css visibility property to hide show elements at appropriate times:
http://www.w3schools.com/css/css_display_visibility.asp
This might be what you want.
A display:none style until validation doesn't work for you?
$("#submit").css("display", none)
or
$("#submit").hide()

in firefox entering data into a textbox which acts as a radio button needs a double click

In mozilla firefox entering data into a textbox which acts as a radio button needs a double click...how to make it possible through single click.Even after selecting the radio button and If i click the textbox once and try to enter only the radio button gets selected and the data is not entered.
For Firefox, the first click in to select the radio button, which gets the focus (honnestly don't know why it's different with other browsers).
I think your solution will be to use Javascript... See this jdfiddle, I've update your code ;)
The idea is to have two inputs not linked in the HTML, but linked via the onclick (or onfocus) function, like:
<input type="radio" name="address-chosen" value="1" id="address-switch_1" />
<input type="text" name="address-item_1" value="1" onclick="selectRadioButton('address-switch_1')"/>
My question is: what's your final objective? Because when you submit the form, you'll have to take into account that you have two separate inputs... or maybe update the value of the radio button with JS, too?

Primefaces enable combobox after click on button

Use case: I have a value in the edit form which is very important and should not be changed very often. I have decided to have it read only and have button "Change" on the side. After clicking on this button dialog with warning is dispalyed to the user and this readonly field is enabled for changing. (it is a selectOneMenu)
First attempt:
<p:selectOneMenu
id="integrationCombo"
value="#{backendBean.integration.backend}"
widgetVar="backendIntegrationCombo"
disabled="true">
<f:selectItems
value="#{backendBean.backends}"
var="backend" itemValue="#{backend}"
itemLabel="#{backend.name}" />
</p:selectOneMenu>
<p:commandButton type="button"
styleClass="inlineTableCellButton"
onclick="backendIntegrationCombo.enable()"
value="#{msg['button.change']}" />
This enables the combo box, but his value is not send to the server (this is due to disabled=true as i found)
My second attempt was to have editable boolean on the view scoped bean and
disable="#{!bean.editable}" and calling setEditable(true) with command button. This worked well, but for unknown reason now the save action on command button that submits the form stopped working.
Third attempt: render h:outputText with name and combobox (with hidden class) and after change button is clicked switch their hidden classes.
function changeBackend() {
$("#backendName").addClass("hidden");
$("#integrationCombo_input").parent().parent().removeClass("hidden");
}
That works fine too except one thing: after save is done - nothing is rendered (neither ouputText nor combo box)

Lotus-Notes: Reset Radiogroup via Javascript

I'm currently working on a Lotus Notes solution. We're just using Web forms so client side operations are done via Javascript.
What I want to accomplish is to reset a Group of Radio Buttons. There are 3 possibilities and I want to choose none. (A 'none of them' possibility would be preferable, I know but we are required to reset them)
I currently use:
//Unchecks a single group of Radio Buttons
//groupname - the name attribute of the group which selection needs to be unchecked
function clearRadioButtonGroup(groupName) {
for(i=0;i<document.forms[0].elements[groupName].length;i++) {
document.forms[0].elements[groupName][i].checked = false;
}
}
The problem with this routine is, the Radiogroup gets reset, but on a form submit the old value gets submitted. Any suggestions?
What version of Domino are you using? Since 7.x (I think) a %%Surrogate field gets generated as a hidden field in your HTML that you'll be able to reset, so after deselecting all of the radio button options, you can then clear out the %%Surrogate field and you should then avoid having to select a "None of the above" option.
Matt
The problem is that clearing the radio buttons make no information about them appear in the submitted form data, and Domino seems to interpret that as no change to the field rather than clear the field.
I haven't found any solution to this I really like, but I can think of two options:
Change the radio buttons to include a no choice option.
The alternative is a bit clumpsy:
Add an editable field to the form to use as a flag, hide it from the web browser with css.
Have clearRadioButtonGroup also set the flag field to something.
Have the onChange event of the radio buttons clear the flag field.
In a WebQueryOpen agent, set the radio buttons field to empty if the flag field is non-empty.
Another alternative could be to uses some clever javascript/css trick to hide the no choice option and have clearRadioButtonGroup simply set that choice.
Are you certain that the old value is actually being submitted? Perhaps it just isn't being updated (erased) in the NotesDocument you're editing? Just a hunch...
BTW, you can download a program called Fiddler that will let you inspect the HTTP POSTs, and you can confirm that the POST data doesn't contain any values for that radio button group. That might help narrow down the problem.
Put the following pass thru HTML code on your form:
<input type="hidden" name="FieldName" id="FieldID" value="">
(FieldName and FieldID are the name and id of your radio field on the form)
When you reset your radio through Javascript and submit your document, the field will be reset to blank.

Categories