Passing form variable to php using JSON

Question

I am using the following code and I need to access the input value of the form textbox from php. The form is not submitted to server directly through the form tag. The button is calling a JS function. I need to access the input textbox called stName from the php code. How can I pass this info to php and access it from there? Thank you.

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.4.min.css">

<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script charset="utf-8" type="text/javascript">
function connect()
{   
    $.ajax({
        url:'hostname/reply.php',
        headers:{"Content-Type": "application/json"},
        type:'POST',
        data:$(this),
        dataType:'JSON',
        error:function(jqXHR,text_status,strError){
            alert(strError);},
        timeout:60000,
        success:function(data){
            $("#result").html("");
                for(var i in data){
                $("#result").append("<li>"+data[i]+"</li>");                    
                }
            }
        });     
} 
</script>
</head>
<body>
<center><b>My Students</b></center>
<center>
<form method="POST">
<input type="text" value="John" name ="stName" />
<input onclick="connect()" type="button" value="showStudents" />
</form>
</center>
<center><b>Results</b></center>
<ul data-role="listview" id="result"></ul>
</body>
</html>

Azeem Hassni · Accepted Answer · 2014-10-11 08:00:36Z

2

serialize the form data ..

change your connect function to this

function connect()
{   
    $.ajax({
        url:'hostname/reply.php',
        headers:{"Content-Type": "application/json"},
        type:'POST',
        data:$('form').serializeArray(),
        dataType:'JSON',
        error:function(jqXHR,text_status,strError){
            alert(strError);},
        timeout:60000,
        success:function(data){
            $("#result").html("");
                for(var i in data){
                $("#result").append("<li>"+data[i]+"</li>");                    
                }
            }
        });     
}

or simply you can compress your code like this ..

function connect()
{   
    $.post('hostname/reply.php', $('form').serialize(), function(data){
         $("#result").html("");
                for(var i in data){
                $("#result").append("<li>"+data[i]+"</li>");                    
                }
            }
    });
}

answered Oct 11, 2014 at 8:00

Azeem Hassni

8861 gold badge13 silver badges28 bronze badges

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

3 Comments

Simon Over a year ago

Thank you Azi and michaelcurry. How do you access the form input value from php?

Simon Over a year ago

I am trying this php code but it is not working: $data = json_decode($_POST['data'], true); $message[] = $data; print json_encode($message);

Azeem Hassni Over a year ago

do some debugging. And dump $_POST in reply.php add this line in reply.php and see what data the page is receiving var_dump($_POST); exit;

Community · Accepted Answer · 2017-05-23 12:00:07Z

0

You need to use the Sterilize Function. data:$( "form" ).serialize()

For Reverence to the function: http://api.jquery.com/serialize/

I also just found this StackOverflow that talks about how to structure the ajax request if you are having problems. Submit form using AJAX and jQuery

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Oct 11, 2014 at 7:55

KernelCurry

1,2872 gold badges14 silver badges32 bronze badges

Collectives™ on Stack Overflow

Passing form variable to php using JSON

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related