Add Parameters To Form Action

/ javascript / By

I need to the add a JavaScript variable to a link in action form. Is that possible?

JavaScript function:

<script>
    function parameter()
    {
        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
                vars[key] = value;
            });
            return vars;
        }
        var vpid = getUrlVars()["pid"];
    }
    //var link = "second_02.html" + pid.toString();
</script>

And in my form I need to add the variable ‘link’ to a form action, as follows:

<form action='second_02.html + ?pid=vpid&' id="sky-form" class="sky-form">

You’ll need to do that programmatically via JavaScript.

After this line…

var vpid = getUrlVars()["pid"];

Add this one…

document.getElementById('sky-form').action = 'second_02.html?pid=' + vpid;

Given the nature of the content of vpid, then you could implements this in the load event of your window.

ALTERNATE METHOD 1

Here’s an alternate method of doing what you appear to require, but it requires you to set the new location with the calculated parameter. You can amend the lines that try to get the text from the textbox, with whatever you need to append to your URL.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function validateForm() {
                //alert('Validating form...');
                var text = document.getElementById('txtValue').value;
                text = escape(text);
                location.href = 'test.html?param=' + text;
                return false;
            }
        </script>
    </head>
    <body>
        <form id="frmTest" method="get" action="" onsubmit="return validateForm();">
            <input id="txtValue" type="text" value="foobar">
            <input id="btnSubmit" type="submit" value="Submit">
        </form>
    </body>
</html>

ALTERNATE METHOD 2

This method allows you to continue to use your form, even with its GET method, but you set the value of a hidden field, that will then be appended to the URL in the querystring during submission.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function validateForm() {
                //alert('Validating form...');
                document.getElementById('hidTest').value = 'some calculated value';
                return true;
            }
        </script>
    </head>
    <body>
        <form id="frmTest" method="get" action="" onsubmit="return validateForm();">
            <input id="txtValue" type="text" value="foobar">
            <input id="btnSubmit" type="submit" value="Submit">
            <input name="hidTest" id="hidTest" type="hidden" value="testIt">
        </form>
    </body>
</html>

  • I am not sure if I am doing something wrong, I have this which is the responsible button to execute the action in the form, I tried but it did not work

    – Lanshore

    Jun 10 ’16 at 17:51

  • Have you implemented the JavaScript on the load of your window yet? You will need to make sure this runs prior to submission of your form, either when the document loads, or before you submit your form. You could perhaps add an onsubmit handler to the form to set the action prior to submission.

    – ManoDestra

    Jun 10 ’16 at 17:55

  • I’m assuming here that you’re using a POST method for your form? If not, then you won’t be able to do this, as any form variables will be appended to your querystring during submission. You would have to manually just change the location.href to the new value you require and not do it via a form at all. Or append the forms values, if you really need the form.

    – ManoDestra

    Jun 10 ’16 at 18:27

  • Updated my answer to illustrate an alternate method. You can only set a query string parameter as part of a POST method. If you use GET, then the querystring is calculated as part of the form submission. Hence, why you simply need to redirect to your newly formed URL. If you need extra form fields attached to this query string, then you can determine that yourself and add them to more parameters in the formed URL.

    – ManoDestra

    Jun 10 ’16 at 19:31

  • Added a second alternate method that allows you to continue to use your GET form submission, but sets a hidden field with the calculated value instead.

    – ManoDestra

    Jun 10 ’16 at 19:52

Related Posts