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.
Related
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 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.
I need nested forms. I know that they are not allowed in HTML, so I decided to set several submit buttons for one opened form.
In my controller I need to check which of the submit buttons is pressed. How can I do that?
I'm trying to give buttons names like this:
<input class="btn btn-primary" name="editAction" type="submit" value="Save"></button>
Then in my controller I check them like this:
if ($this->input->post('editAction'))
But it doesn't work.
If you are bound to have several submit buttons in your form, then you can do 2 things :
1) Convert submit buttons into normal buttons and submit form using ajax. This will solve your problem.
2) Convert submit buttons into normal buttons and maintain a hidden field on your form and onClick event of all buttons, just put the id of the button in that hidden field as a value, and then using jQuery, submit your form and then in your controller, check your hidden field value and then process the form.
if ($this->input->post('hidden_field_name'))
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/
Suppose I have the following HTML form:
<form>
...
<input type="submit" name="queue" value="Queue item">
<input type="submit" name="submit" value="Submit item">
</form>
How do I know which button the user clicked (without using javascript)?
I looked at submitted data and it seems that when "Queue Item" is clicked then "queue" = "Queue Item" gets sent to the server. And when "Submit item" is clicked then "submit" = "Submit item" sets sent.
Can I rely on this behavior? Is it documented somewhere in the standard on HTML forms? How do you guys do it?
Yes, you can rely on this; it's fully documented here. The specific relevant lines say:
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.
and
If a form contains more than one submit button, only the activated submit button is successful.
Yep you can rely on that behaviour.
When <input type="submit" name="queue" value="Queue item"> is clicked, the field "queue" will be set and "submit" will not be.
Whereas when the other gets clicked, the field "submit" will be set, and "queue" will not be.
If you're not assured by this, you can split them into 2 forms and work on it that way.
You can rely on this behavior. You get the value of the input. I would use javascript to toggle a hidden form value, but since you mentioned no javascript you do not have multiple choices.
It's a standard. Since it's an input tag, and has a value, that means you get the value submitted.
Split the form into two forms, replicating any other inputs needed by the other action. Or, if you really just need to know if the user wants to "queue vs. submit" the item, change both submit buttons to radio selections to toggle between the two options, and have a new, separate "submit the form" button.
In that situation if you want a one-click option, you could use Javascript to detect when one of the radio buttons is selected, and auto-submit the form instantly. (Using Javascript for user interface, rather than form handling)