Prevent user from submit button click - javascript

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()

Related

onchange() event of dropdownlist missing after disabled

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');

Using jQuery toggle to hide/show form submit button based on checkbox being checked - how to set submit button toggled off by default?

I have a form that I'm using whereby I would like to require a checkbox ('terms') to be checked in order to toggle the Submit button ('checkout-submit') on. I have it working just fine once you check the checkbox and then uncheck, etc.
But, by default the Submit button is showing. I'm unsure in my code how to ensure that the Submit button is toggled off when the page loads.
$('#terms').click(function() {
$("#checkout-submit").toggle(this.checked);
});
Another approach is to put the boolean attribute required on the checkbox, like so
<input type="checkbox" required>
Then if the user attempts to submit without checking the box, a native html5 dialog (which looks quite nice) appears, saying you have to check the box to proceed. The user can hit submit as many times as they like, but nothing will happen until the checkbox is checked. Note that all of this has to be inside a form element.
You can do something like this:
$('#your_checkbox').click(function() {
if ($(this).is(':checked')) {
$('#your_button').removeAttr('disabled');
} else {
$('#your_button').attr('disabled', 'disabled');
}
});
//set it to disabled at load
$('#your_button').attr('disabled', 'disabled');
Fiddle http://jsfiddle.net/t70cc43o/1/

usage of external css in ui binder to greyout the particular div at time of submitting the form

I want to grey out the particular portion of div during the button click event.
like if we have passed value in two textboxes and clicked the button for submitting the value to database at that time the screen should grey out with all its widgets in disable mode.
i want it to be done in ui binder with help of css,javascript
Try this
$("#divId1").click(function(event){
$("#somePortiondivId2").css("background-color",'#ccc');
});
In your case:
$("#submitId").click(function(event){
$("#textBox1").prop('disabled', true);
$("#textBox2").prop('disabled', true);
});

Validate form on the tab which is not selected

I use jQuery form validation plugin. I have got a webpage with "save" button and tabs. there is a form in one tab. Here is code for "save" button.
$("#save").click(function(){
$("#optionalform").valid();
});
It validates form if the tab with "#optionalform" selected. If it is not selected validation doesn`t work.
What you need to do is specify that hidden elements should not be ignored:
$("#optionalform").validate({
ignore:''
});
The default for the ignore option is ':hidden' which includes all the elements of your form, except when that tab is visible.
See it in action here: http://jsfiddle.net/ryleyb/NfmWW/

Unselect a Select Input

I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?
I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed
Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.
Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');
I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.

Categories