Set a Form's Action Attribute When Submitting

Set a form's action attribute when submitting?

Attach to the submit button click event and change the action attribute in the event handler.

Change form action attribute on submit

It seems that the prevent thing was the troublemaker.

This works:

<div id="root">
    <form :action="form.action" ref="form" :target="form.target">
        <button >Submit to /test</button>
        <button id="new" @click="submit">Submit to /new</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#root', 
        data: {
            form: {
                action: '/test',
                target: '_blank'
            }
        },
        methods: { 
            submit: function() {
                this.form = {
                    action: '/new',
                    target: '_self'
                };
            }
        }
    })
</script>

However, I'm not sure why the old version did not work.

Html Form Action Attribute

An HTTP(S) URL will include a hostname (which identifies a computer (acting as a server) on a network) and a path (and possibly some other components which don't matter for this question).

When you type a URL into the address bar of a browser, the browser will make a request to the server and ask for whatever is at the path.

The server will respond (typically with some data like an HTML document).

The server has to perform some logic to decide what to respond with. Typically this will either be:

• Reading a file from its hard disk and returning the contents or
• Executing a program and generating some content programmatically

When you submit a form, you are making a request to a URL with some data attached to it. Almost all of the time you will want the server to execute a program and do something with that data (such as put it in a database).

The program that gets executed can be written in any programming language you like (such as Perl, PHP, JavaScript, Java, or whatever).

---

If I got a site uploaded to a web hosting company, I would need to get it there?

Typically, if you have web hosting already then you will use that web hosting for any server-side programming you need to do.

If the hosting service doesn't provide you with any server-side hosting options (i.e. if it is just static hosting such as you might find from Github Pages). Then that isn't an option. Likewise if the server-side options they program aren't suitable for you (e.g. they only support PHP but you want to run something written in Node.js) then you'll have to find an alternative.

The two alternatives you have are:

1. Move everything to hosting that provides the features you want
2. Host something elsewhere and keep the majority of your site in the original hosting

(There is nothing wrong with the latter option, I have one site which uses Amazon S3 static hosting for most of it but has a couple of web services running in Heroku).

Or I need to rent a server elsewhere so that I will get one?

Dedicated hosting is almost certainly very expensive overkill for your purposes.

Or it just fine to be store on a local file?

It isn't possible to do server-side programming with a file: scheme URL. There's no server to execute the program.

If you are only working locally then you can install a web server on your computer. This is normal for development purposes.

---

It is probably worth mentioning that there are a few common server-side programs which are available prewritten with hosting services (e.g. contact forms which email you when someone fills them in). These typically come with advertising and require that the <form> and its contents are constructed with the specific fields the service expects. If you look for one of these be careful to follow their instructions precisely.

---

Aside: The statement that the action attribute is required is flat out wrong. It is an optional attribute and in its absence the form will be submitted to the URL of the current page.

Set form action with JavaScript

A simpler solution might be to add names to the hidden inputs then append them to the form so they get submitted by default process.

HTML

<input type="hidden" id="firstParameter" name="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" name="secondParameter" value="anotherParameter">

JS

$('form').submit(function(){
   const $form = $(this);
   $('#firstParameter, #secondParameter').each(function(){
       if(this.value){
          $form.append(this)
       }
   });
}); 

html form action attribute always send the form data to the server side?

The point of a form is to package up a bunch of data from inputs (and selects etc) into an HTTP request.

HTTP requests are sent to a server.

The action attribute tells the browser what URL to use for that.

---

You can interfere (in all sorts of ways, including preventing submission entirely) with normal form behaviour using JavaScript.

HTML 5 introduces the formaction attribute for overriding a form's action when a specific submit button is used.

Change form action based on submit button

There are two typos:

• obtn instead of obutn
• oEbtn instead of oEbutn

Another suggestion is to use closest("form") to get the form that contains the clicked button.

$(".obutn").click(function() {
    $(this).closest("form").attr("action", "/shop/products.php");     
});
$(".oEbutn").click(function() {
    $(this).closest("form").attr("action", "/shop/extras.php");       
});

$("form").on("submit", function () {
    alert($(this).attr("action"));
});

JSFIDDLE

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.

---

Related Topics