CODEWITHSUNDEEP
javascriptphpjqueryjsonforms
Simon
Simon

Reputation: 19

Passing form variable to php using JSON

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>

Upvotes: 1

Views: 1023

Answers (2)

Azeem Hassni
Azeem Hassni

Reputation: 886

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>");                    
                }
            }
    });
}

Upvotes: 2

KernelCurry
KernelCurry

Reputation: 1297

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

Upvotes: 0

Related Questions