Reputation: 41
I'm trying to get two values from a form in php which is weight and gender using jquery and ajax to show the price that corresponds to that gender and weight,
the mysql table looks like this
gender range1 range2 price
male 0 100 20
male 101 200 30
female 0 100 25
female 101 199 46
the php form looks like this
<input type="text" name="gender" id="gender">
<input type="number" name="weight">
price <span id="result"></span>
<input type="button" herf="javascript:;" onclick="getprice" value="">
the ajax function looks like this
function getprice (gender, whieght) {
var str_num {
"gender" : gender,
"weight" : weight
};
$.ajax({ data: str_num,
url: 'selectprice.php',
type: 'post'
beforeSend: function() {
$("#result").html("in progress..");},
succes: function (reponse){
$("result").html(reponse);
})}}
the selectprice.php looks like this
$gender = $_GET["gender"];
$weight = $_GET["weight"];
$fetch = "SELECT * FROM table where gender like $gender and weight
>range1 and <range2";
$result = mysqli_query($con, $fetch) or die("Ocurrio un error en la
consulta SQL");
while ($row = $resul->fetch_assoc()) {
echo "".$row["price"]."";
}
echo $result;
when I click the button nothing happens, I could really use some help, thanks in an advance
Upvotes: 0
Views: 56
Reputation: 59
You are mixing "POST" and "GET" here.
If you want to use "GET" then follow Naveed's suggestion
If you want to use "POST" then find the two possible solutions below:
1) Easy one: Include your variables directly in data
function getprice (gender, weight) {
$.ajax({ data: "gender" : gender,
"weight" : weight,
url: 'selectprice.php',
type: 'post'
beforeSend: function() {
$("#result").html("in progress..");},
success: function (reponse){
$("result").html(reponse);
})}}
selectprice.php:
replace
$gender = $_GET["gender"]; $weight = $_GET["weight"];
with
$gender = $_POST["gender"]; $weight = $_POST["weight"];
2) Slightly complex one: Use stringify
function getprice (gender, weight) {
var data={
"gender" : gender,
"weight" : weight
};
var str_num = JSON.stringify(data);
$.ajax({ data: str_num,
url: 'selectprice.php',
type: 'post'
beforeSend: function() {
$("#result").html("in progress..");},
success: function (reponse){
$("result").html(reponse);
})}}
selectprice.php:
replace
$gender = $_GET["gender"]; $weight = $_GET["weight"];
with
$json_data_from_js= json_decode($_POST['data']);
$gender = $json_data_from_js->gender ;
$weight = $json_data_from_js-> weight;
Upvotes: 0
Reputation: 1381
You really packed the errors in.
<input type="text" name="gender" id="gender">
<input type="number" name="weight" id="weight">
price
<input type="button" herf="javascript:;" onclick="getprice()" value="">
<script>
$(document).ready(function() {
});
function getprice () {
var str_num = {
"gender" : $('#gender').val(),
"weight" : $('#weight').val()
};
$.ajax({
data: str_num,
url: 'selectprice.php',
type: 'post',
beforeSend: function() {
$("#result").html("in progress..");
},
succes: function (reponse){
$("result").html(reponse);
}
})
};
</script>
PHP file
<?php
error_reporting(E_ALL);
ini_set('display_errors', true);
// ini_set('log_errors', true);
var_dump($_POST); // Your doing a post not a get in the javaacript.
Upvotes: 1
Reputation: 3593
You need to update your line:
url: 'selectprice.php?weight='+weight+'&gender='+gender,
Or you can pass data
just after url
url: 'selectprice.php',
data: {weight:weight, gender,gender},
Upvotes: 0