I've seen similar questions and if there is one that addresses this question please close this as a duplicate.
Here's what I've got so far:
$("#findOffice").click(function() {
$('.register-location').attr('href', function(i, href) {
$(this)[0].click();
});
});
The idea here being they fill in the input and the submit button is #findOffice. After clicking the submit button a dynamic link is created and attached to a button called .register-location, this is then inserted into the DOM. I've used the $(this).[0].click(); successfully before for this purpose but it's not doing anything this time.
My question is, how upon creation of this dynamic link, can I automatically click this new button and move the user along without them having to do so themselves. Open to other ideas if a better solution exists.
Perhaps the link being dynamically inserted into the DOM is the issue?
This will work with JavaScript, but the Snippets editor here does not allow the window.open method. I'd recommend testing it elsewhere, and it will work there.
var href1 = "https://www.w3schools.com/jsref/met_win_open.asp";
document.getElementById('button').addEventListener('click', function() {
window.open(href1);
});
<button id="button">Click Me!</button>
Related
I have searched and searched and found nothing that explains what I need.
I have a webscript that has dozens of forms all over the place. I need to disable the submit button for 3 seconds after submit is clicked on any form no matter what the id, class, or action of the form.
I found the following code:
$('#btn').click(function(){
var btn = $(this);
$.post('http://someurl.com',{delay: 3}).complete(function(){
btn.prop('disabled', false);
});
btn.prop('disabled', true);
});
but this requires the form have an id of btn and it appears to require the form be "posted" to some page.
Is there a way to achieve this on all forms reguardless of the action being performed? So if its a signup form, it disables the "join" button for 3 seconds, if its a comment form, it equally disables the submit for 3 seconds after submitting comment, .... basically no matter what the form or action I want to disable the submit button for 3 seconds after click.
Is this even possible?
I have tried changing all instances of "#btn" to "input" but this doesn't seem to work. I am really not great at this stuff but seem to manage stumbling through things with the help of others.
The reason my question is NOT a duplicate of other questions is because I specifically stated "no matter what the id, class, or action of the form". The solutions presented on the other question do not specifically address this. Adding id's, classes, or the likes is not a remote possibility on a webscript with hundreds and hundreds of forms for various reasons (its a social networking script). The solution I marked as correct is the solution that did not require any attributes to be added to the html elements.
Try this.(pseudo-code, modify as needed):
$('#mybutton').on('click', function() {
$('[type="submit"]').prop('disabled', true);
setTimeout(function() {
$('[type="submit"]').prop('disabled', false);
}, 3000); // 3 seconds
});
Why not just bind a separate event for adding the disabled with a delay? You can still keep your own click logic for posting. Just assign the below code to a container element, or even the body, and give all the buttons you want to affect a class .mybutton (or something else).
$('.container').on('click', '.mybutton', function(event) {
setTimeout(function(){
$(this).attr("disabled", false);
}, 3000);
$(this).attr("disabled", true);
});
If you want the disabled to toggle depending on the 'complete' event for each call, you would have to create a prototype function with parameters, that can be assigned to each button. The above is with 3 second delay though.
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.
I have a webpage which contains one section called 'answer'. The 'answer' section should be hidden until users click the 'show-answer' hyper link.
So I use JQuery toggle command to achieve this:
$('.show-answer').toggle(function() { show_answer ...} ,
function() {hide_answer ...} )
It works well by itself.
However, I got a problem when I add another form on the same page. When the form is submitted, I redirect it to this page with an anchor "#xxx" appended in the end.
Then I found that the toggle function got triggered unexpectedly. Basically, if the 'answer' section is hidden before the form submitted, it becomes visible after the browser is redirected to the page.
May be using a click handler will help you
$(document).ready(function(){
$('.answer').on('click', function(e){
e.preventDefault();
$('.show-answer').toggle('show');
//Or use the following
//$('.show-answer').slideToggle();
});
});
A fiddle is here.
I have an C#.NET MVC3 web app and I have a question related to the attached Stackoverflow question. I am using a window.beforeunload event to see if there have been changes made on my View. If so, I alert the user that they have unsaved changes. However, if they selected the Create (submit) button, the dialog alerting the user still pops up. I want to NOT pop up the dialog if the Create button is selected. Any ideas? Is there a way to see which control was clicked?
I can think of 2 solutions:
$('#submitBtn').click(function() {
unbindOnBeforeUnload();
});
// OR
// maybe you have multiple cases where you don't want this triggered,
// so this will be better
var shouldTriggerOnBeforeUnload = true;
$('#submitBtn').click(function() {
shouldTriggerOnBeforeUnload = false;
});
...
$(document).unload(function() {
if (shouldTriggerOnBeforeUnload) {
confirm();
}
});
I've written it in a jQuery-like syntax, but only to keep the code concise, you can adapt it to anything you want.