I am facing this issue where I manage to disable button but somehow the function didn't run. I suspect that the function stops right after my button is disabled. Any idea that can solve this issue when user click on the button, the button will be disable immediately and the button will runs the function behind. Below are the codes that I'm using for my button.
<INPUT TYPE ="Submit" NAME ="Submit1" ID = "Submit1" VALUE ="Create New Sales Contract"
SIZE ="30" onclick="**this.disabled=true;*** CheckGWidth(this.form),
this.form.ContractType.value='N'*" >
Note:
this.disabled=true; To disable this button
CheckGWidth(this.form),this.form.ContractType.value='N'
This is a function that will process this page'
Disabling a button won't stop the rest of the code from firing. I suspect there is something else going on.
This works using document.getElementById instead of this.form:
<form id="form1" action="" method="post">
<INPUT TYPE ="submit" NAME ="Submit1" ID = "Submit1" VALUE ="Create New Sales Contract" SIZE ="30" onclick="this.disabled=true;CheckGWidth(this.form);document.getElementById('ContractType').value='N';return false;" />
<INPUT TYPE="text" NAME="ContractType" ID="ContractType" />
</form>
<script>
function CheckGWidth(f){
alert("This works");
}
</script>
JS Fiddle Demo
Use Firebug or Chrome or Developer Tools and check your javascript issues...
Related
when I type 'ala' it displays 2 states in suggestions 'alabama' and 'alaska'. Now what I need is as soon as I click on 'alaska'/'alabama' any item in list it should call my method
methodAbc(){
//Some complex logic
alert("Method called.");
}
Sample code link click here
I tried blur, focus, etc events on text box they didnt work way I need. Click do not triggers on item selection it triggers when I click inside text box.
You just need to use the selectItem event from ng-bootstrap's ngbTypeAhead API
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model"
[ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter"
(selectItem)="methodABC($event)" />
See updated sample code
I'm new to asp.net mvc and currently using MVC 2. I'm struggling with working with checkboxes for days now. I simply need to get checked checkbox values to be saved in database and on Edit view check them back.
<input type="checkbox" id="coduit for safety near motor" name="Prepration" value="coduit for safety near motor"/><br />
<input type="checkbox" id="coduit for far side safety" name="Prepration" value="coduit for far side safety"/><br />
<input type="checkbox" id="coduit for power cable to near power point" name="Prepration" value="coduit for power cable to near power point"/><br />
On post controller method i can save the values of checked Checkboxes to the database as a comma separated string by using
strign a= = Request.Form["Prepration"];
How can i show them back on Edit view?
I don't know whether this is the way to do this any alternative solution would be great
The answer of your first question:
Need to get checked checkbox values to be saved in database
On a button click push all the values in a array and from there store them in a hidden field and when you post your form get those values from this hidden field:
<script type="text/javascript">
$(document).ready(function () {
$("input#btnSubmit").click(function () {
var id = [];
$("input[name='Prepration']:checked").each(function () {
id.push($(this).val());
});
$("#HiddenFieldId").val(id);
});
});
</script>
Now coming to your second question:
How can i show them back on Edit view?
<input type="radio" id="a" name="Prepration" checked="#Model.BoolPropertyName" />
Here you can have the value of in boolan.
Hope this will help you.
you can client side solution,
var data="";
$.each($("input:checkbox"),function(){
if($(this).is("checked")){
data+= $(this).val();
}
});
// post here
I need to give a custom alert to the user when the user places the cursor in a textbox item in asp.net. How do I go about doing this?
Please help.
<input type="text" onfocus="alert('Got focus!');"/>
or a bit more involved:
<script>
function InputFocus()
{
var inp = document.getElementById('myInput');
inp.onfocus = null;
alert('Got focus - ' + inp.id);
setTimeout(function() { inp.onfocus = InputFocus; }, 100);
}
</script>
<input type="text" value="one"/>
<input id="myInput" type="text" onfocus="InputFocus();" value="two"/>
<input type="text" value="three"/>
Javascript on focus event.
On Page_Load or Page_Init method add this code:
mytextBox.Attributes.Add("onfocus", "enterTextBox();")
Then on the page add a script tag with this :
function enterTextBox() {
alert('hello');
}
the two events that you need are onfocus (elemant has focus and can accept input) and onblur which gets fired when leaving the element (say a text box). Disabled elements cannot have focus so these events will not occur in that case.
The Google Toolbar's autofill feature has been the bane of my web development existance for the past several years. I have always settled on trying to create a timer control to check for changes since the developers epically failed to fire change events on controls. This has gotten further and further complicated when controls are buried inside nested repeaters, and then trying to tie it to an UpdatePanel is a further complication.
Has anyone succesfully been able to prevent Google Toolbar from filling in form fields without renaming the field to something insignifcant? (note: This doesn't work for a 'State' dropdown, it even goes as far as to check field values).
For as smart as Google employees are supposed to be, this was a grandly moronic oversight.
Update: For those who may be coming here looking for a solution. What I have found to work so far is you have ASP.net, is to use the server control "Timer" and to set this control as a trigger for the UpdatePanel. It helps to loop through and check for changed values.
If you only have access to javascript, or are using another framework, then I found using the following function to work the best (I was trying to monitor state and zip changes. The focusElement is required because when hovering in a dropdownlist, it changes the selectedindex):
function MonitorChanges(sStateDropdownID, sZipCodeID, sHiddenStateFieldId, sHiddenZipFieldId, bDoPostback) {
var state = $('#' + sStateDropdownID).val();
var zip = $('#' + sZipCodeID).val();
var hiddenstate = $('#' + sHiddenStateFieldId).val();
var hiddenzip = $('#' + sHiddenZipFieldId).val();
$('#' + sHiddenStateFieldId).val(state);
$('#' + sHiddenZipFieldId).val(zip);
var compareString = state + zip;
var compareHiddenString = hiddenstate + hiddenzip;
var focusElement = getElementWithFocus();
if (compareString != compareHiddenString && isShippingZip(zip)) {
bDoPostback = true
}
if (parseInt(focusElement.id.search('drpState')) == -1 && parseInt(focusElement.id.search('txtZip')) == -1 && bDoPostback) { bDoPostback = false; __doPostBack(sStateDropdownID, ''); }
var f = function() { MonitorChanges(sStateDropdownID, sZipCodeID, sHiddenStateFieldId, sHiddenZipFieldId, bDoPostback); }
setTimeout(f, 1000);
}
According to a recent post by a Google developer, using the autocomplete="off" attribute will disable Google toolbar auto-completion in both IE and Firefox. Note that this attribute must be applied to the <form> tag and not the individual <input> tags:
<form method="post" action="http://example.com" autocomplete="off">
<!-- ... -->
</form>
While this is not an instant fix, it is probably the most reliable solution possible - if it is possible to wait until the next iteration of the Google toolbar.
I once have a problem with autofill in firefox. I did this to prevent it.
<div style="display:none">
<input type="text" name="user" />
<input type="password" name="password" />
</div>
<input type="text" name="user" />
<input type="password" name="password" />
Don't know if it also work with google autofill.
Just out of curiosity, does autofill still fire when you set the AutoCompleteType to disabled?
<asp:TextBox ID="textBox1" runat="server" AutoCompleteType="Disabled" />
I'm not entirely sure if this will work or not, but I recall coming across it as a possible solution.
Try breaking apart the labels of keywords with span tags.
<label for="firstName">Fi<span>rs</span>t N<span>am</span>e:</label>
<input id="firstName" name="firstName">
Also, supposedly Google is planning to support autocomplete="false" in Firefox. No clean IE solution, yet, though.
Details:
Only disable after user clicks the submit button, but before the posting back to the server
ASP.NET Webforms (.NET 1.1)
Prefer jQuery (if any library at all)
Must be enabled if form reloads (i.e. credit card failed)
This isn't a necessity that I do this, but if there is a simple way to do it without having to change too much, I'll do it. (i.e. if there isn't a simple solution, I probably won't do it, so don't worry about digging too deep)
For all submit buttons, via JQuery, it'd be:
$('input[type=submit]').click(function() { this.disabled = true; });
Or it might be more useful to do so on form submission:
$('form').submit(function() {
$('input[type=submit]', this).attr("disabled","disabled");
});
But I think we could give a better answer to your question if we knew a bit more about the context.
If this is an ajax request, then you'll need to make sure you enable submit buttons again on either success or failure.
If this is a standard HTTP form submission (aside from disabling the button with javascript) and you're doing this to safe guard from multiple submissions of the same form, then you ought to have some sort of control in the code that deals with the submitted data, because disabling a button with javascript might not prevent multiple submissions.
You could do something like this:
$('form').submit(function() {
$(this)
.find(":submit,:image") // get all the submit buttons
.attr({ disabled : 'disabled' }) // disable them
.end() // go back to this form
.submit(function() { // change the onsubmit to always reject.
return false;
})
;
});
Benefits of this:
It will work with all your forms, with all methods of submission:
clicking a submit element
pressing enter, or
calling form.submit() from some other code
It will disable all submit elements:
<input type="submit"/>
<button type="submit"></button>
<input type="image" />
it's really short.
I'm guessing that you don't want them to hit the submit button more than once while the submit is processing.
My approach has been to just hide the button entirely and display some sort of status indicator (animated gif, etc) instead.
Here's a very contrived example (it's technically in prototype but I think a jquery version would be very similar):
<html>
<head>
<script type="text/javascript" src="include/js/prototype.js"></script>
<script type="text/javascript">
function handleSubmit()
{
$('submit').hide();
$('progressWheel').show();
return true;
}
</script>
</head>
<body>
<img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
<input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
</body>
</html>
in JQuery:
$('#SubmitButtonID').click(function() { this.disabled = true; });
On thing to be aware of is that you should not disable the button before the form is submitted. If you disable the button using javascript in the OnClick event you may lose the form submit.
So I would suggest you hide the button using javascript by placing an image above it or by moving the button out of the visible range. That should allow the form submit to proceed normally.
There are three ways to submit a form that should be covered. Use both David McLaughlin's and Jimmy's suggestions. One will disable the submit button form element while the other disables the basic HTML form submit.
For the third, these won't disable Javascript from doing a form.submit(). The OnSubmit="return false" method only applies when a user clicks the submit button or presses Enter in a input form element. Client side scripting will need to be handled as well.
How about
Code behind:
btnContinue3.Attributes.Item("onclick") = "disableSubmit()"
Javascript:
function disableSubmit() {
document.getElementById('btnContinue3').onclick = function() {
alert('Please only click once on the submit button!'); return false;
};
}
This doesnt solve the problem of what happens if the postback times out, but other than that it worked for me.