Colorbox

JavaScript
1

Hello everyone.

Forstly an apology for being such an appalling newbie, but I have a website I would like to tart up a bit with colorbox.

Essentially the web page uses input boxes and external php scripts to search a mysql database, and I have no clue how to direct the search results into a centred colorbox.

Here is the code for one of the search options, it calls a plain vanilla php script which does the query and formats the output via html commands. Nothing ver complicated:

<li>
<h2> search for city </h2>
<div align=“center”>
<form name=“city” action=“searchscripts/search_city.php” method=“post”>
<input type=“text” name=“city”>
<input type=“submit” name=“Submit” value=“Search”>
<input type=“reset” name=“reset” value=“Clear”>
</form>
<br />
<br />
(results sorted by country/type/sub-type/surname)
</div>
</li>

Can anyone tell me how to put the search results in a colorbox? Is colorbox even the right choice for a newb? Grateful for any help with this…

2

And yes, Cambridge is nice but expensive! I used to live in London and the difference price-wise is not big at all, but the pace of life, the lack of noise and the sheer number of people everywhere are a lot better. Plus it’s nice to be able to get pretty much anywhere by bike in about 15 minutes.

Ahh yes, I remember it all well, there’s a certain air of academia about the place, hardly surprising of course…

As to the code, I put the js function in the header section and still can’t get a result. I must be an awful prat. Education will out and I think I just don’t have the programming expertise. :confused:

Perhaps I should try plumbing… or brick-laying…

3

You can just put it with any other JS you have, just make sure it’s initiated once the DOM is ready:

$(function() {
  $('input[type=submit]').submit(function() {
    $.colorbox({href:'search.php?searchstring=' + $(input[name=city]).val()});
    return false;
  });
});

And yes, Cambridge is nice but expensive! I used to live in London and the difference price-wise is not big at all, but the pace of life, the lack of noise and the sheer number of people everywhere are a lot better. Plus it’s nice to be able to get pretty much anywhere by bike in about 15 minutes.

4

It’s probably because I’ve been a prat - the submit event happens on the form, not the submit button. So the jQuery selector before .submit() needs to be changed. Change it to this:

$(function() {
  $('form').submit(function() {
    $.colorbox({href:'search.php?searchstring=' + $(input[name=city]).val()});
    return false;
  });
});

Note that it will add the behaviour to all forms, I’ll leave it to you to choose an appropriate selector for that particular form.

5

Hi Raffles,

Thanks for the suggestions, I took them all. Where would I put the code you suggested above? Somewhere in the input code I gave? Help appreciated.

BTW, I see you are in Cambridge, loverly spot, I worked for a year at Addenbrooke’s a few years ago - love to able to afford to live there permanently…

6

You will have to intercept the submit event:

$('input[type=submit]').submit(function() {
  $.colorbox({href:'search.php?searchstring=' + $(input[name=city]).val()});
  return false;
});

BTW, searches normally use GET rather than POST. This can be useful so that users can edit the search string in the address bar. It also doesn’t involve sensitive information, so GET is OK. Also, you don’t need to have a name attribute for the FORM element, especially since one of the INPUTs already has that name.