How to Set Action URL & Method of HTML Form in Javascript

by

In this post i am going to explain how we can set action of HTML form by using JavaScript. Some times we need give different action to the same form so that in different situation it can be redirected to the relevant URL.In the following example i have explained that how can we give different action to same form of HTML. In the following example the form is made on HTML which has 2 buttons 1 for sending data to email id and other is for sending data to whatsapp.2 JavaScript function are written to change the action of the form and after changing the action it will be submitted.

STEP 1

Write a form tag under HTML file and write the following code in form tag
form class="form_overlay" accept-charset="UTF-8" autocomplete="off" name="contact" id="contactform"
id="contactform" is the most important attribute of HTML form because by using this id we can assign action and method in JavaScript.

STEP 2

Now make your all input fields which you require to make the form and after making all fields just make 2 buttons 1 for sending data via email and another for sending data via whatsapp and also give a onclick event to call the function for both functionalities
<button type="button" class="btn btn-primary mt-3" onclick="checkform();" id="contactsubmit" >Submit </button>
<button type="button" class="btn btn-primary mt-3" onclick="whatsappform();" id="whatsappsubmit">Whatsapp Submit</button>

STEP 3

Now create functions in JavaScript for sending the form to email and WhatsApp, After writing the function you can specify the action as following

document.getElementById('contactform').action="mail.php";
document.getElementById('contactform').method="GET";

Following is the code of HTML and JavaScript file

HTML Form

<form class="form_overlay" accept-charset="UTF-8" autocomplete="off" name="contact" id="contactform"> 
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <div class="input_overlay">
                                        <label for="fname" class="lable">Enter your first name</label>
                                        <input type="text" name="first_name" class="form-control" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input_overlay">
                                        <label for="lname" class="lable">Enter your last name</label>
                                        <input type="text" name="last_name" class="form-control" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input_overlay">
                                        <label for="email" class="lable">Enter email address</label>
                                        <input type="text" name="email" class="form-control" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="input_overlay">
                                        <label for="phone" class="lable">Phone number</label>
                                        <input type="text" name="phone" class="form-control" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="input_overlay">
                                        <label for="subject" class="lable">Subject name</label>
                                        <input type="text" name="subject" class="form-control" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="input_overlay textarea">
                                        <label for="desc" class="lable">Description</label>
                                        <textarea name="description" cols="30" rows="4" class="form-control" required autocomplete="off"></textarea>
                                    </div>
                                </div>
                                
                                <div class="col-12 text-end">
                                  </div>
                                <p id="demo"></p>
                            </div>
                            
                        </form>
                        <button type="button" class="btn btn-primary mt-3" onclick="checkform();" id="contactsubmit">Submit</button>
                        <button type="button" class="btn btn-primary mt-3" onclick="whatsappform();" id="whatsappsubmit">Whatsapp Submit</button>

JavaScript

<script>
function checkform()
{
    document.getElementById('demo').innerHTML="Wait..";
    document.getElementById('contactform').action="mail.php";
    alert(document.getElementById('contactform').action);
    document.getElementById('contactform').method="GET";
    document.getElementById('contactform').submit();
    
}
function whatsappform()
{
    document.getElementById('demo').innerHTML="Wait..";
    document.getElementById('contactform').action="whatsapp.php";
    alert(document.getElementById('contactform').action);
    document.getElementById('contactform').method="get";
    document.getElementById('contactform').submit();
    
}
</script>

Leave a Comment