How do you submit more than one variable via Ajax?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

Nothing is being sent. Originally it worked with my "bad" code sending over "all" as one value in that select. But now that is not changing.
I can see the keyup, so how do I add to that function, an onchange to the select field as well?

I get it though... because if I then change the select field to something else, and then change the text field, it does operate. But not if I enter "white" in the text field (that shows White on screen), and then change the dropdown... which does nothing.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

I did just try this, but that breaks it all.

Code: Select all

// This really belongs in a separate JS file, not embedded alongside PHP or HTML
$(document).ready(function() {
    $('.home-search-input input').on('keyup', function(event) {
        var search_string = $(this).val();

        // Don't fire on very short strings
        if (search_string.length > 2) {
        $('.home-search-cat select').on('change', function(event) {
            var category = $('.home-search-cat select').val();
            }
            $.ajax({
                url: '/ajax-search.php?search=' + search_string + '&category=' + category,
                method: 'GET'
            }).done(function(response) {
                $('#txtHint').html(response);
            });
        }
    });
});
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you submit more than one variable via Ajax?

Post by Celauran »

simonmlewis wrote:I did just try this, but that breaks it all.
That's not a terribly helpful comment, now is it?

What's working? What isn't?

Alternately, just append '&category=some_value' to your original code and leave it at that. Leave the cleanup for another day.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

Ok.
Without my change, it processes the search value. That works. But the category value isn't changed. Nothing is passed over.
If I change it to what I have shown you, nothing is passed over at all, and the script does not run to completion.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you submit more than one variable via Ajax?

Post by Celauran »

simonmlewis wrote:Without my change, it processes the search value.
What change, specifically?
simonmlewis wrote:But the category value isn't changed. Nothing is passed over.
As in the AJAX request doesn't fire? It fires but category is always empty?
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you submit more than one variable via Ajax?

Post by Celauran »

https://jsfiddle.net/s7n2ujLq/

I had to remove the AJAX call for obvious reasons, but values are updating as expected. What's different on your end?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

Yes I Assume this change would help:

Code: Select all

         $('.home-search-input input').on('change', function(event) {
            var category = $('.home-search-cat select').val();
            }
So it would then fire the value into category on that change too.

With your fiddle, it process it if i type something in, but if I change the dropdown, it does nothing... unless after changing the dropdown I change the text again.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you submit more than one variable via Ajax?

Post by Celauran »

simonmlewis wrote:With your fiddle, it process it if i type something in, but if I change the dropdown, it does nothing... unless after changing the dropdown I change the text again.
Right. I already specifically mentioned that I had only attached a listener to the search input. Once that's working, it's pretty trivial to attach one to the select as well.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

Haha.. yes it's probably trivial for you, but I have tried it with a tiny amount of my own logic and it didn't work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you submit more than one variable via Ajax?

Post by Celauran »

simonmlewis wrote:Haha.. yes it's probably trivial for you, but I have tried it with a tiny amount of my own logic and it didn't work.
That's fine. Let's get one thing working properly and then build on that.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

Ok... i'm now not sure it's sending it over.
I failed to spot that you had the html(" words here ") in your code.

Code: Select all

<script>
// This really belongs in a separate JS file, not embedded alongside PHP or HTML
$(document).ready(function() {
$('.home-search-input input').on('keyup', function(event) {
  var search_string = $(this).val();

  // Don't fire on very short strings
  if (search_string.length > 2) {
    var category = $('.home-search-cat select').val();
    $('#txtHint').html(response);
  }
});

$('.home-search-cat select').change(function(event) {
	var category = $(this).val();
  var search_string = $('.home-search-input input').val();
  
    $('#txtHint').html(response);
});
});
</script>			
Changed it to this, but it's not putting the response into the DIV.

Here is the top bit of the PHP db file.

Code: Select all

<?php
session_start();
$todaydate = date('Y-m-d');
$newdate = strtotime("$todaydate");

if(isset($_GET['search']))
{
    $search = $_GET['search'];
    $search = str_replace("-", " ", $search);
    $_SESSION['search']=$search;
} elseif (isset($_SESSION['search'])) {
    $search=$_SESSION['search'];
}

if(isset($_GET['category']))
{
    $category = $_GET['category'];
    $category = str_replace("-", " ", $category);
    $_SESSION['category']=$category;
} elseif (isset($_SESSION['category'])) {
    $category=$_SESSION['category'];
}

if (isset($search) && $search <> '')
{
include "dbconn.php";

echo "<div class='ajax_toggle'><div class='ajax_toggleresults'>results $search $category</div><div class='ajax_togglebtn'><a href=\"javascript:toggleDiv('srcHint');\">Close</a></div><div style='clear: both' /></div></div>";

if ($category == "all")
{
$query = "SELECT * FROM products WHERE (title LIKE :search OR romancode LIKE :search OR metakeywords LIKE :search OR MATCH(title) AGAINST (:search)) AND pause <> 'on'";
}
else
{
echo "$category";
$query = "SELECT * FROM products WHERE (title LIKE :search OR romancode LIKE :search OR metakeywords LIKE :search OR MATCH(title) AGAINST (:search)) AND pause <> 'on' AND catname =:category";
}
$result = $pdo->prepare($query);
$result->execute(array(':search' => "%{$search}%", ':category' => $category));
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

Oh i can see why, it's not going out to ajax-search.php to run any queries.........................
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you submit more than one variable via Ajax?

Post by Celauran »

Yeah. The $.ajax call is required to actually send the request. I can't do that on jsfiddle because I have nowhere to send it.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you submit more than one variable via Ajax?

Post by simonmlewis »

Sure. But what is the "line of code" I had to pop in, and where.... so I can see if it works this end?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply