Javascript function not being called at all - javascript

I made the following small Javascript script to enable some form elements on my page:
function unHide()
{
if($('#UserName').val() == "")
{
alert('Please Enter a User Name first');
}
else
{
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
}
The problem is, this isn't being called when the correct button is clicked. Even the alert doesn't show up. Here is the HTML:
<label for="UserName" style="vertical-align: top;">User Name:</label>
<input type="text" name="UserName" id="UserName" placeholder="Ex: LesniakBjEVS101" />
...
<a data-role="button" data-icon="check" data-mini="true" id="UserContinue"
style="float:right;" onclick="javascript:unHide(); return false;">Continue...</a>
...
<section id="nextButton" hidden>
<a href="salamanderSelect.html" data-role="button" data-icon="forward"
data-mini="true" style="float:right;">Next</a>
</section>
The problem I am encountering is when I click on the submit button, absolutely nothing happens. I am not getting any feeback from the Javascript, nor anything.
Any help would be greatly appreciated!
Thanks!
Edit:
After trying out suggestions, I still am unable to get the javascript to do anything. I have tried multiple browsers, but still nothing.
And I just had this working yesterday too...without any changes to the code too
Edit 2:
Apparently it works if my script is the last thing in the HTML file, even outside of the tags.

While onclick doesn't need javascript:, it should still work in many browsers. Here is a jsfiddle of your example: http://jsfiddle.net/ukWcp/2/
Only use javascript: in an href.
While i suggest debugging using the javascript console and debugger in firebug or chrome, others have mentioned using an all javascript solution for your bindings. That is preferrable.

As you're using jQuery already, why not use it to attach your events, rather than using the clunky onclick attribute.
<a data-role="button" data-icon="check" data-mini="true" id="UserContinue"
style="float:right;">Continue...</a>
$("#UserContinue").click(function(e) {
if($('#UserName').val() == "") {
alert('Please Enter a User Name first');
}
else {
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
e.preventDefault();
});

$(document).ready(function() {
$("#UserContinue").click(function() {
if($('#UserName').val() == "")
{
alert('Please Enter a User Name first');
}
else
{
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
return false;
);
});
If you're using jQuery, why not fully use it? The return false at the end stops the click event from continuing if that was what you desired.
Edit:
You say in your original post "The problem I am encountering is when I click on the submit button, absolutely nothing happens. I am not getting any feeback from the Javascript, nor anything."
Yet you have attached a click event to your incomplete anchor tag (it's missing the href). So are you expecting the behavior to trigger on clicking the submit button or clicking the anchor tag? If you are expecting the trigger to fire on clicking the submit button, then you need to change $("#UserContinue") to reference the submit button and not the anchor tag. Or use the .submit() event handler instead of .click(), http://api.jquery.com/submit/.
If this is not the issue, then I suggest editing your post to include all of your code and saying what behavior you expect after clicking which elements.
Edit 2:
I believe you are not wrapping your jQuery around the .ready() function, please see the revised code snippet that now includes .ready(). .ready() ensures the DOM is fully loaded before working with your jQuery.

Keep your function and add the event handler to your javacript and NOT in markup:
$(document).ready(function() {
$('#UserContinue').click(function() {
unHide();
});
});
short version:
$(document).ready(function() {
$('#UserContinue').click(unHide);
});

Related

Calling .mouseenter( ) is working even though .click( ) won't trigger animation

In HTML, I have a button with the id of "submit1"
<div id="first">
<form>
<input type="radio" name="school" value="pitt">Pitt<br>
<input type="radio" name="school" value="memphis">Memphis<br>
<button id="submit1">Submit</button>
</form>
</div>
Now in Jquery, I try to use a .click() to trigger the div "first" to fadeOut, like so:
$(document).ready(function() {
$('#submit1').click(function(){
$('#first').fadeOut('slow');
});
});
Weirdly enough, nothing happens when I click submit. I thought maybe it wasn't calling my .js file, but alas, when I change it to a .mouseenter( ), it works perfectly to trigger a fadeOut of the div.
$(document).ready(function() {
$('#submit1').mouseenter(function(){
$('#first').fadeOut('slow');
});
});
I saw an old Stack Overflow post where they used alert instead of an animation, so I tried that too during debugging and it still worked. It is literally just animations that seem to break things (tried .slideToggle, .slideDown, etc. just to check). Thanks!
Since the submit button is inside a form element, the default click behavior is to submit the form to the server. Internally, the JS is being called but this also causes the whole page to refresh so you don't see the animation happening. In order to prevent this, change your code to prevent the default submit behavior:
$('#submit1').click(function (e) {
e.preventDefault();
$('#first').fadeOut('slow');
});

jquery click not getting triggered on IE

I've seen a lot of posts on this issue but none of the solutions worked. The following..
<script type="text/javascript">
$(document).ready(function() {
$("a.login_linkedinbutton").click(function(){
$("#signup-form").submit();
return false;
});
});
</script>
is what I have in the body tag of a page. Also in the body is the form, the html of which in IE shows up like this..
<form accept-charset="UTF-8" action="/auth/linkedin" class="well form-inline" id="signup-form" method="post">
<a class="login_linkedinbutton" href="#">Login using Linkedin</a>
</form>
in IE8, when the link within the form is clicked, the jquery is not getting triggered. It's working in Chrome and Firefox. I've tried:
1) Using the live event to bind the click action
2) Moved the jquery out of the page and into rails assets
Any ideas what else to try?
Use <input type="submit" value="Login using Linkedin">
Why create problems by using a non-standard element and then trying to recover from it?
If you want it to LOOK like a link, just style the button. But why do it? It's poor user experience to suggest the user to go to another page while they're submitting a form. Most users avoid clicking links when they have a form filled because they're afraid of loosing what they just typed.
If you insist using the link, you could try this:
var onLinkedInLogin = function(e){
e.preventDefault(); // stops the link processing
$("#signup-form").submit();
// add return false; if you want to stop event propagation also
// equivalent to calling both, e.preventDefault() and e.stopPropagation().
};
$(document).on('click', 'a.login_linkedinbutton', onLinkedInLogin);
The reason I'm suggesting using .on() instead on .click() is that I guess that on IE, the a.login_linkedinbutton is not present in the DOM when you call the .click().

OnClick bypasses form submit

I have a form which is made like this:
<form id= 'lol' name = 'whyyyyy'>
<input name='dumbo'>
<input name='idiot'>
<input type='submit' value='I have no idea why its like this' onclick='document.lol.submit()'>
</form>
Now, I want to prevent the actual sending of the form, but so far all attempts failed.
My current code looks like this:
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
})
but the inline submit command bypasses as it seems the jQuery function.
Can someone shred light into it?
EDIT:
The form CANNOT be changed, I don't have permission to change.
the on click code should trigger the submit function, it some complex validation wall of code in it. So I have to cache the submit action that it triggers, but I can't do that at moment.
the submit function should be triggered on send but it does not get triggered.
Here is an example of the code in jfiddle. As you can see it gets past by jQuery...
http://jsfiddle.net/StCPp/4/
if you don't need a submit button, why don't you use a regular button instead
<input type="button" />
<input type='button' value='i have no idea why he done it like this' onclick='document.getElementById('lol').submit()'>
Just use a normal button instead of a submit.
If you want to bypass a submit button you can make the class of the button cancel.
<input type='submit' class='cancel' value='i have no idea why he done it like this' onclick='document.lol.submit()'>
In your add-on JavaScript, remove the inline onclick event and replace it with whatever you desire. Problem solved.
You could also completely remove his button and replace it with one of your choice.
Remove the document.lol.submit function. This way, you can do whatever you want.
// Magic line
delete document.lol.submit;
// Or
$('form[name="whyyyyy"] input[type=submit]').attr('onclick', '');
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
});
Ok so if I got this right you could remove the inline event handler onclick and add your custom handler (where you do the validation and all necessary steps):
$(document).ready(function() {
var $submit_button = $('input[type=submit]');
$submit_button.removeAttr('onclick');
$submit_button.click(function() {
//TODO: implement your custom handler
//execute validation etc.
});
});
Remove the onclick
$('input[type=submit]').attr('onclick','')
Then add the click event to function ready
$('input[type=submit]').on('click',function(){
//do your event
});
You aren't necessarily required to use jquery to implement this. You could use standard javascript.
$(document).ready(function(){
document.whyyyyy.submit = function(e){
alert(1);
return false;
};
});
This example works, but you might be hitting a jquery bug.

jQuery Tools Overlay - Two buttons with different close conditions

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.

Problems using replaceWith after .click

Probably a simple noob error but I cannot figure it out. I have a submit button and after the user clicks it I want it to disappear and be replaced with "Thanks for submitting your info".
Here's what I have:
<script>
$(document).ready(function() {
$('#emailsubmit').onClick(function() {
$(this).replaceWith('<p>Thanks for signing up!</p>');
)};
)};
</script>
<input id="emailsubmit" name="submit" type="submit" value="Send " />
Looks ok to me, but on click, nothing happens. Any advice would be greatly appreciated.
The name of the function is click, not onClick, and you have a couple of syntax errors to boot.
$(document).ready(function() {
$('#emailsubmit').click(function() {
$(this).replaceWith('<p>Thanks for signing up!</p>');
});
});
You best use click instead of onClick
You're confusing inline, DOM-zero events (onClick) with jQuery's alias event methods.
jQuery has a click method (short for on('click...) but no onClick() method. This would throw an error, meaning you should always consult your browser console before anything else.
$('#emailsubmit').on('click', function() {...
The method is named click not onClick.
Also, removing the submit button will keep the form from being posted. Hide it instead:
$(this).hide().after('<p>Thanks for signing up!</p>');

Categories

Resources