JS - submitting through javascript does not pass post variables

Question

I am using Pure JS to first prevent the form from submitting then I have some validation code and finally automatic submission but the data is not passing from client side to server script.

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chat Room</title>
    <link type="text/css" href="main.css" rel="stylesheet" />
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
    <div id="container" class="add-nick">
        <h3>Enter Your Name</h3>
        <form action="chat.php" method="post" id="add-nicki">
            <input type="text" placeholder="At least 6 alphabets e.g. Jackson" class="text" name="name" />
            <input type="submit" value="Submit" class="submit" name="btnsubmit" />
        </form>
    </div>
</body>
</html>

The JS:

window.onload = function() {
    document.forms[0].onsubmit = function(e) {
        e.preventDefault();
        var regexp = new RegExp("^[A-Za-z]+$"),
        elem = this.elements[0],
        value = elem.value;
        if(regexp.test(value) && typeof value != "null" && value.length > 5) {
            elem.className = "text correct";
            var formElem = this;
            setTimeout(function() { formElem.submit(); }, 0);
        }
        else elem.className = "text wrong";
    };
};

The PHP file:

<?php
session_start();

if(isset($_POST['btnsubmit'])) {
    $_SESSION['name'] = $_POST['name'];
    echo $_SESSION['name'];
}
else {
    if(!isset($_SESSION['name']))
        echo "Header";
    else
        echo $_SESSION['name'];
}


?>

Is there something wrong or JS submit function is not functioning properly ?

@RienNeVaPlus You mean return false; ? Everything on client-side is working as expected but just variables are not passing. I have searched SO and Google but all have weird solutions. :/ — Talha Akbar
– Talha Akbar, Commented Sep 6, 2013 at 9:28

Anthony Grist · Accepted Answer · 2013-09-06 09:29:16Z

1

The request parameter corresponding to a submit button is only passed if the form is submitted as a result of clicking that button. That's not the case here since you suppress the original form submit (the one triggered by the button), then later call formElem.submit() from JavaScript; no button click means no request parameter, and therefore isset($_POST['btnsubmit']) in your PHP script won't ever return true.

One solution might be to add the btnsubmit parameter to the form's action before submitting it:

formElem.action += (formElem.action.indexOf('?') == -1 ? '?btnsubmit=Submit' : '&btnsubmit=Submit');

answered Sep 6, 2013 at 9:29

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Talha Akbar Over a year ago

Ahh! Nice but cannot it be async so user cannot see that I have GET request for button or I have to keep it?

Anthony Grist Over a year ago

@MuhammadTalhaAkbar You could create a hidden input and append it to the form to achieve the same result, if you wanted to. Or you could do an AJAX form submission. There are a number of potential solutions, I provided the simplest one, I'll leave it to you to decide which works best for you.

Talha Akbar Over a year ago

ahh! This been so long that I have worked with forms and pure JS. I didn't realized that I can use hidden input. Thanks. You saved my time.

Collectives™ on Stack Overflow

JS - submitting through javascript does not pass post variables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related