ansaurus

Question

Answer 1

+4 A:

onclick="run_query();"

You don't seem to block the form's default action. Add a return false; to the end of onclick:

onclick="run_query(); return false;"

Or if run_query() actually returns false, then rewrite the onclick as follows:

onclick="return run_query();"

Update: you indeed didn't pass the request parameter to PHP code. Replace

var url = "search.php";

by

var url = "search.php?search=" + searchvalue;

And use $_GET in PHP. If you actually want to use POST, then do

var url = "search.php";
xmlHttp.open("POST",url,true);
xmlHttp.send("search=" + searchvalue);

(the searchvalue is obviously the user-entered value. I assume that you can figure how to grab it from the HTML DOM using JS.

That said and unrelated to the actual problem, instead of all that opaque and boilerplate Ajax code I suggest you to use jQuery for this. It greatly eases doing ajaxical stuff. You could for example use jQuery.post() instead of this all. The link points to several examples.

BalusC 2010-04-25 22:19:11

did that. doesn't work. if i add `onclick="run_query(); return false;"` it displays all the records, instead of the keyword entered [the sql query works because i've tried in mysql] and if i rewrite the onclick, then nothing happens.

fuz3d 2010-04-25 22:34:43

It at least solved the problem that the page got refreshed. Your next problem is why it returns all results. Is the request parameter passed correctly? Is the request parameter gathered correctly? Debug your PHP code.

BalusC 2010-04-25 22:54:19

the request parameter isn't being passed to search.php

fuz3d 2010-04-25 22:59:56

i've posted the relevant snippet from search.php above.

fuz3d 2010-04-25 23:01:19

thanks for this. but it doesn't work. in the address bar, it doesn't go search.php. rather it shows `search.html?search=sweet` and displays no result ..what am i doing wrong here?

fuz3d 2010-04-26 15:38:36

That's already answered. You need to `return false` to block the form's default action.

BalusC 2010-04-26 15:55:11

thanks. its working now.

fuz3d 2010-04-26 17:11:06

Answer 2

A:

I am guessing that you need to add a return false; somewhere in your Javascript?

Finbarr 2010-04-25 22:19:27

Answer 3

A:

So, let me see if I understood you properly:

You have 2 files: a plain text HTML where you have the aforementioned form, and a search.php file that receives the AJAX petitions, right? And you want the file not to submit the data but instead send the AJAX and construct the results in the searchContainer div, right?

Then you have 2 options:

Construct the results from an XML / Plain text petition
Use innerHTML, if supported by your browser.

Stranding from the answer, the previous answers are right, you need a return false; to avoid submitting the form to the server. Now, going back to the answer, you could also change the type from submit to button to use just a button instead.

Now, the options:

The first option should be the ideal: you get the results in a pre-formatted string, which you can then split and construct with createElement() and appendChild(). Although this requires a little more coding, you ensure cross-browser support (unless the browser sucks so much you cannot use the 2 functions mentioned above).
This one is pretty much browser-dependant (I had issues with Firefox and Internet Explorer), and you may have to implement a lot of checking and other functions to replace the current HTML written inside the searchContainer.

I'd go for number 1, it puts off a lot of weight off your shoulder.

Update:

Per request, I'm editing with an example of 1). Supposing you get the results as plain-text, saved in xhr_results and formated like this: text_1:value_1|text_2:value_2|... (I don't know much about XML, and this is easier for me).

var options = xhr_results.split('|');
var options_text = [];
var options_value = [];
for (var i = 0; i < options.length; i++){
options_text[i] = options[i].split(':')[0];
options_value[i] = options[i].split(':')[1];
}
var sel = document.createElement('select');
for (var i = 0; i < options.length; i++){
    opt = document.createElement('option');
opt.text = options_text[i]
opt.value = options_value[i];
sel.appendChild(opt);
}

This piece of code will construct you a dropdown menu with all the options passed from the AJAX.

erKURITA 2010-04-25 22:30:27

thank you for your response. can you give an example of the first option?

fuz3d 2010-04-25 22:35:56

Updated the answer with an example. Once constructed, all you have to do is document.getElementById('searchContainer').appendChild(sel); , for example.

erKURITA 2010-04-25 23:15:24

ansaurus

tags:

views:

answers:

search form in html/php via ajax

related questions