jquery not sending button choice to php

Question

I have a search function that will accept a search string and send it to a php file for parsing a database column. I'd also like users to choose which aspect of the website they'd like to search (comics, artwork, or both). Comic and Artwork or stored in two separate tables.

This is a function that will accept an input search string from the html below and send it to a php file.

<script type="text/javascript">

        function search(searchString) {     
            //var site = $("#site").val();
            $.get("./scripts/search.php", {_input : searchString},
                function(returned_data) {
                    $("#output").html(returned_data);
                }
            );
        }

And this is javascript to accept a choice to search "comics", "artwork" or "all".

        function searchChoice(choice) {     
            alert("Choice: " + choice);
            $.get("./scripts/search.php", {_choice : choice}
           );
        }

</script>

HTML:

    <!--Search filtering for comics, artwork, or both-->
<span class="search"><b>Search for: </b> </span>

<div class="btn-group" data-toggle="buttons-radio">
<span class="search">
    <button type="button" class="btn" id="comics" onclick="searchChoice(this.id)">Comics</button> 
    <button type="button" class="btn" id="artwork" onclick="searchChoice(this.id)">Artwork</button> 
    <button type="button" class="btn" id="all" onclick="searchChoice(this.id)">All</button> 
</span>
</div>

<br/>
<br/>

<!--Search functionality-->
<span class="search">
    <input type="text" onkeyup="search(this.value)" name="input" value="" />
</span>

<br />
<span id="output"><span class="sidebarimages">  </span></span>

PHP excerpt:

$input = (isset($_GET['_input']) ? ($_GET['_input']) : 0); 
$siteChoice = (isset($_GET['_choice']) ? ($_GET['_choice']) : "all");

You can see the javascript correctly alerting out "Choice: comics" when comics button is selected, but the php side, echo "</br>Choice: " . $siteChoice; echo "</br>Choice: " . $siteChoice; , is echo'ing out "all", which is incorrect.

Any ideas would be greatly appreciated!

Answer 1

As mentioned @E_p, that is the problem ... another option is to create a variable and store the data there ... try this: you don't need change the html

   var mySearchString = 0;
   var myChoice = 'all';


function search(searchString) {     
        mySearchString = searchString;
        GetSearch();
        }

function searchChoice(choice) {     
            myChoice = choice;
            GetSearch();
            }

function GetSearch(){

 $.get("./scripts/search.php", {_input : mySearchString, _choice : myChoice},
        function(returned_data) {
            $("#output").html(returned_data);
        }
    );

}

Answer 2

You do not keep state for _choice.

When search is called it does not pass it to a server.

You need to change buttons to option and in search function pass both. to a server at the same time

Answer 3

Replace the buttons with radio buttons and use form.Serialize()

<form id="searchform">
    <input type="radio" name="_choice" value="comics" />Comics<br/>
    <input type="radio" name="_choice" value="artwork" />Artwork<br/>
    <input type="radio" name="_choice" value="all" />All<br/>


    <input type="text" onkeyup="search()" name="_input" value="" />
</form>

Javascript

  function search() {     
        //var site = $("#site").val();
        $.get("./scripts/search.php", $('#searchform').serialize(),
            function(returned_data) {
                $("#output").html(returned_data);
            }
        );
    }

The .serialize() function converts form input to JSON so you don't have to type manually, No more parameter, and no two functions, just one to do them all