HTML Form Multiple Submit Buttons Primer Tutorial

HTML Form Multiple Submit Buttons Primer Tutorial

HTML Form Multiple Submit Buttons Primer Tutorial

Today we want to discuss a very old HTML concept called the form tag which allows for the processing of interactive input from the user in the form of textboxes and checkboxes and radio buttons and buttons to transfer information from one webpage to another, somewhere.

For clarity, today, we only use buttons, and you may ask, “What good are buttons on their own for imparting information?” … and will ignore the obvious answer that a button press anywhere, depending on the event logic, can mean so much … after all, we all envisaged the disaster of a nuclear holocaust envisaging the press of one button … no, we want to talk about the idea that you can have more than one input tag with type=’submit’ … and this was not always the case, because in the early days of HTML there was the one submit button allowed on one HTML form … now you can even have more than one form … but this is for another day.

Anyway, you might still ask, anyway, “Ignoring the huge event logic possibilities of a button press (because you are not trying to trick me here), what good are buttons on their own for imparting information?” … well, it means on the callback … and today we just callback the same HTML code (via the form‘s action= designation of itself, today) … as we often like to do at this blog, by the way … we can compartmentalize via the GET (in our form’s method case … for starters, with POST we’d need Ajax or a server language, and remember we are trying to keep things more basic here) parameters in the callback URL (stored in “Javascript DOM land” as document.URL) according to the value of that submit button whose name becomes that GET parameter’s name … so that for an HTML form‘s submit button like …


<input type='submit' title='Submit of form to an embedded iframe' onclick='cif();' name='submitiframe' id='submitiframe' value='Validate and Iframe'></input>

… its contributing part of the callback URL, in our code, is …


... ?submitiframe=Validate+and+Iframe ...

… and so we can, in Javascript, at the onload event‘s code … have an else if statement like …


} else if (document.URL.indexOf('iframe=') != -1) {
// do something here
}

… to have a good compartmentalizing of “action” segments of code that is quite readable and understandable.

If the case is not clear … please tee up a live run with the HTML programming source code multiple_form_submit_buttons.html … or else please try some HTML code yourself … the hardest concept here today is the embedding of an iframe in a hierarchical way (note the Javascript DOM manipulation of the form‘s target= designation, as you examine the downloadable code above), and so for clarity we preface any iframe by a current client (ie. Javascript) timestamp, so you know who inherits who etcetera etcetera etcetera.

Now even after all this, you may want to say, “So what … an HTML a tag link can do all this. … to which we say … that’s true … good to know there is more than one way to “skin a cat” … meowwwwwwww! … “no animals were harmed in the making of this tutorial”.

In fact you could go on and on and on with possibilities for the equivalent means by which to achieve the ends we have here with our HTML, such as using an input type=”button” or in HTML5, a button tag, and all these and more and more and more and more are worth exploring, and trying, yourself, or by researching the subject. One day, in a real bind, with cross-browser issues, you may need that extra method, to make things work for all the platforms?!

Did you know?

With an HTML input type=”submit” (submit button), there is nothing stopping you storing more than just the “front look” of the button in its value= parameter. If you want to do this, but there is no way you want to show that “data” as the “front look” of the button, perhaps it really should be an input type=”hidden” piece of data, or you should hide it … via style=”display:none;” … Javascript DOM store data to it via document.getElementById([itsID]).value=[myData]; … and, conditionally perhaps, click it via Javascript, via document.getElementById([itsID]).click(); method.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, GUI, Tutorials and tagged , , , , , , , , , . Bookmark the permalink.

18 Responses to HTML Form Multiple Submit Buttons Primer Tutorial

  1. I am glad that it turned out so effectively and I hope it will continue inside the future because it is so worthwhile and meaningful towards the community.

  2. dance says:

    My web searches seem total.. thanks. sure, study is paying off. yes, investigation is paying off. My personal internet browsings seem complete.. thank you.

  3. This needs to be one of my beloved posts! And on leading of thats its also extremely beneficial topic for newbies. thank a whole lot for the info!

  4. Hello, incredibly fascinating article. My sister and I’ve been searching to locate thorough ideas about this type of stuff for a time, however we could not until now. Do you consider it is possible to create several youtube videos concerning this, I do believe your internet weblog will probably be far a lot more thorough should you ever did. In any other case, oh properly. IÒ€ℒm going to be checking on this web-site within the forseeable future. E-mail me to preserve me up to date. granite countertops cleveland

  5. I’m impressed, I should say. Absolutely seldom do I encounter a weblog that’s the two educative and entertaining, and permit me tell you, you have hit the nail on the head. Your thought is remarkable the issue is some factor that not adequate individuals are speaking intelligently about. I’m incredibly pleased that I stumbled across this in my search for something relating to this.

  6. Spot up for this write-up, I seriously believe this internet site needs a whole lot much more consideration. IÒ€ℒll apt to be once more to learn additional, appreciate your that information.

  7. careers for history majors says:

    Terrific post, you have pointed out some terrific factors , I as well consider this s an extremely wonderful website.

  8. restaurants in Nairobi says:

    Hi Im itching to understand if I might use this article in certainly one of my blogs if I link back to you? Thanks

    https://justpaste.it/su17

  9. Delicate says:

    Hello there, just became alert to your blog through Google, and found that it’s truly informative. I am gonna watch out for brussels. I will be grateful if you continue this in future. A lot of people will be benefited from your writing. Cheers!

  10. appealing says:

    I wish to express some appreciation to the writer just for rescuing me from this type of challenge. Just after looking out through the search engines and seeing principles which were not beneficial, I figured my life was over. Existing devoid of the solutions to the issues you have solved by way of your write-up is a crucial case, as well as ones that might have in a negative way damaged my career if I hadn’t encountered your blog. Your actual ability and kindness in taking care of all things was excellent. I’m not sure what I would’ve done if I had not discovered such a solution like this. I can also at this point look ahead to my future. Thanks for your time very much for this reliable and amazing help. I will not be reluctant to refer the website to any person who ought to have care about this problem.

  11. fine says:

    Some truly choice content on this internet site , bookmarked .

  12. amount says:

    So content to possess identified this submit.. Take pleasure in the entry you supplied.. My internet searching seem full.. thanks. Loving the thread.. best wishes

  13. room says:

    yes, analysis is having to pay off. Supporting the posting.. thank you Is not it fantastic if you discover an excellent publish? Isn’t it good whenever you find a very good publish?

  14. this link says:

    I value you sharing your point of view.. So pleased to have located this article.. Treasure the admission you delivered.. So happy to have found this publish..

  15. I appreciate you writing your point of view.. Really interesting standpoint, appreciate your sharing.. Love the posting you furnished.. So content to have located this article..

  16. Hi I am so excited I found your web site, I really found you by error, while I was looking on Yahoo for something else, Anyhow I am here now and would just like to say cheers for a marvelous post and a all round exciting blog (I also love the theme/design), I don’t have time to browse it all at the moment but I have book-marked it and also added your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the superb job.|

  17. Please allow me recognize {so that|in

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>