Forms with Action=""

what do form action=# and form method=post action=# do?

Action normally specifies the file/page that the form is submitted to (using the method described in the method paramater (post, get etc.))

An action of # indicates that the form stays on the same page, simply suffixing the url with a #. Similar use occurs in anchors. <a href=#">Link</a> for example, will stay on the same page.

Thus, the form is submitted to the same page, which then processes the data etc.

what do form action=“.”

Form Action attribute specifies where to send the form-data when a
form is submitted

Possible accepted values:

1. An absolute URL: points to another web site (like action="http://www.example.com/example.htm")
2. A relative URL - points to a file within a web site (like action="example.htm")

in your case of action="." you are pointing to current url/file/directory.
So it will reload the same page on form submission.

What is the Django Form Action?

If the action attribute of the form is not defined, the POST call is sent on the current URL on which the form was rendered. You can choose to change the URL on which the call needs to be sent and the method too.

You can change the URL by providing the action attribute to the form.

<form action="/my/url/">

To send the GET call to the current page or the URL specified in the action attribute by changing the method attribute of the form. The form fields will be sent as query parameters.

<form method="get" action="/my/url/">

HTML form with multiple actions

As @AliK mentioned, this can be done easily by looking at the value of the submit buttons.

When you submit a form, unset variables will evaluate false. If you set both submit buttons to be part of the same form, you can just check and see which button has been set.

HTML:

<form action="handle_user.php" method="POST" />
  <input type="submit" value="Save" name="save" />
  <input type="submit" value="Submit for Approval" name="approve" />
</form>

PHP

if($_POST["save"]) {
  //User hit the save button, handle accordingly
}
//You can do an else, but I prefer a separate statement
if($_POST["approve"]) {
  //User hit the Submit for Approval button, handle accordingly
}

EDIT

---

If you'd rather not change your PHP setup, try this: http://pastebin.com/j0GUF7MV

This is the JavaScript method @AliK was reffering to.

Related:

• 2x submit buttons to action different URL
• Submit form to another page (which is different from the page used in ACTION)

create a html form with 2 action pags

First of all, what do you mean by correct input?
Main form data validation occurs in server side, not client side. you'd better use client side just for simple verification, like for typos.

There is no need for 2 destination pages (as you call it so).
You may use the standard action attribute which is the page on the server to which you are sending your form data.

there, You have the option to decide which condition needs what action and send the data (and then the user) to the desired page / action.

What does an entry action='.' in html form mean?

. is the current path segment of the current URL. In other words, it refers to the current relative URL.

If your current URL is http://example.com/foo/bar/baz/, then . refers to http://example.com/foo/bar/baz/ (yes, same URL).

It's a bit trickier without a trailing slash. On http://example.com/foo/bar/baz, . refers to http://example.com/foo/bar/. That's why it's not usually a good idea to use .; you could use action="" instead, which means action has an empty value, in which case the current (full) URL is substituted.

This . is pretty universal and is used in many contexts involving URLs or file paths.

How to fix Form action with method get

Since the form in page1 doesn't exist in page 2, remove

let searchButton = document.getElementById("searchBtn");
let searchInput = document.getElementById("searchInput");

if (searchButton) {
    searchButton.addEventListener('click', () => {
        let searchTerm = searchInput.value;
        if (searchTerm)
            searchWeather(searchTerm);
    });
}

instead put

ley searchTerm = new URLSearchParams(location.search).get('location');
searchWeather(searchTerm);

Explanation

When the page 1 form is submitted, it will load page2 like

page2.html?location=xxxx

where xxxx is the value of the <input name='location' ...

location.search will be ?location=xxxx

URLSearchParams makes dealing with these (when you have more than one especially) easier than the old method of splitting/decoding/jumping through hoops

An input in a form named 'action' overrides the form's action property. Is this a bug?

I would not call this a bug. This effect occurs, because attributes can be read by using element.attributename and named inputs inside a form can be accessed in the same way, formelement.inputname. If there is an attribute and an input with the same name, there is no guarantee which one will be used. It probably behaves differently in different browsers.

I personally use getAttribute if I am reading a known attribute that was included in the markup or added using setAttribute in JavaScript. For dynamic values like, for example, the checked attribute of a checkbox, I don't use getAttribute. But this is more a question of personal preference, I guess.

---

Related Topics