I have a page that will display a search form with 3 fields, and a submit button.
when the user clicks on submit, i'm going to make an ajax call, get the data, and then populate the bottom half of the page.
What I'm wondering is if you're using ajax calls, would you still create the form using the tag?
So for example, here's some sample HTML:
<H2> Search Options</H2>
<DIV ID="searchform" class="">
<input type='text' id='id'></input>
<input type='text' id='firstname'></input>
<input type='text' id='lastname'></input>
<input type='button' id='submit'></input>
</DIV>
as you can see, I don't have a tag with post attrib set.
can you tell me why i should / shouldn't include the form tag while using ajax?
Thanks.
There is nothing wrong with it at all.
The only problem comes when a user doesn't have JavaScript enabled. How will your form behave then?
*Assuming javascript is enabled in client's browser
If you are handling Ajax call on button click event, then no need of using <form />.
Because each fields you'l get in javascript by using document.getElementByID or some other mechanism (JQuery selectors). moreover the Ajax call also you are making manually so you can avoid use of <form />.
Using <form /> will just add few bytes overhead to html page, there isn't any other advantage of using <form/> in this case, if you are handling ajax call on button Click event.
Related
I have a page that displays employee information for a company. The list is split into 3 groups. Each group has an add button and an edit button. The buttons call the respective subform in a modal window.
Since the forms are built in vb.net and use ASP objects, they need the form to be wrapped in a form that has runat="server". I am unable to add the run at server directive to each of the 6 sub forms's form tags as I can only have one runat="server" per page.
To get around that, I added the directive to a form element that wraps the body of the page. Now I'm getting an error because of nested form elements. How do I get around this?
<body>
<form runat="server">
<form id="popup1">
</form>
<form id="popup2">
</form>
<form id="popup3">
</form>
<form id="popup4">
</form>
<form id="popup5">
</form>
<form id="popup6">
</form>
</form>
</body>
I read about the form elements getting a form attribute that ties the elements to a particular form as in form="form1" and so on. But I'm not sure if that will work in my case since some folks may try to use Internet Explorer which does not support the form attribute.
I'm thinking that I need to create only one modal form for my page, add all the elements for all six forms and then use logic to show/hide elements based upon which button is pressed. The problem is that the forms are rendered on the server side using asp elements and the button press is client side. I could use some javascript to handle this, but things could get messy. Additionally, the forms may get loaded with data or not depending on whether the button presses is add employee or edit employee.
Maybe I should create the 6 modal forms without using asp objects and stick to HTML objects. This negates the use of ASP's regular expression validators but I'm ok with that.
Sometimes I see a form that is wrapped in a form tag
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
And sometimes there is no form tag, but just a div
<div class="view">
<input class="toggle" type="checkbox">
<button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">
How come sometimes the form tag is present and other times its not for forms?
Prior to submitting information via AJAX, HTML forms were the standard in sending information to a server from a web page. They include the destination and method in the form attributes. More recently, this can be handled without assigning these attributes in form and sent via Javascript; typically using AJAX. This means the form element isn't necessary but is a good idea to include where possible to be syntactically correct HTML.
The <form> tag is not used specially when developers decide not to submit data in a conventional manner. The <form> tag has the main purpose of wrapping all the inputs that will be submitted to the next page specified on the action attribute of the <form> tag, and these data is sent using either POST or GET method indicated with the method attribute.
<form action="nextpage.php" method="post">
When the inputs are not wrapped by a <form>tag it means that the data is never submitted to another page or it submitted in a different way through javascript.
JavaScript is able to read the values of all the inputs and submit this data to a next page simulating a form or simply send it to the server without changing the page, when the page never changes but the data is sent to the server is when we say it was submitted using AJAX.
Forms input types are not always used to send values, they could be use as controllers, like date difference purposes, ranges or sliders to control alpha chanel, or rotate and image, making calculators, showing or hiding stuff on the page, lots of purposes other than just submitting to other pages
Check this code for a calculator on one of posts couple hours ago, lots of buttons, but not submitting anything
<INPUT TYPE="button" ID="button-cos" VALUE="cos">
Another example using button and input type="text" online image editor tutorial
I have a form:
<form method="GET">
<input type="text" value="hello" name="myname" />
</form>
If this form is submitted, I will end up at:
example.com/?myname=hello
What I would prefer is that when this gets submitted, I end up at:
example.com/hello
Is this possible?
No, you cannot change the way form submission works in HTML. (Using JavaScript, you can do transactions in a different way, without using HTML form submission.) When using method="GET", the URL gets constructed in a specific way; when using method="POST", the URL does not contain submitted data at all (it is sent outside the URL).
There is a trick that changes form submission in one way, but not quite the way you want. If the name of a control is isindex, then the control name and the equals sign are omitted; but the question mark is still there. That is, <input type="text" value="hello" name="isindex" /> would result in http://www.example.com/?hello. And Chrome has broken this when they removed the remainders of support to the isindex element.
If, for some special reason, you really need to make a form create requests like http://example.com/hello, then the simplest way is to set up a very simple server-side script that accepts normal requests that result from HTML forms and just passes them forward after modifying the URL in a simple way.
<form action="/foo">
<input type="text" name="q">
<input type="submit" >
</form>
In the previous HTML, if the user types in 'bar' and clicks the button it would submit to example.com/foo?q=bar.
How can I make it go to example.com/foo/bar?
I can easily do it with JS but I'm trying to stick to HTML.
There is no way to do this in HTML, you need a programming language.
Have something on the server process the form an issue an HTTP 301 response with a Location header.
You could enhance that by use the form's submit event to prevent the default action and set location in JS.
You cannot change the value of the action attribute with HTML only. You need to use JS or any other scripting language.
I have a big form enclosing a table,
and just a real small form inside one of the cells.
The do send differnt data, and even use differnt methods, one is Post, another Get.
Is there any way to make it work?...
The code looks something like this:
<form method="POST">
...
<form method="GET">
<input type="text"><input type="submit">
</form>
...
</form>
As forms do not work well within eachother, I tend to use 2 submit buttons with seperate id's and combine the forms. The processing php file then decides what to do with the data depending on the value submitted by the submit button ID. Your problem is the fact you have a GET and POST. What are the forms submitting/retrieving?
separate forms,
negative margin-top - this will do for now.
If I get sick with it, I'll add a navigational 'href' script directly to button linking it to input and onkeyup enter event.
Try using the jQuery submit method with the click listener.
For instance if your forms are structured like this:
<form id="outer">
<form id="inner">
<button id="innerbutton" />
</form>
<button id="outersubmit" />
</form>
Then I think this should work:
$('#innerbutton').click(function() {
$('#inner').submit();
//or an AJAX call
});
$('#outerbutton').click(function() {
$('#outer').submit();
});
jQuery submit documentation: http://api.jquery.com/submit/