Jump to content

Simulating a Button Click with the Enter Key


iwato

Recommended Posts

Quote

I hear you, but the browser apparently does not.

That's not the way to think about that.  The browser only does exactly what it is told to do, it doesn't think on it's own, and there is no bit value that represents "maybe" in a computer system.  It is true, or it is false.

 

Quote

I am now of the firm opinion that you're all guessing.

 

You know, that kind of attitude doesn't really help either.  I can't speak for anyone else, but when I'm helping you it's more than 2 decades of Javascript experience talking.  And if you want to know what that 2 decades of experience is telling me, it's telling me that you copied and pasted code from somewhere else onto this page and it's adding event handlers that you aren't thinking about which are interfering with what you're trying to do.  If you want to verify on your own that the concept we are telling you works, then create a new blank page with nothing on it.  Add your boilerplate HTML.  Add jQuery.  Add a form with whatever controls you want in it.  That should be the only thing you see when you open the page, form controls on a white background.  Now add the code we're telling you to add that captures the submit event only, and test it.  And then come back and tell us whether we or you have the better idea of how Javascript works.  

This is why I told you to start over, remove the code you have, start with the default browser behavior, and then use progressive testing to do what you want to do.  It sounds like you're trying to re-invent the wheel on every page on your site though, it's confusing for me to use your site because it doesn't always do what I expect it to do, you're changing the common behaviors of links and forms and things that everyone understands.  The best advice is to keep it simple.  There is no virtue in adding complexity for the sake of complexity.  The vast majority of what you're trying to do with your site can be done without a ton of Javascript trying to change the behavior that people are accustomed to when using websites.

An example of the over-complexity is what happens when your site first loads.  I immediately get a popup, which is a slideshow, and the first slide of that slideshow is another slideshow.  How many levels have you nested slideshows, does that nested slideshow have another nested slideshow on one of the slides?  Is it a good interface design to have multiple sets of slideshow controls embedded in each other?

Link to comment
Share on other sites

Step 1 is complete. We have verified that clicking the button does not fire the form submit event. Now we have to find out why.

Keeping the code the same as in my previous post, verify that you are using  <input type="submit"> and not <input type="button">. If you're using "button" then change it to "submit" and test again.

If that was not the issue, the next step is to make sure that you have no form validation attributes. Attributes like "required" will prevent the form from submitting.

If the issue is still occurring after that then reply here with your form's HTML structure and the small block of code that handles the form's events and we can move on from there. 

  • Thanks 1
Link to comment
Share on other sites

PROBLEM RESOLVED:  Hooray! Hooray! Hooray!

The Crucial HTML: Notice that the value of the type property has been changed from button to submit.

<input id='qa_submit' type="submit" class='SearchButton' value="Search">
(function() {

	$('#qa_searchform').on('submit', function(event) {
		event.preventDefault();
		var search_qa_input = $("input#qa_input").val();
		findAndDisplay_qa(search_qa_input);
	});

	function findAndDisplay_qa(search_qa_input) {
		var dataString = 'search_input=' + search_qa_input;
		$.ajax({...});

	}

})();

You might still be able to help, however.  Can you explain why my the following code fails in regard to the appearance and disappearance of the error message.  The console offers no hint of error and the ELSE clause functions just as it should.

$('#qa_searchform').on('submit', function(event) {
    var search_qa_input = $("input#qa_input").val();
    if (search_qa_input == "") {
        $("#qa_input_error").show().append('<br />');
        $("#qa_input").focus().focusout(function() {
            $("#qa_input_error").hide();
        });					
        return false;
    } else {
        event.preventDefault();
        findAndDisplay_qa(search_qa_input);
    }
});

Roddy

 

Link to comment
Share on other sites

Please ignore my last request.  I got my error message to appear by eliminating the required property in the <input type='text'> form control.

All of my desires, but one, have now been satisfied in regard to my search engines -- my digital toilet paper.  Further, this success has taught me that I must now go back and modify all of my other forms for which I have suppressed the default behavior, and there are many.

Alas, when does one ever get to celebrate success?

Thank you everyone for your effort -- especially, Ingolme, for holding her own.

Roddy

Link to comment
Share on other sites

You should really consider using more of the default behavior in general.  For example, your navigation bar on the left side - none of those are actual links, it's just a bulleted list that you handle with Javascript.  Google will not follow any of those, because they aren't links.  There is a design concept called graceful degradation, where if your user supports fewer features, your site still works.  For example, if your user is using a screen-reader because they're blind, and they aren't running Javascript, they can still navigate on your site.  The way that gets implemented is to use actual links which go to actual URLs which work, but you can use Javascript to handle click events on those links to load with ajax instead, for example.  So that site would be convenient and fast to use for most people with browsers that support Javascript, but even if they don't there are still regular links that go to regular pages.  That is also how search engines work to index websites - they follow the links on the page.  In terms of the search form, it would mean that the action of the form goes to a working page that will show the search results in the site page template like normal, or you can handle the submit with Javascript to do an ajax search.  Then, whether they support Javascript or not, the search form still works.

Any time you prevent the default behavior for anything, you should have a good reason to do so.  People have come to expect web sites and web browsers to behave certain ways, and when the behavior suddenly changes people get confused.  In practice, the general response to that is to close the web site unless they're required to use it for some reason.

It should also be a goal for every web site where every page has a canonical URL that points to it.  If you can't give people a direct URL to any page on your site, but instead have to tell them to go here, then click this, then scroll down about halfway or so, then click that, it's another barrier to people being able to conveniently use your site.

Anyway, just some considerations.  Ultimately you're the boss.

Link to comment
Share on other sites

JSG:  I appreciate your suggestions, but they must be saved for a later phase of development.  I have been working on the current phase for nearly 16 months -- far longer than I ever expected.  I must begin creating content.  Who knows?  What I am expecting to be great content appreciated by many, might be met with important resistance in the global language industry; I have many natural enemies.  Indeed, I am already weary of living in developmental poverty and catering to the subsidized blind at this point is a burden that I have no desire to bear.  

This said, I will be doing my own analytics with Matomo and am hoping to have far better control over what gets counted and what does not.  

My goal is to depend on Google as little as possible for my commercial success, as I have already come to know Google as a political monster that censors its users without due consideration.  

In the end, the internet is a jungle that I truly appreciate.  One has only to avoid the carnivores and poisonous serpents that guard the state -- what Thomas Paine  once described in his 1776 political tract Common Sense as a necessary evil.  America's founding fathers were wise, but the American people did not heed their call.  As a result they have been led astray by their leaders mesmerized by technological advancement and opiated by their preference for consumption over wisdom.

In liberty,

Roddy

 

Edited by iwato
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...