Get posted data using jquery

Question

I want to get posted data using jquery. I have implemen

Html Form

      <form  id="login_form" action="userPref.php" method="post" >

      <div hidden id="error" style="color:red; text-align:center;"   > <p> user not found  </p>   </div>
        <div class="form-group">
          <label for="usrname"><span class="glyphicon glyphicon-user "></span> User Id</label>
          <input type="text" value="" class="form-control" required="required" id="usrname" name="usrname" placeholder="Enter User Id" >
        </div>

          <button type="submit"  id="login" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
      </form>

In userPref.php I am using php to get data but I actually want to use jquery

    var userid = <?php echo $_POST["usrname"] ?>;

I have also tried to access the form data using jquery but I was not able to access the data. Please help me.

There are plenty of tutorials and examples out there. One of them http://www.htmlgoodies.com/tutorials/forms/article.php/3895776 or just google and you'll find a ton of them. — ProgrammerV5, Aug 16 '16 at 12:26
Possible duplicate of [jQuery Ajax POST example with PHP](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — B001ᛦ, Aug 16 '16 at 13:50

score 0 · Answer 1 · answered Aug 16 '16 at 12:29

0

POST data is data that is handled server side. And Javascript/jQuery is on client side. So there is no way you can read a post data using JavaScript/jQuery.

But good way is

var post_data= <?php echo json_encode( !empty($_POST) $_POST : array());?>;

now you can access $_POST['username'];

alert(post_data.username);

so you can access all posted data in this way.

answered Aug 16 '16 at 12:29

Haresh Vidja

8,340
3
25
42

var userid = ; This code which I have implemented is working fine. But in my case I can't use php file. I only have to use js files. This small php script doesn't run in html or js file. – Muhammad Umar Aug 16 '16 at 12:33
So, I need to do it using js only. – Muhammad Umar Aug 16 '16 at 12:33
yes, unfortunately you have to do it using js only. – Haresh Vidja Aug 16 '16 at 12:34

score 0 · Answer 2 · edited Aug 16 '16 at 15:28

0

$("form").serializeArray();

See Documentation: http://api.jquery.com/serializeArray/

edited Aug 16 '16 at 15:28

Ashley Medway

7,151
7
49
71

answered Aug 16 '16 at 12:32

satwick

135
9

score 0 · Answer 3 · answered Aug 16 '16 at 12:37

check this :

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <div id="results"></div>

        <form action="" method="post">
            <input typte="text" name="uName" /> <input typte="password"
                name="passKey" /> <input type="submit" />
        </form>
        <script type="text/javascript">
                $('form').submit(function(e){
                    if(this.uName.value != ''){
                        alert(this.uName.value);
                    }
                    if(this.passKey.value != ''){
                         alert(this.passKey.value);
                    }
                });
                </script>
    </body>

    </html>

How to get these values on the page where this form is posted? — Muhammad Umar, Aug 16 '16 at 12:45

score 0 · Answer 4 · answered Aug 16 '16 at 12:57

On server side you need something like this:

<input type="text" value="" class="form-control" required="required" id="usrname" name="usrname" placeholder="Enter User Id"<?php echo isset($_POST["usrname"]) ? ' value="'.$_POST["usrname"].'"' : ''; ?> >

and then you can use it with jquery, like this:

$("#usrname").val()

Get posted data using jquery

4 Answers4