CODEWITHSUNDEEP
php
ruhit
ruhit

Reputation: 219

submit a form and get json response

I have made an application to convert text to image formate and its workingout well. Now I want json response when i fill the form of the html page, my html page is given below...Please help me to do this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>kandarpa</title>
</head>
<div>
<form action="img.php" method="get"><b>enter your text here:</b><br/>
<textarea id="text" name="text" style=" background-color:inherit" cols="50" rows="10"></textarea><br/><br/>

<input type="submit" value="Text to Image" name="submit">
    </div><br/>
<div>
    <tr>
        <td>Font Size</td>
        <td><select name="size">
        <option value="8">8</option>
        <option value="12">12</option>
        <option value="18">18</option>
        <option value="24">24</option>
        <option value="32" selected="selected">32</option>
        <option value="48">48</option>
        <option value="64">64</option>
        </select></td>

</tr>
    </div><br/>
<div>
    <td>Font </td>
<td><select name="font" id="font">
<option value="Fonts/arial.ttf">Arial</option>
<option value="Fonts/times.ttf">Times New Roman</option>
<option value="Fonts/tahoma.ttf">Tahoma</option>
<option value="Fonts/Grand Stylus.ttf">Grand Stylus</option>
<option value="Fonts/GARAIT.ttf">G</option>

</select></td>

</tr>

</div><br/>
<div>
    <td>Choose your Color </td>
<td><select name="color" id="color">
<option value="white">white</option>
<option value="black">black</option>
<option value="grey">grey</option>
<option value="red">red</option>

</select></td>

</tr>

</div>
    <br/>
    <div>
        <td>Height </td>

<input type="text" id="height" name="height">


</td><br/><br/>
    <td>Width</td>

<input type="text" id="width" name="width">
    </div>
</form>
</body>
</html>

Upvotes: 0

Views: 891

Answers (2)

Chris Kooken
Chris Kooken

Reputation: 33940

With JQuery, you can submit the form directly with AJAX using the .Serialize() function. This function can be used to post ANY form via AJAX.

function (DetailsForm, SuccessCallBack)
{
    $.ajax({
        url: $(DetailsForm).attr("action"),
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        data: $(DetailsForm).serialize(),
        beforeSend: function () { },
        success: SuccessCallBack,
        error: HandleError
    });
}

It takes the url defined in the <form action="??" and uses that to post the form to the server. On the server side, simply return a JSON result, and bob's your uncle.

Upvotes: 1

qkp
qkp

Reputation: 161

Get the values of the form and put them in an array then use the json_encode($array) function to convert the array to json and just return the json.

Upvotes: 0

Related Questions