combine two ajax call - storing multiple post variables in url

Question

I would like to combie these two ajax call for I would like to be able to store both of the post variable in the url for as it stands only one of them can be stored at a particular time:

 <script>
            function showUser() {
                var selectedPerson = $('#testform').serialize();
                                                    document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";


                $.ajax({
                    url:'getuser.php',
                    type:'post',
                    data:selectedPerson,
                    success:function(res){
                        $('#txtHint').html(res);
                    }
                })
            }
        </script>

        <script>
            function showUser2() {
                var selectedPerson = $('#testform2').serialize();
                                                    document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";


                $.ajax({
                    url:'getuser.php',
                    type:'post',
                    data:selectedPerson,
                    success:function(res){
                        $('#txtHint').html(res);
                    }
                })
            }
        </script>

Below is the php portion:

$person  = isset($_POST['person']) ? $_POST['person'] : '';
$allIds = '';
if($person!='')
{
    $allIds = implode(',', $person);
}


$person2  = isset($_POST['person2']) ? $_POST['person2'] : '';
$allIds2 = '';
if($person2!='')
{
    $allIds2 = implode(',', $person2);
}

If any clarification are needed let me know

Update:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            function showUser() {
                var selectedPerson = $('#testform').serialize();
                                                    document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";


                $.ajax({
                    url:'getuser.php',
                    type:'post',
                    data:selectedPerson,
                    success:function(res){
                        $('#txtHint').html(res);
                    }
                })
            }
        </script>

        <script>
            function showUser2() {
                var selectedPerson = $('#testform2').serialize();
                                                    document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";


                $.ajax({
                    url:'getuser.php',
                    type:'post',
                    data:selectedPerson,
                    success:function(res){
                        $('#txtHint').html(res);
                    }
                })
            }
        </script>
    </head>
    <body>

        <form id="testform">
            <input onchange="showUser();" name="person[]" type="checkbox" value="1">One<br>
                        <input onchange="showUser();" name="person[]" type="checkbox" value="2">Two<br>
                                                <input onchange="showUser();" name="person[]" type="checkbox" value="3">Three<br>



        </form>

        <br>
        <div id="txtHint"><b>Person info will be listed here...</b></div>

    </body>
</html>

update

PHP entire code

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<?php
$person  = isset($_POST['person']) ? $_POST['person'] : '';
$allIds = '';
if($person!='')
{
    $allIds = implode(',', $person);
}


$person2  = isset($_POST['person2']) ? $_POST['person2'] : '';
$allIds2 = '';
if($person2!='')
{
    $allIds2 = implode(',', $person2);
}





include("includes/db.php"); 



global $con;


