i doing some shopping cart ui in html.
I would like to avoid nested form but any solution which allow me to route request to two different handler is preferable with the data included. There are two requests are delete item and check out.
I wonder what is the alternative solution to nested form.
Please help.
Thanks.
You can't have nested forms in HTML, so you have to use an alternative.
The form that you post doesn't have to be located where the information that you want to post is located. You can use Javascript to copy the information from some fields in the page into hidden fields inside a form somewhere else on the page, and post that form.
This will also make the page simpler. You can use a single form for the delete function, instead of having one form for each item.
Related
I searched around on the site before posting so I hope this isn't a duplicate, but this has been a question that has been bothering me.
Why doesn't HTML allow nested forms (without JS)? I have seen that it doesn't allow nested forms, but never why they are not allowed. To me, it doesn't make sense why they aren't allowed, especially if each form routes to two different actions. Why is this?
HTML doesn't all nested forms because they would cause more problems than they solve.
Forms in HTML are built for single HTTP requests. If you submit a parent form, should you submit the child form as fields in the parent form to the parent action? Or should the child fields be submitted to the child action as well? How do you handle the responses to both of these requests? Which response do you render? What if the parent submit fails and the child succeeds? How do you handle this in the response markup?
Any of these answers are handled in script rather than markup.
If the fields are required in the parent form, that should be part of its form as a single encapsulated way to represent the data needed for a single request. Any nested form is its own request and should be encapsulated as such.
The reasoning behind this is because the <form> tag expects an event action to be specified and having one form within another form would only cause problems because each form is expecting a different event to occur which could cause unexpected results with submit buttons because their default event to fire is whatever event has been specified in your form action.
The being said, you can have multiple <form> tags on a page, just not nested.
EDIT
You can also read the W3C documentation on the form element here: https://www.w3.org/MarkUp/html3/forms.html
One of the first thing it says is: **
Note you are not allowed to nest FORM elements!
**
I can understand why it seems like this might work...
Think about HTML code in general; you open a <tag> and close the </tag>. Most of the tags can contain multiple other tags, right? The header tag holds tags for the <title>, <meta data>, etc., and the <body> tag wraps a whole bunch of stuff together before you see the </body> tag. Some tags have different rules; like the <img> tag which stands alone. The <form> tag falls into one of those tags with "different rules".
A <form> is actually part of a script. It is presented on the HTML page to your site visitors as a means of gathering information. Once the site visitor clicks on the submit button, the <form> sends the information to it's related script to be processed. All of the <form> tags, whether they are <input> values, <checkboxes>, or <password> fields, are bundled between the opening and closing </form> tags.
Every <form></form> sends information to a seperate script. So, a script that logs the user in would need one <form></form> and a script that allows the user to change his password would be another <form></form>. If you want the script to handle both options, then you would have to code your script to process all of those bits of information.
In summary, a <form></form>cannot be nested because they function as a User Interface to gather information that will be processed by a script stored on your websites' server.
I am volunteering on a website-based project that is trying to make all pages fully operable JavaScript free before adding any JavaScript for enhancements, and I was asked to investigate whether or not a particular scenario could be handled purely through HTML/CSS.
What we have is a form that is populated to help us filter a list of tickets that are displayed on the screen after a page update through a GET action, which itself works fine, but the concern with the current implementation is that the URL cannot be made into a permanent link. The request, however, to keep the permanent link as minimal as possible, is to only send GET parameters for fields that are populated with something (so, suppressing GET parameters for fields that are blank) instead of having a different GET parameter for each form field on the page.
I have thought of several ways that could be done, most including JavaScript (example: create fields with ids but no names and a hidden field w/ name that uses JS to grab the data from the fields), but also one that would be a POST action with a redirect back to the GET with a human readable string that could be permanently used. The lead dev, however would prefer not to go through the POST/redirect method if at all possible.
That being said, I'm trying to make sure I cover all my bases and ask experts their thoughts on this before I strongly push for the POST/redirect solution: Is there a way using only HTML & CSS to directly suppress GET parameters of a form for fields that are blank without using a POST/redirect?
No, suppressing fields from being submitted in an HTML form with method of "GET" is not possible without using JavaScript, or instead submitting the form with a POST method and using a server side function to minimize the form.
What fields are submitted are defined by the HTML specification and HTML and CSS alone cannot modify this behavior and still have the browser be compliant with the standards.
No, you cannot programmatically suppress any default browser behavior without using some kind of client scripting language, like JavaScript.
As a side note, you say "JavaScript for enhancements", but JavaScript is not used for enhancements these days. And no one in the real world would except a decent front-end without the use of JavaScript. I would suggest you simply use JavaScript.
I do not think you can avoid Javascript here to pre process before submission to eliminate unchanged /empty form fields.
Much like the mailto: link you can add ?subject=
I wanted to be able to create a web link which would send you to a webpage that contained a form.
In that Form, I would like the value of the TextArea to contain information Inserted by the contents of the referring Weblink.
Example:
example.com/page-url?textarea=content
Is that possible? If so, can you tell me?
I pay in chocolates.
Thanks for your time and I look forward to any replies.
Plain HTML can't do this by itself. You'll need to use Javascript or some kind of server-side processing to get the values from the submission.
Forms have two methods - POST, which submits through the headers, and GET, which submits through a querystring. With the querystring it's easier for users to mess with your data, so keep that in mind as you design this. (Not that it's impossible with POST, but it takes a little more work)
Since you're passing to a textarea, make sure you URLEncode your post or things like spaces will cause you a lot of headaches.
I am new to HTML and still trying to understand some concepts. Here it is one that I do not understand at all. After trying HTML form I noticed that if I have a form with attribute name I can access that form the following way document.attribute_name or document[attribute_name]. However if I try to do the same on a div for instance, it does not work. Can somebody please explain me why is this so.
Also, I was wondering if it good practice to use a form when using AJAX. Let say that I have some fields inside a form but I am using ajax and the form never is "posted" as I am using AJAX to change field's contents.
Thanks in advance!
Usually a form has the name attribute in order for you to be able to pass a value to a PHP/ AJAX script.
When writing THE FORM :
<FORM action = 'addDetailsToDatabase.php' method = 'post' >
<input name ='myName'>
<button type = 'submit'>
</form>
When you submit this form it will post the input field value that has the name attribute 'myName' to the addDetailsToDatabase.php script. So now whatever has been entered and submitted in the input you can use in your PHP script.
TAGS do not generally have a need for a name attribute. (I am saying generally need just incase theiris some library out there that uses this I have never seen a name attribut on a div tag.
The best way to get a div is to get it by ID . document.getElementByID('yourdivid') - Javascript.
Your div will look like this
You can use AJAX to post a form to be be run by a PHP script and this has the added benefit of the whole page not being refreshed.
Anwsering the second part its hard what you are asking. With Ajax you can make your page as dynamic as you want
You can select from the database and echo wherever you want the options are limitless (almost). The best thing to do is to learn HTML = SIMPLE Learn CSS =SIMPLE. Then learn some simple JQUERY or javascript. If your dealing with forms and databases learn how to post a form to PHP script and store in a database and then retrieve using the select statement (prepared statements will set you up for years to come try and avoid old SQL tutorials)
Once you get this learn your AJAX to fill the gaps
I am trying to simply post an entire form w/o the need to create the url like you would have to in a get call. All of the tutorials I have seen for this for some reason create a parameter URL and send it via the send ability.
I want to be able to send a form via the form id or form name, is this possible?
The reason is because I will have some submits that can have anywhere from 2 to 1000 checkboxes the user can press (not my choice).
Example I looked at mainly is: http://www.captain.at/howto-ajax-form-post-request.php
I use a type="button" to do the submit not a onchange or anything like that.
Use jQuery, and it's very easy:
$.post("/myactionpage.php",$("#formID").serialize(), function (data) { whatever(); });
If you can use jQuery, the JQuery Form plugin does exactly that.
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process.
There are multiple ways to do this and you're right, you don't want to use the GET method. You want to use the POST method, which allows you to send all the data in the form. There are too many options to list, but jQuery is a good start. If you don't want to use an external library like jQuery, try checking out a google search on "ajax via post".