I run a large Discord server and I'm making a channel for people to post template information about their online groups. To make complying with the template either, I've created a single HTML page which takes the information that goes in the template and regurgitates it into a box on the bottom of the page with some nice bolding and italics where needed already for copy/paste.
Unfortunately, I don't know Javascript so I'm just trying to piece things together and learning as I go. (I'm learning other languages but not this one in school.)
For some reason me trying to format code on here isn't working so I can't paste what I have so I'll just try and explain it.
I'm using oninput="groupNameFunction()" and I'm having the javascript grab the user entered data as they type it via grabbing the ID of the input field then regurgitating it out in the innerHTML of another element. And it works great.
But checkboxes (and probably radio buttons) don't work with oninput (for pretty obvious reasons) but I've been able to get onblur to work to some extent.
The problem is that I'm a beginning coder and I don't quite know or understand how I'll take all the results from all the checkboxes and regurgitate them out into a nice list when there are many IDs and many choices and it doesn't seem sensible to try and write all choices from a single thing into their own function, or how I'll handle the same thing with radio buttons.
I can't find any examples in stuff like W3 tutorials of this being done, it's probably that I just don't know the language to google it correctly.
Could someone point me in the right direction on how to make this work?
here's a little fiddle for you to play with. (press F12 to open developer tools and see console, you'll find logs there)
for radio and checkbox inputs you have change event, it triggers when user check and uncheck the box. bare in mind that you need to have same name="friendly-name" attribute on radio buttons in order them to work as expected.
for the "text" filed use input event.
don't add inline events in HTML, it's bad practice, add them via JS. from JS you can select all your inputs by ther class, name, tag name etc.. and add event handlers (you can find everything in the fiddle).
hope it helps. :D
Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.
I'm trying to build a webform that has multiple stages. I'm patterning it off of the Stack Overflow / Stack Exchange flagging webform. The problem is, I'm not sure how to trigger the "next stage" action.
To illustrate, if one wants to flag a question on Stack Overflow, you click flag and then a popup prompts you to make a choice. If you choose the second option ("it doesn't belong here, or it is a duplicate") the form automagically takes you to a second screen.
First screen:
Upon click, it auto-redirects to:
The problem is that I don't know what the underlying trigger is. How does clicking that radio button send the end user to the next screen?
I tried checking the source, but I have a feeling I'm only seeing half the picture:
No amount of HTML tutorials I find have any practice example similar to this. I suspect this is JavaScript, but I can't find the linked .js file that would trigger these actions.
So: How does the webform auto-redirect upon click? As a follow-up, if it's using JavaScript, is there an HTML/CSS-only workaround I can use?
It might help to think about this at a lower level than frameworks. There are two ways one could make a multi-stage form.
The first (and generally older) way is to store the state on the server. Each stage of the form is actually a separate form, and the client's progress through the questionnaire is kept on the server (for example, as part of the session data).
The second way (the more modern one) is to use JavaScript, as you suspected. There is actually very little black magic in this case, and no auto-redirects on clicks at all. All you do is have one very long form where you show/hide some of the elements depending on the user's selections (of course, you could have multiple <form> elements which you show/hide).
Well, I'd use some sort of jQuery wizard plugin and adapt it to my needs. I did it very recently and it wasn't that hard. You should try SmartWizard 3.0, it's pretty active, the last release was about 2 months ago and the coders answered my questions pretty fast.
Here it is: https://github.com/mstratman/jQuery-Smart-Wizard
You can trigger the wizard to advance to the next step linking an event to the action of clicking the radio button.
Good luck :)
Philosophical question:
Say I've got a web app that requires javascript and a modern browser, so progressive enhancement is not an issue. If my form is being built via javascript, and my data updates are all being done via ajax POSTs & PUTs, is there really any reason to wrap my controls in a form tag? If I'm still going to use the tag, say for semantic or structural reasons, is there any reason to have action and method params that I'm going to ignore? It kind of feels like a hold-over from an earlier era to me.
There is at least one important user-experience feature provided specifically by wrapping inputs inside a form tag:
The enter key will submit the form. In fact, in Mobile Safari, this is how you get the "Go" button to appear on the keyboard.
Without a form wrapping the inputs, there is nothing to submit.
You can of course provide enter-key behavior through a keypress event, but I don't know about if this works for mobile devices. I don't know about you, but I'd rather work with the semantics provided by the browser than have to imitate them with events.
In your case, you would simply provide an onsubmit event handler for the form, which would do your AJAX submit, then return false, canceling the actual submit.
You can simply provide action="" (which means "self"), and method is not required — it defaults to GET.
If you do not need progressive enhancement, you theoretically don't need them.
On the other hand, forms have some cool grouping and semantic effects. Using them, you can group your form elements logically, and make it easier for your scripts to gather the values of certain elements.
For example if you want to ajax-submit some user input, it is always easier to say: "let's take all elements in this form and submit them" than saying "let's take this input, these two selects and these three textareas and submit them". In my experience, it actually helps the developer if form tags are present.
AJAX is great but as JamWaffles (+1 to him) said, using form tags provides a fallback method.
Personally I use form tags, even for things I submit with AJAX because it is syntactically clear and makes it easy to grab all inputs within a specific form. Yes you could do this with a div or whatever too but as I said, using a form is syntactically nice.
Incidentally, screen readers treat the content inside a form differently so there are accessibility issues to be considered whichever way you choose to go. Note that anecdotal evidence suggests that Google considers accessibility in its rankings so if SEO is a concern for you, use a form and do it right.
Summary:
forms OK for MVC, simple web apps, bad for component oriented, rich web apps.
Reason:
forms cannot nest other forms: big limitation for a component-oriented architecture.
Details:
For typical MVC applications, forms are great. In rich, complex web applications using a lot of javascript and AJAX and with a lot of components here and there, I don't like forms. Reason: forms cannot nest another forms. Then if each component renders a form, components cannot nest each other. Too bad. By changing all forms to divs, I can nest them, and whenever I want to grab all parameters in order to pass them to ajax, I just do (with jQuery):
$("#id_of_my_div").find("[name]").serialize();
(or some other filtering)
instead of:
$("#id_of_my_form").serialize();
Though, for sentimental and semantic reasons, I keep naming my divs something_form when they are acting as forms.
Not that I can see. I'm currently building a web application that uses <form>s, but I'm using them so I have a fallback method if the user has JavaScript disabled (an e.preventDefault stops the form posting normally). For your situation, where you're saying the user MUST have JavaScript, a <form> tag isn't necessary, but it might be an idea to keep it anyway in case browser need to do anything with it, or to access it as a sort of class.
In short, no, you don't need to use <form> if you're doing pure AJAX, although leaving it in might an idea if you suddenly decide to create fallback code in the future.
In my opinion: If you use it for semantic reasons, then use it as intended. The action attribute is required (also can be left empty) to be well-formed, also you can separate your URI-s from your js logic, by setting the action attribute, and reading it before the ajax call.
I don't see why you would need to use the form tag here. The only reason to use a form tag (other than to get your markup to validate) is if you are going to have the user "submit" the data using a sumbit input or button tag. If you don't need to do that, then there is no need for the form. However, not sure if it will be considered "valid" markup. If you do use it you can just do <form action=""> as action is the only required attribute of the form tag. However, you do bring up a good point, the future of web applications probably will no longer need the form and traditional submit methodology. Very interesting, and makes me happy. hehe :)
I'm making a form to order different varieties of sweets from a website. At the moment I have checkboxes with each variety. Once they have chosen the varieties they want (they can have more than one) then I need some more information. To do this I want to display a new box when they check each checkbox. Event attributes seem to be adequate, but I don't really know javascript, so is this the right way for me to do it? Can event attributes only trigger javascript?
Or perhaps I'm going about this the wrong way, would there be a better way to make this form? I've considered a shopping cart but for what I want I think it's too much, and I'm not very advanced.
So, I just want a way to show html after a checkbox has been ticked, or a better way to make my form.
Thanks
If you have skills with server-side programming (PHP, ASP, ASP.Net, JSP), that may be the way to go. When the checkbox changes, redraw the options using AJAX of some flavor (e.g. an ASP.Net UpdatePanel). This will avoid doing much with JavaScript on the client, even though it's certainly doable that way.
If you aren't strong on either client or server-side programming, a third-party shopping cart is probably the way to go. I would start your investigation with PayPal.
Important: if you do write your own order form, make sure you are not storing credit card numbers at any point in the process. Avoid even having credit card numbers submitted to your site if at all possible. Become familiar with PCI Compliance. This alone is often a justification for using a third-party tool.
EDIT: Per Paul's comment below that he wants to keep it as simple as possible and no transactions will be handled:
"Can event attributes only trigger javascript?"
Yes, either inline JavaScript or script contained in an external file, or elsewhere on the page in script tags.
Here's a little sample of one checkbox triggering other HTML elements (in this case, other checkboxes): http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html
You can show or hide an element using code like this:
var elementToToggle = document.getElementById('someId');
elementToToggle.style.display = "none"; // hide
OR
elementToToggle.style.display = "";
Using the jQuery (www.jquery.com) library would potentially make this simpler, but there is an initial learning curve.