I made a registration form using backbone.js, CoffeeScript and jquery.
I am trying to disable the submit button after 1 click (so that it doesn't fire events again and again) , i also want that button get active again when i fill fields of my form.. Thanks for your time.
In your code that runs the event (hopefully in the events delegate routine of your view) all you have to do is tell JQuery to disable the button
$("#btnSubmit").attr("disabled", true);
Then when you need to re-enable it
$("#btnSubmit").removeAttr("disabled");
Just call the appropriate calls when required.
seems there is no enable/disable property. maybe you could use the “silent” option to keep the “change” event from triggering?
or just create a validation routine and call it from the event i.e.
(pseudo code)
BUTTON EVENT FIRED
IF IsValid() then
'do something
else
'do something else
end if
func IsValid() as boolean
' check to see if the form is ready to submit i.e. required fields are valid
Thanks alot #Bryan and #max ..
I have done it as :
enable_button: ->
$("#my_button").attr("disabled", false).removeClass('disabled')
I am also changing the color of button on enable/disable.
Related
I have an ASP.NET Web Forms page that contains six text box inputs.
When a user tries to submit the form, I want to compare all six inputs to ensure all of the values are unique.
I know I can do this using code behind, but I would prefer to do this client-side. I know i can create a Javascript function to validate the input and cancel the form submission using return validate() on onClientclick.
The onclientclick event needs to:
1 cancel the submission
2 show an error message
Please let me know if this is possible.
I could not find an event handler for onClientclick.
You can't use a normal event handler in code behind because that requires a postback.
Use jQuery for the validation and setting the error message.
There is an event onSelectedIndexChange for DropDownList in ASP.NET which triggers when a selected index is changed for a dropdown.
I have encountered a situation where I need to trigger similar kind of event when SelectedIndex of DropDown does not change upon selection.
I am totally puzzled what to do in such a case?
Any help/references will highly be appreciated.
Thank you.
I think that is normal. The event is SelectedIndexChanged and you said you selected the same item that was previously selected before. So the index remains the same, not changed, and the event won't fire. May be you look at OnClick.
The issue is that you have not changed the index when you clicked the second time, so the dropdown is still waiting for you to change it
Assuming you have another server-side control on your page that causes a postback, you could write a routine in the postback event for the other control that compares the current selection with the previous selection and fire a custom-event (or the routines you want to happen) if the value has not changed.
That said, I have to imagine there's an easier way to accomplish the overall goal you're trying to achieve, but you'll have to be a little more specific in your question.
UPDATE
I have to assume that you are using the value from the dropdown when you are processing the form. Why not start off with the dropdown hidden and the linkbutton shown? Just select a default from the dropdown list and allow the user to change it as needed.
Here's a fiddle showing that behavior: http://jsfiddle.net/rjaum/
That's fairly easy.
You can achieve this using javascript/jquery/server side code etc. Assuming user does click the control.
Something like this on pageLoad
PageLoad()
{
YourDropDownList.Attributes.Add("onclick","javascript:CallHelloWorld();return false;");
}
Then on server side you can decorate a method with WebMethod attribute
[WebMethod()]
public static string HelloWorld()
{
return "Hello foo";
}
On your client side aspx you can use jQuery to call your webmethod
<script language="text/javascript">
function CallHelloWorld()
{
// Call HelloWorld webmethod using jQuery $.ajax
}
</script>
Edit
You can use a radiobutton list instead of dropdownlist. That way, on client side you can check the event when the radio button is clicked that it is checked or not (if its checked fire your event).
Edit
Also try looking at this thread if you want to use dropdown list specificallyFire event each time dropdown list is selected with JQuery
assign an a event handler to the selected index changed event and set autopostback to true
in markup
or code behind
mydropdownlist.SelctedIndexChanged += NameOfMethod
the handler is then defined like this
protected void NameOfMethod(object sender, EventArgs e)
{
//your code here
}
update
by definition the selectedindexchanged event would only fire when the index changes. if you want to force the postback that will require some javascript. here is an example of how to do that with jquery
$(function() {
$('select').change();
});
I have 3rd party user control (a captcha control), which has a captcha image, a text box within it.
I am using the above user control in my webpage. I have a 3 submit buttons on my webpage (Validate Captcha, Submit Page, Add User). When I click the Validate Captcha submit button using the mouse, I am validating whether captcha is empty and showing a javascript alert.
The problem comes when I enter the valid captcha text in the textbox and hit enter key when the cursor is in the textbox. The page just refreshes. I am unable to add keypress event to textbox and call Validate Captcha button event as I am using the 3rd party user control which I cannot modify.
Also, Page.ClientScript.RegisterHiddenField(...) will not work in my case as I have two other submit button inside the same page.
Only option left is to enclose these in panels and set default button.
Please let me know if anyone has any better options for achieving this.
Greetings! I too use alot of third party controls. The thing to remember about these controls, it that in the end they just emit HTML. This means you can use the DOM to access and attach event handlers such as onKeyPress. The trick is to identify how your control creator named the control you are looking for, in this case a {textbox}. The easiest way to achieve this is to simply run the page and view the page source. It is there that you can find the name as it is rendered and sent to the browser, after that all you have to do us use document.getElementByID to get the object and setup your handler
Example:
<script>
//Place this AFTER your textbox control is declared in the HTML
//Get the textbox
var textbox = document.getElementById('nameOfRenderedControlHere');
//Assign the event handler and function you want it to call
textbox.onclick = function() { validateCaptcha(); };
function validateCaptcha()
{ //Do your Stuff here }
</script>
That should be it..havent tested, let me knwo if you run into questions.
Put the captcha in its own <asp:Panel> and add a DefaultButton property for the panel with the ID of the captcha's submit button.
I am trying this in my Form Load Event
cmdCancel.Attributes.Add("onClick", "document.forms[0].reset();return false;")
but it doesn't clear my form. My form is a "ContentPage", part of a masterpage.
Am I missing something?
Try this:
cmdCancel.Attributes.Add("onClick","document.getElementById('" + this.Page.ClientId + "').reset(); return false;");
A call to "Reset" on a form resets the values to what was supplied in the markup for the page. So if there are any values supplied (via ViewState or any other mechanism) that is what the fields will be reset to, not blank.
Shouldn't cancel take you away from the form entry page?
It sounds like you are trying to code "reset", but you are functionally attempting "cancel".
Personally, I always have an event that fires on "cleanup" and does all form cleanup that I need to do (not just for reset form fields).
I have a table that is created in a DataList in ASP.Net. This table has three fields of text, then a field with an edit button, and a field with a delete button. When a person clicks the delete button, it posts back, deletes the items, and then binds the DataList again. The DataList is in an UpdatePanel so the item smoothly disappears after a half of a second or maybe a little more, but what I'd really like is for the row to slide out (up) as soon as they hit the delete button, and then have it delete the item on the post back.
I can make the row slide out with jQuery, but the postback gets in the way. How do you deal with that?
You can use page methods in asp.net to send a request to the server without doing a postback. They are very simple to use and you can do whatever effect you like when the ajax call is completed (you get a function called on success).
If you want to stick with the post back one solution is the following:
<asp:Button id="myButton" OnClientClick="return fadeThenAllowSubmit()" ... />
and in js something like:
var allowSubmit = false;
function fadeThenAllowSubmit() {
if (allowSubmit) return true
// do the jquery stuff that will be completed in, let's say, 1000ms
setTimeout(function() {
allowSubmit = true
$("input[id$=myButton]").click()
allowSubmit = false
}, 1000)
return false
}
It's a bit of a hack, the idea is to cancel the postback initially, do some stuff then set a timer where the postback will be enabled. The big problem with this approach is that the fade effect and the actual delete are independent (in case of an error you still get the fade effect).
have you tried looking at any of the Ajax control toolkit items? I believe there are some controls in there that will head with client side (java) code if your not extremely familiar
I would use client side Javascript to manually scale the "opacity" CSS property down to zero, then mark the element as "display: none" then submit the post-back.
I believe that in Internet Explorer, you need to use the "Filter" CSS property to do this as it does not support opacity.
You could just code up a routine to set both properties and that should cover all the major browsers.
Register the handler for form "submit" event.
$("form").submit(function() {
// if user initiated delete action
// do your thing with deleted row (effects, etc.)
// after you're done with it, submit the form from script
// (you can queue the submission after the effect)
// the submission from the script won't trigger this event handler
return false; // prevent submission
}
Preventing form submission is necessary to avoid interference with the effects you want to perform. After they are finished, you are free to proceed with submission.