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

Question

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.

You are trying to submit when user clicks either Good or Bad radio button.. is that correct? The Submit handler is just considering the Good/Bad radio button & not the checkboxes below.. is this correct? — techie_28
– techie_28, Commented Jun 10, 2019 at 4:35
I am trying to make the submit button considering the checkbox only, and its working . But before that the radio button is unable to got the value(typeA/typeB) while i click the radio (which there is no submit). — Frank
– Frank, Commented Jun 10, 2019 at 5:34
onclick="expr()" is there on the typeA/typeB radio buttons which means you want to submit as soon as the option is clicked. Only submit button is name="sub2" which is inside the 2nd form and not in this. Is that how you want it? — techie_28
– techie_28, Commented Jun 10, 2019 at 5:42
Use your browser console "Network" tab to monitor the ajax call. You can verify if the data is being submitted or not after examining the call. — techie_28
– techie_28, Commented Jun 10, 2019 at 5:51
I was trying to got the value back to php when i click onclick="expr()" but not submit, just get the value "typeA" from the button, my jQuery had defined the action after i click the button, and i just want to send the value "typeA/B" back to php so that it can be use to define other function. Sorry for the confusion. — Frank
– Frank, Commented Jun 10, 2019 at 6:01

Naser Nourani · Accepted Answer · 2019-06-10 06:57:09Z

2

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

edited Jun 10, 2019 at 6:57

answered Jun 10, 2019 at 4:17

Naser Nourani

1246 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Frank Over a year ago

Thanks for prompt reply, I tried to recall the value but it seems unable to recall by this way: "echo $radioValue; " but it seems not return the value after i clicked the radio item. or do I misunderstood something that caused this issue?

Frank Over a year ago

I also tried to send to an empty php file and it jumps an empty box when it runs alert(data). Any comments will be gratitude. Thanks again

Naser Nourani Over a year ago

Your welcome .Are you can print the selected radio value in console before send to ajax?It seems your select not working.try this again : var radioValue = $("input:radio[name='comments']").val();

Frank Over a year ago

Tried to do that, When I clicked the radio the alert shows up and print "localhost says with empty box". Seems like the value from the radio (typeA/B) wasn't able to load before ajax. Thinking about how to fix it...at the moment.

techie_28 Over a year ago

by this way your PHP should get the radio button value in $_REQUEST['radioValue'] or $_POST['radioValue'] is it showing blank there?

|

Collectives™ on Stack Overflow

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

1 Answer 1

14 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Related