HTML form and other elements - html

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

Related

HTML Form: Can submitted GET/POST parameters be suppressed using only HTML or CSS?

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.

Web Link inserts value into Textarea

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.

Nested Form Alternative

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.

AJAX Submit via Post entire Form

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".

Ways to remove the autocomplete of an input box

I need a text input field which does not use the autocomplete function - If a user has submitted the form before, his previous submissions should -not- appear as he types into the form again, even if he is typing the same thing again. As far as I can tell, there are a few ways to do this:
1. <form autocomplete="off">
However, I believe this is a proprietary tag, and I am not sure how compatible it is across browsers
2. Give the input field a random 'name'
One could even use JS to set the name back to an expected value before submission. However, if the user does not have JS installed, you'd need another hidden input with the name - and the php code on the other side gets messy fast.
Do you know of any other ways? Is one of these ways the "accepted" way? Comments?
Thanks,
Mala
Lookie here: Is there a W3C valid way to disable autocomplete in a HTML form?
Stick with the random name. You can do it simply enough server and client and you meet your no-js requirement.
You can store the original and changed name in a $_SESSION variable before outputting the form, and after the user submits, just get the name from there:
$random_name = md5('original_name' . time());
$_SESSION['original_name'] = $random_name;
...output form...
And after submitting you can easily get the value from $_POST using the $_SESSION variable:
$field_value = $_POST[$_SESSION['original_name']];
Just be sure that you have sessions available by calling session_start() before any processing.
Autocomplete is something that browsers decided to do on their own, so there’s certainly no spec document to look at.