$sql= "SELECT * FROM courses WHERE (course_duration IN ('" . $allIds . "')) LIMIT 10";
$result = mysqli_query($con,$sql);
$sqlCount = "SELECT * FROM courses WHERE (course_duration IN ('" . $allIds . "'))";
$get_crs_count = mysqli_query($con, $sqlCount);
$count_rows = mysqli_num_rows($get_crs_count);
echo '<p style="margin-bottom: 8px;margin-top: 8px;font-size:18px;"><b>Number of courses available: </b>' . $count_rows ;
while($row_crs = mysqli_fetch_array($result)){ 

    $crs_id = $row_crs['course_id'];
        $crs_cat = $row_crs['course_cat'];

    $crs_provider = $row_crs['course_provider'];

    $crs_title = $row_crs['course_title'];
        $crs_price = $row_crs['course_price'];
          $crs_city= $row_crs['course_city'];
                      $crs_category= $row_crs['course_cat1'];

          $crs_date= $row_crs['course_date1'];


$crs_sdesc= $row_crs['course_sdesc'];
$crs_shortdesc = mb_strimwidth("$crs_sdesc",0,140,"...");
        $crs_image = $row_crs['course_image'];
        $provider_image = $row_crs['provider_image'];


  echo " <article class='search-result row'><center>
      <div class='col-xs-12 col-sm-12 col-md-3' id='thumbnailContainer'>
        <a href='#' title='Lorem ipsum' class='thumbnail' id='resultThumbnail'><img src='$provider_image' /></a>
     <a href='searchPage.php?crs_price=$crs_price' style='color:black;'>  <button id='resultprice'><span id='resultpriceText'>$ $crs_price</span></button></a>
      </div>
      <div class='col-xs-12 col-sm-12 col-md-2'>
        <ul class='meta-search' id='listDesign'>
        <a href='searchPage.php?crs_date=$crs_date' style='color:white;'>   <li><button id='resultInfo'><i class='fa fa-calendar fa-1x'><span id='iconText'>  $crs_date</span></i></button></li></a>
         <a href='searchPage.php?crs_category=$crs_category' style='color:white;'>   <li><button id='resultInfo2'><i class='fa fa fa-tags fa-1x'><span id='iconText'> $crs_category</span></i></button></li></a>
<a href='searchPage.php?crs_provider=$crs_provider' style='color:white;'><li><button id='resultInfo'><i class='fa fa-graduation-cap fa-1x'><span id='iconText'>  $crs_provider</span></i></button></li></a>
<a href='searchPage.php?city=$crs_city' style='color:white;'><li><button id='resultInfo'><i class='fa fa-map-marker fa-1x'><span id='iconText'> $crs_city</span></i></button></li></a>
        </ul>
      </div></center>
      <div class='col-xs-12 col-sm-12 col-md-7 excerpet'>
        <h3 id='resultHeading'><a href='coursePage.php?crs_id=$crs_id' id='headingLinking'><b>$crs_title</b></a></h3>

        <div id='courseshortDescription'>
$crs_shortdesc
 <center><a href='coursePage.php?crs_id=$crs_id' style='color:white;'><button class='btn btn-danger' id='findoutBtn'>Find Out More</button></a> </center>
        </div>  

</div>

      <span class='clearfix borda'></span>
    </article>";
}

mysqli_close($con);
?>
</body>
</html>

courses: enter image description here

thanks for your responsve. I've added an update under my initial post posting the entire html page, essentially I am trying to achieve this w3schools.com/php/php_ajax_database.asp but with multiple checkboxes instead of a single select option' — user4644565
– user4644565, Commented Mar 25, 2015 at 15:32
well you would have to store the parameters of the first call on the server side using a session. However this would be a very fragile solution. Can you not just send the parameter of the first request along with the one you are sending anyway? — newBee
– newBee, Commented Mar 25, 2015 at 15:33
hi thanks for your inquire. I know its fragile but i would like to use session as it will make it easier for me to retrieve variables on other pages. I am quite a rookie at this how would i work this out with session — user4644565
– user4644565, Commented Mar 25, 2015 at 15:36

Wesley Smith · Accepted Answer · 2015-03-25 17:28:50Z

0

Actually serialize() can accept both forms:

        function showUser() {
            var datastring = $('#testform, #testform2').serialize();
            document.getElementById("txtHint").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";

            $.ajax({
                url: 'getuser.php',
                type: 'post',
                data: datastring,
                success: function (res) {
                    $('#txtHint').html(res);
                }
            })
        }

edited Mar 25, 2015 at 17:28

answered Mar 25, 2015 at 15:38

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

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

11 Comments

user4644565 Over a year ago

thanks for your response delighted as always. So i am using just the form name would be different but the function associated with each input would remain the same. would there be any changes to the php page?

user4644565 Over a year ago

I've implementation your suggestion, and it works but the problem now I have is with two seperate post i can control the variable, in the sense that the first form would be for course duration and second would be for sub category. now it seems that both form refers to the same variable, which in this case how do i know which variable is associated with which form which would be useful in in working with the sql to display the result $sql= "SELECT * FROM courses WHERE (course_duration IN ('" . $allIds . "') OR course_SUBC1 IN ('" . ? . "')) LIMIT 10";

Wesley Smith Over a year ago

Are you trying to send just two inputs to your php page or all of the inputs from two separate forms?

Wesley Smith Over a year ago

So, are your checkboxes supposed to submit the form?

Wesley Smith Over a year ago

Are you married to the idea of doing this with php and mysql, or are you open to other backend storage solutions?

|

Collectives™ on Stack Overflow

combine two ajax call - storing multiple post variables in url

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related