CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Frank
Frank

Reputation: 23

How do I pass a value to a PHP script using AJAX?

I am trying to learn web design with a search function using MySql. I want make it to 2 steps selection however, I have run into a problem which really confuses me since I don't have a strong background to design. I am trying to be as specific as possible to make the question clear.

test.php

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>count</title>
<link rel="stylesheet" type="text/css" href="dbstyle.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> 
</script>

</head>
<body>

<form id="serc" method="post" action="">
<input type="radio" value="typeA" name="comments" onclick="expr()">Good
<input type="radio" value="typeB" name="comments" onclick="expr()">Bad
</form>

<form id="form1" name="form1" method="post" style="visibility:hidden">
<p>please select reason:</p>
<input type="checkbox" class="check" name="checkbox[]" value="COL 8">aaa<br />
<input type="checkbox" class="check" name="checkbox[]" value="COL 9">bbb<br />
<input type="checkbox" class="check" name="checkbox[]" value="COL 10" >ccc<br />
<button id="aaa" type="submit" class="butt" name="sub2" style="visibility:hidden">Submit</button>
</form>

<?php
$comm = $_POST["gender"];
$reas = $_POST["checkbox"];

if($comm){$respond = $_POST['comments'];
    echo $respond;
}

<script src="limit.js"></script>

</body>
</html>

limit.js

//click to get Value
$("input[type='Radio']").click(function(){
    var radioValue = $("input[name='comments']:checked").val();
    $("#serc").css("display", "none");
    $("#form1").css("visibility", "visible");
});

//limit multiple selection up to 4
$("input:checkbox").click(function() {
    var bol = $("input:checkbox:checked").length;
    if(bol == 4){
        $("input:checkbox").not(":checked").attr("disabled",bol);
        $("#aaa").css("visibility", "visible");
    }
    else {
        $("#aaa").css("visibility", "hidden");
        $("input:checkbox").removeAttr("disabled");
    }
});

// return value
function expr()
{
    var radioValue = $("input[name='comments']:checked").val();
    var dataTosend= radioValue;
    $.ajax({
        url: 'index.php',
        type: 'POST',
        data: dataTosend,
        async: true,
        success: function (data) {
            alert(data)
        },
    });
}

The function will be:

First stage select from radio item, onclick use jQuery to hide the selection items and also get radioValue from the jQuery by Ajax way to send to php use.

Second stage select 4 items from checkbox, and submit to run search field.

I expect load the radioValue back to php as a variable but seems it didn't get the value.

Any help would be appreciated.

Upvotes: 2

Views: 114

Answers (1)

Naser Nourani
Naser Nourani

Reputation: 124

You must send data using key value pair like this:

    function expr(){
    var radioValue = $("input:radio[name='comments']").val();
    var dataTosend= {'radioValue': radioValue};
    $.ajax({
        url: 'index.php',
        type: 'POST',
        data: dataTosend,
        async: true,
        success: function (data) {
            alert(data)
        },
    });
}

Upvotes: 2

Related Questions