JSON获取表单数据请求

Question

I am completely new to JQuery / JSON requests. The code below is the result of 2 days work and I am completely stumped!

Basically I have a form asking for

• Number of people
• Size of painting
• Color of painting (B,C) IE black/white or color

Esentially after selecting the dropdowns then clicking on the color radio button, it will send a JSON request to getdata.php?getIDandPrice=C

What I am trying to achieve is that it will make this request based on the previous entries:

getdata.php?getIDandPrice=1-2x2-C    

(ie number of people - size - color)

Appreciate your help

<select id="howmanypeople" name="howmanypeople">
    <option value="" selected="selected">Select how many people</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select id="size" name="size">
    <option value="" selected="selected">Select size</option>
    <option value="1x1">1x1</option>
    <option value="2x2">2x2</option>
</select>


<label><input type="radio" name="getIDandPrice" value="B" id="method2"/>Black & White</label>
<label><input type="radio" name="getIDandPrice" value="C" id="method2"/>Color</label>  
<label><input type="radio" name="getIDandPrice" value="B" id="method2"/>Black & White</label>    

<div id="post_id"></div>
<div id="_regular_price"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=getIDandPrice]').click(function() {
MethodTwo();
});
});

//Method 2

document.getElementById('getIDandPrice').value = product(2, 3);
function MethodTwo()
{
$.getJSON("getdata.php?getIDandPrice=C", function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
});
}
</script>

Below is the final working code thanks to I Can Has Cheezburger

<!-- http://stackoverflow.com/questions/7191910/loading-json-data-with-jquery-php-and-mysql-for-radio-buttons -->
<select id="howmanypeople" name="howmanypeople"> 
    <option value="" selected="selected">Select how many people</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select id="size" name="size">
    <option value="" selected="selected">Select size</option>
    <option value="1x1">1x1</option>
    <option value="3x3">3x3</option>
</select>
        <label><input type="radio" name="color" value="B" id="color"/>Black & White</label>
        <label><input type="radio" name="color" value="C" id="color"/>Color</label>


<div id="post_id"></div>
<div id="_regular_price"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input[name=color]').click(function() {
    MethodTwo();
    });
    $('select[name=size]').click(function() {
    MethodTwo();
    });
    $('select[name=howmanypeople]').click(function() {
    MethodTwo();
    });
});


//Method 2
function MethodTwo()
{
//getting the selected value of select#howmanypeople
var people_no = $('#howmanypeople').val();
//getting the selected value of select#size
var size = $('#size').val();
//getting the selected value of select#size
var color = $('#color:checked').val();
//concatenating the values for the URL to look as 
//getdata.php?getIDandPrice=1-2x2-C
$.getJSON("getdata.php?getIDandPrice="+people_no+"-"+size+"-"+color, function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
    });
}</script>
</body>
</html>

Answer 1

If I got it right, you want to pass the value C along with the two select options, you could do it like:

function MethodTwo()
{
//getting the selected value of select#howmanypeople
var people_no = $('#howmanypeople').val();
//getting the selected value of select#size
var size = $('#size').val();
//concatenating the values for the URL to look as 
//getdata.php?getIDandPrice=1-2x2-C
$.getJSON("getdata.php?getIDandPrice="+people_no+"-"+size+"-C", function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
    });
}

In the PHP side, you would have to do something like:

$var = $_GET['getIDandPrice'];
//explode() will break the text at the hyphen `-`
$var_arr = explode("-",$var);
//$var_arr[0] = 1, $var_arr[1] = 2x2, $var_arr[2] = C

Answer 2

Pass the values of the inputs you need to process on the backend:

$.getJSON("getdata.php?getIDandPrice=C", 
    {
        howMany : $('howmanypeople').val(),
        size : $('size').val(),
    },
    function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
});

The documentation has several examples:

http://api.jquery.com/jquery.getjson/