I have one Form which have one submit button let us name this as FORM 1 and inside that form I have another form with one submit button and this form name is FORM 2. Now my problem is When i am clicking submit button of FORM 2, FORM 2 submit button is using an action of FORM 1 which i don't want. I know its sounds confusion but check the codes you will come to know :
<form action="pks.php" method="post">
<input type="text" name="mob">
<input type="text" name="opr">
<form action="pksa.php" method="post">
<input type="text" name="opra">
<input type="submit" value="SUBMIT">
</form>
<input type="submit" value="SUBMIT">
</form>
I am trying something like to achieve but i am not able to Please help me out
I have one Form which have one submit button let us name this as FORM
1 and inside that form I have another form with one submit button and
this form name is FORM 2.
In HTML you cannot nest <form> elements. This simply results in invalid markup and undefined behavior. You will have to reorganize your markup in a way that doesn't involve nested forms.
You cannot have nested forms. Browsers won't allow that. Actually if you inspect the form in browser developer tools, you will see that child forms are removed.
Related
I have this code, I use formaction attribute to return in home.html
but it's not working because of required attribute.
<form action="post">
Name:
<input type="text" name="name" required>
<br>
Email:
<input type="email" name="name" required>
<button name="Send" id="send">Send</button>
<button name="Return" id="return" formaction="home.html">Return</button>
</form>
The formaction attribute working fine. I can use the Network tab in my browser's developer tools to observe that when I click Return (in the live demo in your question) the form is submitted to home.html.
The required fields are still required (so I have to fill them in before that happens), but that is to be expected.
It sounds like your goal is to provide an exception and not need the user to enter any data when submitting the form to Return.
That isn't possible without adding a bunch of JS but you're approaching the problem from the wrong angle in the first place.
It looks like you want something for the user to click on that will abort filling in the form and just go to a different URL. There's no data submission involved.
That isn't a job for a submit button.
Use a link instead.
Return
You can apply CSS if you want it to look like a button, but I wouldn't recommend it. The visual appearance of the button implies that the form data will be sent somewhere, and that isn't what you are doing.
You should refer to homepage at the form tag
<form action="home.html" method="POST">
and for the submit
<input type="button" name="Return" id="return">
I'm running into a strange issue where Internet Explorer is adding an additional query string parameter that no other browser adds.
The page has a form with auto-submit functionality and a "Reset Filters" button. When a user hits the enter key, it forces the submit. When a user hits enter in Internet Explorer, for some reason the "Reset Filters" operation is selected rather than the submit button.
For example, IE adds this to the query string:
?search=this+is+text&op=Reset+Filters
In all other browsers the same query looks like this:
?search=this+is+text
When I check the $_GET superglobal in PHP, I noticed that op is only being added when I run the application in IE and only when I hit the enter key in the form.
Based on the HTML below, it kind of makes sense that hitting enter would add op to the query string because both the submit button and the reset button are contained within the form. But why would op only get added to IE?
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
...
</form>
Any idea why this might be happening?
UPDATE: One other piece of information that might be important. Because the form is auto-submit, the first submit button is actually hidden. I'm wondering if that's why IE is using the second button as the submit handler.
After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.
My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"
The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none.
I found the answer here:
Multiple submit buttons on HTML form – designate one button as default
My fix was to set the submit button to position: absolute; left: -1000% rather than display:none. I got that solution from #bobince on the linked answer, however, left:-100% did not push it completely off the page for me so I changed it to left:-1000%.
IMHO it seems wrong to be using a submit button do convey some information other than "hey, I've submitted some data". If the user hits enter to submit the form it is reasonable that some browsers would send all the data associated with all the submit buttons.
If you are just resetting the inputs from previous parts of the form you could use:
<button type="reset">
If you do need other input data maybe a checkbox would be more appropriate:
<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
...
</form>
If you do not need other input data you could use two forms:
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
</form>
<form>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
</form>
A submit button is an input. It has a name and a value. When you click on one of the submit buttons, it's value gets added to the the submission with it's name. When you hit the enter key, the form is automatically submitted, but since you are using two submit buttons, they are both contributing a parameter. You have a lot of options that others have already suggested. You could change the type to "reset" or "button", but if you need to post to the server for both actions, then you could intercept the keystroke with javascript and click the button in code. I would probably go with a button type that would submit the form like this.
<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">
<Script>
function submitform()
{
document.getElementById("your-form-name-here").submit();
}
</script>
I have the form below ..
<form name="myForm" novalidate>
<label for="test_element">Test</label>
<input required id="test_element" type="text" ng-model="ctrl.test">
<button ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
</form>
I'm using the Dynamic Assessment Plugin from here:
https://chrome.google.com/webstore/detail/dynamic-assessment-plugin/aahpafpbmmgednbflpalchnlbicaeppi
The tool doesn't give a great example of how to fix the error:
Submit buttons and image buttons allow users to explicitly request submission of the form and to control the change of context. Forms that are submitted by other mechanisms might change the user's context before they are ready, causing frustration or confusion.
What would be the best way?
I dont want to change <button> -> <input type="submit"> since there's angularjs code behind the scenes handling the submit
I have read a little bit about ng-submit, here's the link.
I think for that we can make it something like this:
<form ng-submit="ctrl.save()">
<input type="text" ng-model="ctrl.test">
<input type="submit" value="Submit">
</form>
I hope that documentation can help you :D
There's no obligation of having one submit button inside a form.
You can view an example in the documentation stating:
Finally, to make the form submittable we use the button element
with no input[type=submit] button.
You can also perfectly have no button at all, for instance a form consisting only in checkboxes.
<button type="submit" ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
So I have this form and I really want to use html5 validation. Problem is, there are two things my form needs to do:
Simply save the current state so it can be reloaded later (via jsp/servlets) (WITHOUT VALIDATING)
Actually submit the form (validate it before submitting)
Is there a way to turn off validation for a given button/submit but keep it for the other?
My workaround would be to use an AJAX call for the former and regular submit for the latter, but it kind of messes up the system I have in place.
You can add the "novalidate" attribute when the user clicks on a given button.
<form method="post" action="/foo" novalidate>...</form>
This disables html validation.
Add it again when you want your final submission.
EDIT
Apparently there's a better option, the formnovalidate attribute, that you can add to a specific field (which apparently is exactly what you want):
<form action="demo_form.asp">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
Yes, by toggling the novalidate attribute (or the noValidate property on the HTMLFormElement object) with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-novalidate
There is a HTML form which has some text input fields and 2 buttons, say Yes and No. Instead of accessing the URL first and then filling up the form, how can I fill up those text fields which I need to fill and do the action of either one of the buttons in a single URL?
E.g. Take this form for example: there are 2 fields text1 and text2.
http://www.mysite.com?text1=value1&text2=value2
In the above e.g.(hope that is right) how to add the button action also, is my question.
Appreciate your help.
Typically YES/NO choices are represented with a pair of radio buttons. These values would automatically be sent back with the form submission, based on the name of the radio buttons.
Use submit inputs instead of buttons.
<form>
<input type="submit" name="submitbutton" value="Yes" />
<input type="submit" name="submitbutton" value="No" />
</form>
Then you can grab what button the user pressed to send the form using PHP, JSP, ASP or whatever is your server-side language.
This is not possible unless you have control over the file displaying the form. If you do have control over that file I can show you how with JavaScript. It would make much more sense to use the serverside language filling the form in though.
Can be done through javascript:
Put input type=hidden in your form, and fill the value with a button and submit right after that.
<form name="name_of_form" action="" method="GET">
<input type="hidden" name="button_value" value="" id="hidden_value" />
<button type="button" onclick="javascript:submit_form('yes');">Yes</button>
<button type="button" onclick="javascript:submit_form('no');">No</button>
</form>
And add this JS function at the top somewhere
function submit_form(yesno)
{
document.getElementById('hidden_value').value=yesno;
document.name_of_form.submit();
}
note: Although it should work, I can't tell for sure, cause i suck at JS.